Removing Negative Margin


#122

This was all I needed to add:
https://jsfiddle.net/Lgrnraho/15/

  .links a:nth-child(n+11) {
    margin-bottom: 0;
  }

#123

Give this post a read. It should take less than 1 minute. :wink: @RyanReese summarizes how to read (and write) the nth-child pseudo-class.


#124

That's way more code than just this.

 .links a:nth-child(n+11) {
    margin-bottom: 0;
  }

#125

Yes that works

I was starting my count from the last anchor, If you had a very large count that changes frequently it can help manage things

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.links {
	width:266px;

	overflow:hidden;
	position: relative;
	background: red;
	cursor: pointer;
}
.links a {
	float:left;
	width: 50px;
	height: 50px;
	background: black;
	box-shadow: inset 0 0 0 3px #0059dd;
	margin:0 4px 12px 0;
}

.links a:nth-last-of-type(-n+5) {
    margin:0 4px 0 0;
    background:white;  /*testing the targets*/
}
.links a:nth-of-type(5n){margin-right:0}

</style>
</head>

<body>
<div class="links">
  <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 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 href="" target="_blank"></a>
</div>



</body>
</html>

#126

Not really. Ray used a different pseudo-selector and added a test line to change the color of the last row if anchors. Remove the line of coloring and it's the same amount of code.

Hmmm, you didn't really clarify which of his posts you are referring to. I was comparing our last posts, not my last with his earlier.


#127

Which is better, the way you did it, or the way he did it?


#128

IF I hear you ask "which is better" again, I'm bailing. They both work equally well. Check "caniuse" to verify the range of compatibility of Ray's pseudo-selector. The world of writing HTML and CSS is NOT black-and-white where a "best" method on one page is best everywhere.


#129

https://caniuse.com/#search=nth-last-of-type


#130

Did I send this topic off on a tangent or do you have another question about this topic that has not been addressed?


#131

I'm all good. And thank you for your help.


#132

This was all just a learning exercise for you wasn't it? I think I've read that in other posts of yours.

Actually, the best way is to use a background image.

You were just using all those anchors to create a grid. One large anchor and a BG image is all you need and it will cut that code down.

And here is your background image made from a screenshot of your code.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.links {
    width:266px;
    height:174px;
    position: relative;
    background: url(bg.jpg) no-repeat;
    cursor: pointer;
}
.links a {
    display:block;
    height: 100%;
    margin:0;
}

</style>
</head>

<body>

<div class="links">
  <a href="" target="_blank"></a>
</div>

</body>
</html>

#133

That’s not true! If you add some plain text after your code as you did in your original (test) you will see that when you remove the overflow the text moves to a different position at the end of the line

I added the overflow hidden to contain the floats and also to hide the bottom margin on the last row and thus negate any effect outside the main container.


#134

The code was adjusted here, removing height which I was told to do.

I was told:
Fixed heights are generally not a good idea

https://jsfiddle.net/Lgrnraho/15/

<style>
  .links {
    width: 266px;
    overflow: hidden;
    position: relative;
    background: red;
    cursor: pointer;
  }
  
  .links a {
    float: left;
    width: 50px;
    height: 50px;
    background: black;
    box-shadow: inset 0 0 0 3px #0059dd;
    margin: 0 4px 12px 0;
  }
  
  .links a:nth-of-type(5n) {
    margin-right: 0
  }
  
  .links a:nth-child(n+11) {
    margin-bottom: 0;
  }
  
  .initial1 {
    height: 168px;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton1.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
  }
  
  .links.hide a,
  .play1 {
    display: none;
  }

</style>

<div class="links">
  <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 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 href="" target="_blank"></a>
  <div class="playButton1">
    <div class="initial1">Links</div>
    <svg class="pause1" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>
    <svg class="play1" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div>
</div>
</div>
<audio id="player1" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg"> </source>
</audio>

