PDA

View Full Version : Unnecesarry spacing in navigation



dosfive
Aug 12th, 2009, 11:05 PM
My header is a sliced image and for some reason there is some spacing in between the navigation buttons. They are minuscule, about 1-2px big, but that is not meant to happen.
Linky (http://www.dosfive.com/dosfive/top_nav.html)

Please help me with this issue.

noneforit
Aug 13th, 2009, 09:35 AM
You are using CSS to style the layout but then use a table for the nav menu.....not sure why you cant use CSS for this too??

The gap you are seeing between the nav menus is probably because you are using a table to layout each nav item.

You should use HTML lists and style accordingly, using display:block for the nav items...check out this:

http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

dosfive
Aug 13th, 2009, 05:00 PM
You are using CSS to style the layout but then use a table for the nav menu.....not sure why you cant use CSS for this too??

The gap you are seeing between the nav menus is probably because you are using a table to layout each nav item.

You should use HTML lists and style accordingly, using display:block for the nav items...check out this:

http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

Now if my navigation buttons are images, can i still use <li>? I was told by someone on this forum that it is a mistake for doing that. So what tag should i use for listing the nav buttons?

noneforit
Aug 13th, 2009, 05:24 PM
There could well be a reason why not but i dont know what it is. As long as your use display:block on each one then i dont see why it wouldnt work. As each image is a different size, you may need to set the width to auto for each of the list items

Rowsdower!
Aug 13th, 2009, 08:06 PM
This is a padding issue. In general it's a good idea to start out with this at the very TOP of your CSS file:


* {border:0;padding:0;margin:0;}

This is called a universal reset, and it makes all browser-dependent formatting reset to zero. One of the related elements has a default padding that was skewing the layout.

I won't chime in much regarding the menu other than to say that using tables rather than unordered lists for single-level (ie not drop-down) menus is a bit of a waste of time and code. I'd stick with the <li> and be sure to use alt text to help with accessibility.

While you're in there, get rid of all of the height="<whatever>" and width="<whatever>" stuff. This is what CSS is for and if you are simply using the native height and width of the image you can even skip the CSS for that.

Just my 2 cents! :thumbsup:

dosfive
Aug 14th, 2009, 02:07 AM
Thanks for the help guys. I fixed the spacing issue, but with the <li> the nav menu drops down and hides under the main div. I edited and tried multiple properties by using firebug and could not find a way to fix it. Could you help me with that

Rowsdower!
Aug 14th, 2009, 02:35 PM
Thanks for the help guys. I fixed the spacing issue, but with the <li> the nav menu drops down and hides under the main div. I edited and tried multiple properties by using firebug and could not find a way to fix it. Could you help me with that

You need to add a <ul> tag set around the <li> tags. Then make these CSS changes:


#nav1 {
/*delete all of your CSS for this ID*/
}

#logo-right {
/*float:left; comment this out */
position:absolute;
left:102px;
}

#nav1 ul {
/* display:none; comment this out */
height:28px;
padding-top:85px;
}

#sidebar {
background:transparent url(../images/columnbg.gif) repeat-y scroll 0 0;
float:left;
height:1006px;
margin-top:-1px;
text-align:center;
width:154px;
}

#rightbar {
background:transparent url(../images/columnbg.gif) repeat-y scroll 0 0;
float:right;
height:1006px;
margin-left:779px;
margin-top:-1px;
width:154px;
}


That should sort the top part out pretty well.

dosfive
Aug 14th, 2009, 09:20 PM
problem solved. I have been trying for 2 days on this. Rows thank you alot