Comparing and contrasting: Grid, Margin, Flex, Float


#63

It works for me. Does it work for you?


#64

What's the difference in their usage.

Why would one use one over the other?

I found this:
https://www.w3schools.com/tags/tag_nav.asp

The <nav> element is intended only for major block of navigation links.

Which is probably more appropriate here, rather than using a div tag.


#65

Yes, that's right. Although, nav is not appropriate for a set of links.


#66

Meaning what?

In the example they show this:

Example

A set of navigation links:
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

#67

Now it does. Maybe there was just a blip in the stream.


#68

Those links that you have on your button are external links. They are not intended to help people navigate around your own web site, so they are not valid to be considered as navigation.


#69

How come @Ray.H @PaulOB used

<nav class="nav">

instead of

<div class="nav">

Here?
#55

 <nav class="nav">
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="ap"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
 </nav>

And here?
#54

 <nav class="nav">
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="ap"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
        <div class="left-background"></div>
        <div class="left-border"></div>
        <div class="middle-background"></div>
        <div class="right-border"></div>
        <div class="right-background"></div>
      </a>
 </nav>

How is that different from how I used

<nav class="nav">

Here?
https://jsfiddle.net/mws7dwoq/60/

<nav class="nav">
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="ap">Audio Player</a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a href="#" target="_blank"></a>
      <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
        <div class="left-background"></div>
        <div class="left-border"></div>
        <div class="middle-background"></div>
        <div class="right-border"></div>
        <div class="right-background"></div>
      </a>
 </nav>

#70

If this is columns:

I just did this here:
https://jsfiddle.net/mws7dwoq/20/

.wrapc .nav {
  columns: 5;
  /*create 5 columns for anchors*/
  column-gap: 4px;
  /*side margins between anchors*/
}

What would rows look like?


#71

There is no such thing as a CSS Row layout module.

But as I explained in post #55, CSS Multi-Columns is another way to achieve the layout without the extra divs, floats, flex, or grid...

The CSS Multi-column Layout standard is a CSS module that adds support for multi-column layouts to CSS. This module makes it easier and more reliable than ever to produce columnar layouts without having to hand-code complicated and fragile structures.

And as I also mentioned, I am in a column direction rather than row. Because that's how the module works. The links run from top to bottom in the columns. The columns run from left to right. So, once again you have to accept the rules of the layout method your using.


#72

Is that what this is?

CSS Multi-column Layout
https://jsfiddle.net/mws7dwoq/20/

.wrapc .nav {
  columns: 5;
  /*create 5 columns for anchors*/
  column-gap: 4px;
  /*side margins between anchors*/
}

#73

Yes, complete details found in link below. When on that page, a complete list of additional properties is found in the left column.

Using columns


#74

Using columns, overflow:hidden is not needed on this, right?

overflow: hidden;
https://jsfiddle.net/mws7dwoq/43/

overflow: hidden; Removed
https://jsfiddle.net/mws7dwoq/45/

When removed, the text doesn't move after you click on the cover.


#75

All anchors DO have a bottom margin on them.
It is the height on .wrapc that is hiding the bottom margins when overflow:hidden is removed.

.wrapc {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  background: red;
}

If you remove the height, the layout still holds together due to column count. But the bottom margins are exposed. Then the text will move.

I don't know what changes you made to your cover div with the js. But it looks like overflow:hidden can be removed on this method.

But if your not willing to accept that your links run from top to bottom then left to right, don't use it.


#76

What do you mean by that.

I didn't make any changes.

This is the only thing in the javascript that mentions the cover.
hide(wrapper.querySelector(".cover"));


#77

I remember changes being made to js in your other thread

As I just mentioned though, it looks like everything is fine without it


#78

What do you say?
@Ray.H

About what @Paul_Wilkins is referring to.

Using
<nav class="nav">

instead of

<div class="nav">

More specifically

Can:

<a class="ap">Audio Player</a>

Be used inside,

Here:

<nav class="nav">

<a class="ap">Audio Player</a>

<nav>

@Paul_Wilkins Keeps saying no, and I disagree with that.

#64

#65

#66

#68

#69


#79

Honestly though, what baffles me is why you still want to use all those divs in your last anchor.

Just to achieve this...

The code I use gets the job done with this...

<a class="cube"></a>

.nav a.cube { background:
    linear-gradient(to right,
    rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5) 13px, /*left block*/
    #0059dd 13px, #0059dd 16px,  /*3px border*/
    rgba(255, 255, 255, 0.5) 16px, rgba(255, 255, 255, 0.5) 28px, /*center block*/
    #0059dd 28px, #0059dd 31px,  /*3px border*/
    rgba(255, 0, 255, 0.5) 31px); /*right block*/
}

While your html and css look like this...

    <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
      <div class="left-background"></div>
      <div class="left-border"></div>
      <div class="middle-background"></div>
      <div class="right-border"></div>
      <div class="right-background"></div>
    </a>

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

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

.wrapc .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);
}

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

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

#80

I have a bunch of different versions saved. And just kept on using the same code.

But it's simple to switch out.

I made an updated one using the new javascript:
https://jsfiddle.net/qrxbs21j/35/


#81

Did you read PaulOB's comment from post #54

It was suggested as an alternative since your not using a list.
The suggestion was not meant to start a semantics war.

We don't know what kind of links are going in there.
The <nav> element will add some implied semantic value to your links.
If you don't need semantic value to your links then go back to div.


#82

Does it make a difference if nav is being used with an empty a tag?

or, is that not considered empty?

<a class="ap">Audio Player</a>
https://jsfiddle.net/mws7dwoq/65/

 <nav class="nav">
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a class="ap">Audio Player</a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a href="#" target="_blank"></a>
    <a class="cube" href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
      <div class="left-background"></div>
      <div class="left-border"></div>
      <div class="middle-background"></div>
      <div class="right-border"></div>
      <div class="right-background"></div>
    </a>
  </nav>