Difficulties with CSS Horizontal Navbar

[norliss]

I've been trying to create a horizontal navpane via css but am experiencing difficulties in achieving the effect intended.

Ignore some of the finer points (colours, fonts etc because I'm at an early stage) but the general intended look of the navigation is here:

[link now dead]

However the actual effect I get in CSS is here:

[link now dead]

My main problem is that other than using artificial amounts of padding, I can't seem to get each list item to display the entire background image. Secondly although the a:hover works ok in Safari it doesn't in Camino/Firefox.

To be fair, I've messed about with the CSS a fair bit so I dare say there are a number of mistakes in there, but any help would be massively appreciated.

Thanks.

[Rob_D]

Couldn't find your stylesheet easily but I suspect that you may not have included display:block for your <a> tags,

If thaht's not te answer, please post your CSS code or a link to it.

[norliss]

Hi, and thanks for your reply. I've done that before but the list items then no longer display horizontally but vertically. The link to the CSS file is here:

[link now dead]

Many thanks for your help.

[markbrown4]

Hi,

Rob_D was correct, this should get you on your way.

#navbar ul li
{
	margin: 0;
	padding: 0;
}

#navbar li a:link, a:visited
{
	font-family: "Century Gothic", sans-serif;
	color: yellow;
	line-height: 1.5em;
	margin: 0;
	font-size: 1.30em;
	background: url(../images/tabs_h.gif) no-repeat 0 0;
        height: 65px;
	width: 118px;
        display: block;
        float: left
}

You want to make the a element a block shape, so that the whole button is clickable. Then you float each button left to make them line up horizontally.
You'll need to clear the following items to make it look like you want.
The li element itself is just for structure, you don't need to do anything with it's style.

Post again when you come across problems

[Paul O'B]

display: block;
float: left

Hi Mark, I know you know but i thought i'd point it out anyway that the display:block is unnecessary when you float an element because its display is automatically set via the float property so there is no need to specify display:block also.

(However as you know display:inline is a fix for the double margin bug in ie6 so that can be added to outer floats although it means nothing in the physical sense as the display of floats can't be changed at all.)

[norliss]

Many thanks. I've tried the float before and it works but then I get alignment issues with the navbar which I don't know how to solve:

[link now dead]

Also, I'm not sure why the rollover effect works in Safari but not in Firefox/Camino.

Thanks again.

[markbrown4]

Hi Paul,

Thanks, actually you give me too much credit I didn't know either of those things, so thanks jedi master..

But I do know how to center floated elements.. You had the right idea with margin: 0 auto; but to make that work it needs a width also.

#navbar
{
	margin: 0 auto;
	padding: 0;
        width: 600px;
}

#navbar ul
{
         float: left;
}


#navbar ul li
{
	margin: 0 auto;
	padding: 0;
        float: left;
}

#navbar li a:link, a:visited
{
	font-family: "Century Gothic", sans-serif;
	color: yellow;
	line-height: 1.5em;
	margin: 0 10px;
	font-size: 1.30em;
	background: url(../images/tabs_h.gif) no-repeat 0 0;
    height: 65px;
	width: 118px;
    float: left;
}

You have some really odd spacings/positioning on the other elements so the nav doesn't look centered but it actually is.

[norliss]

That works a treat, thanks a million Mark! I've given the navbar div a width of the same as the sum total of the 118px background images now it seems to have centred a beaut.

The only riddle that's got me now is why the a:hover works on Safari but not Firefox/Camino. Any ideas on this?

Thanks again.

[markbrown4]

The images work with these background-image-position values - kind of cool.. easy and flexible considering usually 3 states is what you want for rollover type images

#navbar li a
{
	font-family: "Century Gothic", sans-serif;
	color: yellow;
	line-height: 1.5em;
	margin: 0;
	font-size: 1.30em;
	background: url(../images/tabs_h.gif) no-repeat top left;
        height: 65px;
	width: 118px;
        float: left;
}

#navbar li a:hover
{
	font-family: "Century Gothic", sans-serif;
	color: yellow;
	text-align: center;
	line-height: 1.5em;
	margin: 0;
	height: 65px;
	width: 118px;
	font-size: 1.30em;
	background:  url(../images/tabs_h.gif) no-repeat top center;
    float: left;
}

#navbar li a:active
{
	font-family: "Century Gothic", sans-serif;
	color: yellow;
	text-align: center;
	line-height: 1.5em;
	margin: 0;
	height: 65px;
	width: 118px;
	font-size: 1.30em;
	background: url(../images/tabs_h.gif) no-repeat top right;
	float: left;
}

[norliss]

You've come up trumps again - thanks a million Mark.

I couldn't understand why my initial values worked in Safari but not Firefox/Camino but seeing as these work I'll stick to these types of values in future.

Thanks again, it's greatly appreciated.

[Paul O'B]

Remember to save on code as you only need to style the differences in the other states when you have define li a{}

#navbar li a
{
    font-family: "Century Gothic", sans-serif;
    color: yellow;
    line-height: 1.5em;
    margin: 0;
    font-size: 1.30em;
    background: url(../images/tabs_h.gif) no-repeat top left;
 height: 65px;
    width: 118px;
 float: left;
}

#navbar li a:hover
{
    text-align: center;
    background:  url(../images/tabs_h.gif) no-repeat top center;
}

#navbar li a:active
{
    text-align: center;
    background: url(../images/tabs_h.gif) no-repeat top right;
}

I'm not sure if that text-align:center is intended there

[markbrown4]

Firefox seemed to like negative values.. e.g. -118px, -236px; not sure..

If you post as often as I do, you're sure to get lucky once in a while

[Rob_D]

Hi Mark, I know you know but i thought i'd point it out anyway that the display:block is unnecessary when you float an element because its display is automatically set via the float property so there is no need to specify display:block also.

(However as you know display:inline is a fix for the double margin bug in ie6 so that can be added to outer floats although it means nothing in the physical sense as the display of floats can't be changed at all.)

Likewise, I didn't know either.

[Rob_D]

Interestingly, I just did a floated horizontal nav with no height specified for the <a> tags for text resizing purposes and found I had to add display:block otherwise they overlap when I resize the text upwards.

[Paul O'B]

Interestingly, I just did a floated horizontal nav with no height specified for the <a> tags

Hi Rob,

Could you provide the code or a demo of this as display:block on a float should have no effect at all. Are you sure the anchor was floated?

Not that I doubt you but if it does have an effect then that would be very interesting but I suspect something else is at play here

I'm always on the lookout for strange behaviors so an example would be appreciated

[Rob_D]

Hi Paul
Here are some examples I have put up.
Cheers
Rob

[Paul O'B]

Hi Rob,

Thanks for the demos and I can see where you are mistaken

#nav_with li a, #floated_nav_with li a  {
display:block;
}
#floated_nav_without li, #floated_nav_with li {
float:left;
}

The display:block has nothing to do with the floated list at all. The only element you are applying a float to is the list (li). The anchor is not floated at all.

However you will need to add display:block to the anchor to make it expand to fill the list completely (and so that widths can be applied as widths do not apply to inline elements). The 100&#37; width on the anchor is a hack for ie to make the whole area active when display:block is applied (the height:1% hack would have worked also in conjunction with display:block).

The above has nothing to do with wehther the floated list element has display:block applied to it or not. in your demo you have not applied display:block to the floated list at all.

Hope that makes sense

[Rob_D]

Thanks Paul. I'll look closer at this later.

[Rob_D]

Just had time to have at look at your explanation more closely and, yes, it makes sense!