Navigation Spacing:  ?

So on my navigation, i have horizontal links on top of the header background image. I put space between these links with margin-right:14px; but where my font is differeny sizes, the fonts do not always align in the center of the nav spaces. Its hard to explain, www.gamersinsaninty.com you can see how in my nav there are some links closer to the line that seperates each section than others. Before i was using an   to push half of the menu over (putting it before matches to push that over) and using margin-right:13px; and that worked alright, but i know your not supposed to use html code to style your site, is there anyway i can get them to space equally apart?

Ive tried putting a width on each li element, but they dont stretch that big unless they are set to display:blockl; and then it will be vertically listed.

Thanks for the help.

 

There are a few things you can do/try:

1. You can try to edit the image rather than applying a specific width or margin to every element, which is what I would recommend since it's easier/cleaner to apply the 14px margin to every list item.
2. You could set the list item anchors to display as block elements and set their widths individually (see code example below to get you started). I believe the anchors will only display as a block inside their respective LI sizes but try it out and fiddle with it.

li.menu a {
    display: block;
    height: 20px;
    }

li.menu a.home {
    width: 100px;
    margin-right: 14px;
    }

li.menu a.about{
    width: 100px;
    margin-right: 14px;
    }

Code (markup):

 

if i set them to display:block; they become a vertical list, which i stated above. i want them to be a horizontal list for navigation, i may edit the image, but i was just wondering if there was an easier way to edit the css.

 

In this case, I'd probably just go with a single image and serve that as your menu. Similar to how I did this mockup for Ethics over on SitePoint earlier this year: http://www.dan-schulz.com/for-others/ethics/template.html

Oh, and ditch the "index.php" from the link to your home page. Search engines will consider that to be a separate page, and most of the links pointing back to your home page from other sites will just use the domain name.

 

How would I go back to the index then? would I just do <a href="http://www.gamersinsaninty.com">Home</a> ?
If I use <a href="/">Home</a> when I go to my admin panel it just takes me back to http://www.gamersinsaninty.com/admin it takes me back to the directory I'm in.

Also, I looked at the source on that page, and I don't understand how I would go about doing that. It looks like its an image, but when you rollover certain parts, the span covers the image with black and places text over the black in the same position. But what does this do for accessibility (the reason I couldn't keep my pure image navigation)

 

Just put in the absolute URL link if it's causing your admin panel problems. As for the link I provided, it actually puts an empty SPAN above the link text and places a background image inside it. Depending on the state (default or hover) it'll slide part of the image out of the way to reveal another part (the hover state).

 

You can set them to either inline-block or simply blocks that carry the float: left property:

li.menu { float: left; width: 100px; }
li.menu a { display: block; height: 20px; }

Code (markup):

 

so that would make it so that the a's are 100px wide?

 

Too bad Firefox (up through version 2.x) doesn't support inline-block natively (you have to use their stupid hack to emulate it).

 

AH NO

I hate hacks. they dont validate and i like validating.

 

Tell me about it. I rarely use them - and when I do it's usually to include things like :hover on all elements (instead of anchors) in IE 5.x and 6, min/max-width, max-height, IE 6< PNG alpha transparency support, and things like that.

 

im just using

display:block;
float:right;

i still need to edit the image though, all the boxes arent the same size -.-

 

Well, if you're using the float property, then there's no need to use display: block; then.