Comparing and contrasting: Grid, Margin, Flex, Float


#83

Read this:

You will then be able to determine whether or not your intended links are appropriate to use with <nav> or should instead be in a <div>. The only link you have so far indicates the latter, but as you were unable to answer the question of where your other links will lead, you will need to make the assessment for yourself when you have decided on the links.

The reference also explains what content is permitted inside a <nav> element.


#84

I have to disagree as the spec is clearly ambiguous on this point and there should be no discrimination here between internal and external links. A website may be a resource for external links on some subject and as such fits the description of 'major navigation'.

The nav element is suitable for 'major navigation' components and in asasass's example there is only one set of major navigation links that we can deduce from the code presented so far. Where the links go to is of no real matter because their purpose is to aid users in navigation to a destination relevant to the context they are presented.

I see them as an ideal candidate for the nav element (albeit I still think there should be a ul list inside also but that is another question).

All of this is of course debatable (as usual with semantics) and in many cases is left to the author to make the final judgement.:slight_smile:


#85

Yes, I can go with that. If the group of links are the main source of navigation that you intend people to use, then the <nav> element is where they should be placed.


#86

If the group of links are the main source of navigation that you intend people to use, then IMHO:

(a) they should not be hidden initially
(b) they should be keyboard-accessible
(c) it should be immediately apparent that they are links
(d) it should be clear where they lead
(e) they should not automatically open in new tabs, as this is bad UX: if it is unavoidable for some reason, then it should be indicated that the link will open in a new tab.


#87

I believe one of my earlier examples (in a previous life it seems like now) simply covered up the links but did not hide them.

The cover element (the one with the heading called 'Links') could be coded as a skip link to satisfy accessibility requirements.

Of course no one here apart from the author knows the real intention of this layout and if it just for a practice of layout techniques then we can have some leniency but for a working site we should be looking at the accessibility issues as you mention :slight_smile:


#88

One of my much earlier menu techniques involved replacing the anchor for the current page's menu button with an inert <span>set. It wasn't popular because the HTML for each menu item contained both the anchor and the non-displayed <span>text</span>, but menu feedback behavior (accessibility) was flawless.


#89

I have that one too.

https://jsfiddle.net/ojgmdeqp/48/

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.wrape .cover {
  width: 266px;
  height: 174px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape.active,
.wrape .cover {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
}

.wrape .cover {
  display: none;
}

.wrape.inactive .cover {
  display: block;
}

.wrape .cover::before,
.wrape .cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 168px;
  background: #0059dd;
}

.wrape .cover::after {
  left: 177px;
}

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrape .nav li {
  float: left;
}


/* Blogger

.widget ul.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.widget ul.nav li {
  float: left;
  margin: 0;
  padding: 0;
  border: none;
}

*/

.wrape .nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape .nav a:hover {
  border: 3px solid red;
}

.wrape .nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.wrape .nav li:nth-of-type(8) a {
  opacity: 0;
  border: none;
  background: none;
}

.wrape .nav li:nth-of-type(14) a {
  border: 3px solid #0059dd;
  background: rgba(255, 170, 0, 0.5);
}

.wrape .nav li:nth-of-type(15) a {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}

.wrape .nav .left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 44px;
  background: rgba(0, 255, 255, 0.5);
}

.wrape .nav .left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.wrape .nav .middle-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 14px;
  height: 44px;
  background: rgba(255, 255, 255, 0.5);
}

.wrape .nav .right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.wrape .nav .right-background {
  position: absolute;
  top: 0;
  left: 32px;
  width: 12px;
  height: 44px;
  background: rgba(255, 0, 255, 0.5);
}

.wrape.inactive a {
  display: none;
}

.wrape.inactive .playButton {
  display: none;
}

.wrape.active .playButton {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
  fill: #aaff00;
}

.wrape.active {
  background-position: -260px 0;
}

.wrape .play,
.wrape .pause {
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  right: 0;
  margin: auto;
}

.wrape .pause {
  left: 0;
}

.hide {
  display: none;
}

<div class="wrape">
  <div class="cover" title="OPEN"></div>
  <ul class="nav">
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li><a> Audio Player</a></li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>

#90

What do you mean by this, how do you do that?

This is what I'm using to target the link to make it invincible.

.wrape .nav li:nth-of-type(8) a {
  opacity: 0;
  border: none;
  background: none;
}

#91

That doesn't work:

Here:

<span>Audio Player</span>
https://jsfiddle.net/vse5dpdu/4/

or

Here:

<li><span>Audio Player</span></li>
https://jsfiddle.net/ojgmdeqp/62/


#92

In what way does it "not work"?

If you are referring to the broken layout, it is working as I would expect, given that you have not created any CSS rules targeting the new <span> elements. You need to think about what you're doing when you make adjustments to the code, and ensure you update both HTML and CSS, when required. These things don't just happen by magic.


#93

There are only 13 blocks when there should be 14.

a
<span>Audio Player</span>
https://jsfiddle.net/vse5dpdu/25/

ul
<span>Audio Player</span>
https://jsfiddle.net/ojgmdeqp/68/


#94

And why is that? In what way have you changed your code to cause that to happen? What do you need to do now to fix it?


#95

I'm not entirely sure here.


#96

Well, you made the changes; what did you change?

Did you validate your HTML to ensure there are no problems there?


#97

https://validator.w3.org/nu/#textarea

Document checking completed. No errors or warnings to show.

https://jsfiddle.net/ojgmdeqp/73/


#98

OK - that's removed the invalid code, which is a good start.

Now you can work out what it is about the way you have changed your code which is causing it to display differently, and when you understand that, you can update the CSS accordingly.


#99

Well think about it. :slight_smile:
Your anchors were the blocks since they had the 50px dimensions on them.

You removed an anchor and stuck a span in it's place.

By default a span is an inline element without dimensions ( = missing block)

You think there might have been more to Ron's technique than just inserting a span out of the blue. I'm sure there was some CSS involved in it, he didn't go into the details.

Says the span was non-displayed
Might have been done with display:none; or moved off screen


#100

These both work.

<li><a> Audio Player</a></li>
https://jsfiddle.net/ojgmdeqp/74/

.wrape .nav li:nth-of-type(8) a{
  opacity: 0;
  border: none;
  background: none;
}

<a> Audio Player</a>
https://jsfiddle.net/6ukt4b81/1/

.wrape .nav a:nth-of-type(8) {
  opacity: 0;
  border: none;
  background: none;
}

#101

That second method is better than the first, as it makes less assumptions about the structure of the code.


#102

I have 2 methods?

oh, you mean this one then.

<a>Audio Player</a>
https://jsfiddle.net/6ukt4b81/1/