<script>
  (function iife() {
    "use strict";
    document.querySelector(".links").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".links").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".playButton1 .initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

#135

Yes ‘generally’ you would avoid fixed heights when the content is fluid but in this case you are dealing with an exact height for your elements so there will be no need to avoid the height as content will not exceed it

In the end you are just exchanging one technique for another to achieve the required effect and as others have said there is often more than one right way to do something as well as many wrong ways.

You need to listen to what’s been said and then understand what’s been said and then you can apply what’s been said in the right way. Just because something isn’t right for one situation doesn’t mean it’s wrong for all situations.


#136

I think I understand what you mean.

You mean that, because

These use fix heights:

.initial{
	height:168px;

.links a {
	float:left;
	width: 50px;
	height: 50px;

So then

This should also include a height too.

.links {
	width:266px;
	height:174px;

#137

A height will do no harm in this case because the children are explicitly sized but you don’t need to add height unless there is a need or reason.

I added a height so that I could negate the bottom margin on the last row of children but As others have pointed out you could do this in other ways. Both are right and both are different methods to achieve the same effect.

As we keep saying there many be a wrong way to do something just as there may be various correct ways to do something.

That’s the beauty and sometimes the mystery of CSS :slight_smile:


#138

For example. height isn't required here?
https://jsfiddle.net/uzdyz3z3/12/

 .playButtons {
    width: 266px;
    background-color: red;
    overflow: hidden;
  
  }

#139

Is this fine to do?

Leaving width off
https://jsfiddle.net/uzdyz3z3/14/

.playButton.svoefm {

  .playButton.cavoparadisoclub {

And adding it to:

  .playButton {
 
    float: left;
    width: 83px;
    height: 44px;
    cursor: pointer;
    background-color: transparent;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
  }

.playButton.svoefm {

    border-left: 3px solid #0059dd;
    fill: #aaff00;
  }
  
  .playButton.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
    fill: #ffaa00;
  }
  
  .playButton.cavoparadisoclub {
   
    border-right: 3px solid #0059dd;
    fill: #ff00aa;
  }

#140

Yes If they are both 83px wide then no need to repeat yourself. Just style the one that is different.


#141

I didn't mean to throw this thread into a tailspin with my comment about the height. That is why I made sure I used the term 'generally'. Thanks for catching that Paul and explaining how it was acceptable in this case. :slight_smile:

In light of the rwd and fluid design which is common practice these days I came up with a flexible version of asasass's code.

I am using the background image I posted earlier, but not as a bg image. I am using it as a scaling underlay image in the html. And likewise I am using the overlay image as a scaling html image.

Just wanted to throw a fluid version in this thread for what it's worth. :slight_smile:

asasass.zip (14.3 KB)

The zip contains the underlay grid image

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Audio Player with Scaling Images</title>
<style>
.links {
    width:50%;
    max-width:400px;
    position: relative;
    margin:0 auto;
    background:#000;
    cursor: pointer;
}
.links img {
    width:100%;
    height:auto;
    vertical-align:bottom;
}
.links a {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100%;
}
.initial1 {
    text-align: center;
}
    .initial1 img, .initial1 span {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
    .initial1 img {
        height:100%;
        box-sizing: border-box;
        border: 3px solid #0059dd;
    }
    .initial1 span {
        font-family: Tahoma;
        font-weight: bold;
        font-size: calc(14px + 1.5vw);
        color: #0059dd;
        top:18%;
        z-index:2;
    }
    .initial1::before, .initial1::after {
        content:"";
        position:absolute;z-index:1;
        top:0; left:33.3%; margin-left:-1.5px;
        width:3px; height:100%;
        background:#0059dd;
    }
    .initial1::after { left:66.6%;}

.playButton1.playing {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    box-shadow: inset 0 0 0 3px #0059dd;
    fill: #aaff00;
}

.links.hide a,
.play1 {display: none;}

</style>
</head>

<body>
<div class="links">
    <img src="bg.jpg" width="266" height="174" alt="">
    <a href="" target="_blank"></a>
    <div class="playButton1">
        <div class="initial1">
            <img src="https://i.imgur.com/BBYxKcf.jpg" width="260" height="168" alt="">
            <span>Links</span>
        </div>
        <svg class="pause1" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
          <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
        </svg>
        <svg class="play1" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
          <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
        </svg>
    </div>
</div>
<audio id="player1" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>

<script>
  (function iife() {
    "use strict";
    document.querySelector(".links").classList.add("hide");

    function playButtonClickHandler() {
      document.querySelector(".links").classList.remove("hide");
      var button = document.querySelector(".playButton1");
      var player = document.querySelector("#player1");
      document.querySelector(".playButton1 .initial1").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton1 .play1").style.display = "none";
        document.querySelector(".playButton1 .pause1").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton1 .play1").style.display = "inline-block";
        document.querySelector(".playButton1 .pause1").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", playButtonClickHandler);
  }());
</script>

</body>
</html>

OnClick transition effects, and understanding the markup code