...

View Full Version : Gah, css horizontal nav bar driving me crazy!



xlrustylx
05-08-2008, 02:58 AM
Hi there,

I'm trying to make a horizontal have bar for my site. The link is http://mensnaturalfitness.com/home.htm. I think I have most of the things covered, if you replace home.htm with nav.css in the address, you will find my code.

What I'm trying to accomplish is making the bar 25px high while the text stays centered vertically. I want the buttons to be a set width (say 75px) so I get a uniform look. Lets not forget the hover image, I need it to be 25px high also. I'm just having real trouble getting the dimensions to stick right, or even work at all.

Any help will be greatly appreciated, thanks.

maxvee8
05-08-2008, 03:44 AM
You want some thing like the code below?!, where there are backgound colours you want your images... im guessing you can take it from there?

test the page... more than happy to help if your not sure



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{padding:0; margin:0;}

ul#nav {list-style:none; width:700px; height:25px; background-color:#000033;}

ul#nav li{float:left; height:25px; width:70px; text-align:center; line-height:25px }

ul#nav li a{display:block; height:25px; width:70px; text-decoration:none;}

ul#nav li a:hover {background-color:#FFFFFF;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>
</head>

<body>
<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>

Lochlan
05-08-2008, 03:58 AM
To set the height of the <a> tag, it has be be display:block, inline elements won't let you set a height/width. Also set line-height:25px to get the text to center vertically.

xlrustylx
05-08-2008, 07:51 AM
Thanks, I didn't use exactly what you suggested, but it knocked me off the wrong tracks and I finally came out with something I'm happy with.

BTW, it may have been my computer, but I have having horrible margin issues with your code. Thought you may want to know if you use that in your sites.

effpeetee
05-08-2008, 05:24 PM
To set the height of the <a> tag, it has be be display:block, inline elements won't let you set a height/width. Also set line-height:25px to get the text to center vertically.
The following piece of code works and allows you to set the height and width.


<p><span><a href="82b.html"><img src="81a.jpg" alt=" " width="100" height="80" /><br />
Just a stranger in Paradise?</a></span></p>



Taken from :- http://exitfegs.co.uk/Picchoosec.html

Am I missing something here? Isn't 'span' inline?

Frank

effpeetee
05-08-2008, 06:38 PM
This is the wysiwyg page from my editor with css in the 'head' section.
I corrected one or two small errors.

http://exitfegs.co.uk/testfit.html

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum