Horizontal nav bar

Forum Moderators: not2easy

Message Too Old, No Replies

Horizontal nav bar

border, padding and background-image

jake74

10:53 pm on Jul 8, 2011 (gmt 0)

So I have a horizontal nav bar and on mouseover, I'm showing pretty little graphics above and below the word.


.nav ul li a {
font-size:16px;
 text-decoration:none;
padding:25px 19px;
width:auto;
float:left;
text-align:center;
border-left:1px solid #363636;
 margin:10px 0;
}

.nav ul li a:hover, .nav ul li a.pageFlag{
 background: url("images/curli.png") no-repeat ;
 background-position: center;
}

The problem is that the border-left is also 50 or so pixels tall, and in the design spec it should be only the height of the text. If I shrink my top/bottom padding down, the border size looks good, but then I can't see my background image on mouseover.

How do I keep my images showing up while having a smaller border-left?
Thanks!

lucy24

1:35 am on Jul 9, 2011 (gmt 0)

Whew. Had to draw a picture to see what you're aiming at ;)

Quick-and-dirty answer: Padding is part of the object. The border runs along the entire object, just like a margin. There's no distinction between the border of the "real" part and the border that adjoins the padding. The w3c folks have all kinds of pretty pictures [w3.org] illustrating the point. (The ones in the "tables" chapter are actually prettier, but would be TMI.)

If you put the text inside a span, you can give it a border of its own which would only apply to the actual text, but this is iffy. Would the text ever overflow to a second line?

Paul_o_b

10:26 am on Jul 9, 2011 (gmt 0)

If I understand correctly you could apply the border to the list element and then drag the inner anchor outside to allow the background to extend outside. You would need to move other elements away to protect them a bit.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav {
margin:0;
padding:0;
list-style:none;
}
.nav li {
float:left;
border-left:1px solid #363636;
margin:20px 0;
}
.nav li a {
font-size:16px;
text-decoration:none;
padding:25px 19px;
float:left;
margin:-10px 0;
position:relative;
text-align:center;
}
.nav li a:hover, .nav li a.pageFlag {
background:red url("images/curli.png") no-repeat 50% 50%;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">test</a></li>
<li><a class="pageFlag"href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</body>
</html>

alt131

1:35 pm on Jul 9, 2011 (gmt 0)

Hi jake74, welcome to WebmasterWorld :) and thanks for providing a code sample so the issue was easy to see. Oh, and don't mind Lucy's jokes - she likes drawing pictures (~waves to Luce'~).

If you aren't familiar with the theory behind the provided link, every element is really a "box", so this is an issue with the box model. In summary, you want the element to be a certain height to get the shorter border effect required by the design spec, but at the same time want the element to be taller to accommodate the background image. As Lucy explained (and the picture at 8.1 of the recommendations shows), that's not possible on default properties alone because the box model for css means the border is drawn around the content plus padding. That is why, on your provided code, the border-left is "about 50px" because that's "about" the height of the 25+25 top and bottom padding.

That's also why both Paul and Lucy have suggested setting the border on another element rather than the link itself. As you already have a list, using the <li>st items avoids adding extra elements that have no semantic meaning just to achieve a design goal.

@Paul, the float on

.nav li a

means the <li> dimensions to <a>'s border edge. That reproduces the undesired taller border, so I'm wondering if that was an accidental cut/paste from the original code and should be deleted?

Paul_o_b

2:24 pm on Jul 9, 2011 (gmt 0)

Hi,

I misread the first post thought a 50px border was wanted but with the content still to overlap but I see that the border was meant to stay at about text height. :)

This can be done in the same way but just to match the negative margin to the top and bottom padding which will stop the border from expanding.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav {
margin:0;
padding:0;
list-style:none;
}
.nav li {
float:left;
margin:20px 0;
border-left:1px solid #363636;
line-height:1.0;
}
.nav li a {
font-size:16px;
text-decoration:none;
padding:15px 19px;
margin:-15px 0;
float:left;
position:relative;
text-align:center;
}
.nav li a:hover, .nav li a.pageFlag {
background:red url("images/curli.png") no-repeat 50% 50%;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">test</a></li>
<li><a class="pageFlag"href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</body>
</html>

Hopefully that's closer to what was wanted :)

alt131

11:59 am on Jul 13, 2011 (gmt 0)

Hi Paul, wasn't meant to be a test ;), and yet another nice piece of code - really like the elegance of line-height.

But can I ask why you chose to leave the float on the <a>'s? I'm asking as removing it meant the first solution worked as desired by the OP (with adjustments to padding/margins to achieve the desired proportions, of course). So I'd be interested in the thinking behind leaving it in for the second solution as well.

Paul_o_b

12:48 pm on Jul 13, 2011 (gmt 0)

No worries I like a challenge :)

I'm still stuck in IE6 mode and when I float a list element that contains one anchor then I always float the child anchor as well to avoid an IE6 bug. If the anchor is set to display:block and then also gets haslayout in some way (excluding width or float) then the anchor will display 100% the width of the screen as each anchor occupies one whole line. If you float the anchor as well then you avoid that bug from happening.

Also when dealing with inline elements vertical margins have no effect and although padding has an effect it does not affect the flow outside of the line-height (it just bleeds outside). Also background images on inline elements is undefined in the specs so its always better to have a block display when applying a positioned image.

If you remove the float from my example above you will see that the height of the red box extends to 49px rather than the 46px that it should be (16px + 15px + 15px).

The list element could have been set to display:inline of course if it wasn't being used to hold anchors but sometimes in IE6 that leaves you with an extra small gap so I always float them as well.

As usual with CSS there's probably loads of other ways to do the same things. I think that's the beauty of CSS :)

jake74

4:09 pm on Jul 13, 2011 (gmt 0)

I was able to accomplish it with using a background image on the <li> as the separator.

I don't even want to look at this site in IE6. I should run a browser check script and redirect all IE6 users to ie6countdown. Hehehe. [evil laugh].

I love this forum and thanks for your expertise!

alt131

10:54 am on Jul 14, 2011 (gmt 0)

@jake74 Yes, that's another way ... and now you've found us, don't forget to set your sticky preferences to notify when new posts are made to the forum - and join in :)

As usual with CSS there's probably loads of other ways to do the same things. I think that's the beauty of CSS

Exactly - which is why I believe the thoughts behind a possible solution are just as, if not more interesting than the code itself. Thanks for yet another careful explanation Paul.