Bottom Border on List Header?

[MBM]

Bottom Border on List Header?

I’ve created a header block with a series of links. I want a border running at the bottom of the header block but when I to add it in #header-images li {

It places a border on the bottom of each element instead of the whole block of links.

            <header>
            <ul id="header-images">
            <li class="banner"><a href="link1.html"></a></li>
            <li class="facebook"><a href="link2.html"></a></li>
            <li class="twitter"><a href="link2.html"></a></li>
            </ul>
            </header>

            /*header block */
            #header-images li {
            display: block;
            float: left;
            border-bottom:4px solid #89171f;
            width:1320px;
            }

            #header-images li a {
            display: block;
            height:100px;
            }

            #header-images li.banner {
            background: url(../images/banner.png) no-repeat top center;
            background-size:100%;
            margin-top:0px;
            width:1000px;
            height:80px;
            }

            #header-images li.facebook {
            background: url(../images/facebook.png) no-repeat top center;
            background-size:80%;
            width:80px;
            height:80px;
            margin-left:1040px;
            margin-top:-70px;
            }

            #header-images li.twitter {
            background: url(../images/twitter.png) no-repeat top center;
            background-size:80%;
            width:80px;
            height:80px;
            margin-left:1160px;
            margin-top:-80px;
            }

[Paulie_D]

Codepen please.

[MBM]

http://codepen.io/MBM/pen/hdcFs

Also I cannot create a new topic. Is there a daily limit?!

[Paulie_D]

You’ve got some pretty wild margins in there considering you have floated the list items.

I removed all of those and put the border on the bottom of the ul instead.

Is this more like what you wanted: http://codepen.io/Paulie-D/pen/EygDG

If you need to move the social icons list items try adding a smidgen of margin-left.

Although there is nothing fundamentally wrong with using a list there, I probably wouldn’t have done it that way.

[MBM]

Thanks.

I have a banner that is 1000px wide so that’s why the margins are high.

And I still can’t create a new topic so…

I’ve had this problem for years and still haven’t been able to resolve it.

I want a background colour to display over link elements on mouse over but I want the hover to offset before the text. When I add a left padding or margin it pushes the link text to the right.

http://codepen.io/MBM/pen/dkuqI

[Paulie_D]

I have a banner that is 1000px wide so that’s why the margins are high.

But you don’t need them because you have used floats.

And I still can’t create a new topic

Have you tried scrolling to the bottom of the page here: https://css-tricks.com/forums/forum/css-combat/

and trying it there?

I want the hover to offset before the text.

I’m not sure what that means…offset what?

http://codepen.io/Paulie-D/pen/FAIDu

[MBM]

Yes but despite the floats for some reason it’s the only way I can get the code to work.

Your code is almost there. This is what I’m looking for :

http://mbmitservices.co.uk/hover2.png

I want to control the position of the hover, I want it to offset a few pixels before the text.

[Paulie_D]

Yes but despite the floats for some reason it’s the only way I can get the code to work.

Then something else is going on. If you continue to use margins of that size you will encounter problems later.

I want to control the position of the hover

The image helped: http://codepen.io/Paulie-D/pen/grnCv

Note this..

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul, li {
  margin: 0;
  padding: 0;
}

and this

#navigation li {
  margin-lefT:20px;
}

[MBM]

That didn’t seem to do anything for me. Looking at your two codepens you have moved the position of the text. I want to keep the text where it is but move the position of the hover, if possible.

[Paulie_D]

There is no such thing as “move the position of the hover” so I cannot get what it is you are trying to do.

[Paulie_D]

I’ve updated the most recent codepen to

#navigation li {
  margin: :20px;
}

If that doesn’t do it….I give up.

[MBM]

Got it. It’s a combination of the above and padding-left so for example

margin-left:-80px;
padding-left:120px;

makes the hover offset far to the left. The example below is just to illustrate :

http://codepen.io/MBM/pen/dkuqI

I was only looking for the hover to offset around 20 pixels to the left of the links so both padding and margin are set to 20px.

Thanks for the help.

[Author]

Posts