Removing Negative Margin

I don’t understand this:
https://css-tricks.com/examples/nth-child-tester/

Bottom last row would be what?

It’s not very informative. It is better to learn how these pseudo-selectors count.

Now overflow is doing its job.

Here is what I came up with so you don’t need to use a new class

.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}

The new :nth-last-of-type() must proceed your :nth-of-type() in the cascade

Now you CAN remove the height from the parent and the code is doing what you want it to do.

Overflow:hidden is also doing it’s job.

Are you doing your job?

Your job is to actually read and learn all the links that people provide to you.

Did you read the float containment link I posted?

1 Like

This was all I needed to add:

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

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.

1 Like

That’s way more code than just this.

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

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>

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.

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

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.

2 Likes

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

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

2 Likes

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>
3 Likes

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.

2 Likes

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

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


<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>

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.

2 Likes

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;

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:

2 Likes