Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Driving me nuts for a nav bar

Status
Not open for further replies.
SPYDERIX

SPYDERIX

Technical User
Jan 11, 2002
1,899
CA
This is so stupid, I bet the fix is very easy. I have a nav bar that's 770px wide by 40px high and want the links centered both vertically and horizontally in the table cell. That part is simple. What I can't get is the CSS hover to use an image and extend the full 40px height and still stay centered and vertically aligned.

My css:
Code: 
#nav
	{
	margin: 0px;
	padding: 0px;
	height: 40px;
	background-image: url('/images/nav_bg.gif');
	background-repeat: repeat-x;
	}
#nav a:active, #nav a:link, #nav a:visited
	{
	height: 40px;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;    
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	padding: 0px 12px 0px 12px;
	}
#nav a:hover
	{
	height: 40px;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;    
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	padding: 0px 12px 0px 12px;
	background: #ccff00;
	background-image: url('/images/nav_hover.gif');
	background-repeat: repeat-x;
	}

My HTML
Code: 
		<table border="0" cellpadding="0" cellspacing="0" width="770">
			<tr>
			<td>
			<a href="/"><img src="/images/banner.jpg" width="770" height="135" alt="" border="0"></a></td>
			</tr>

			<tr>
			<td id="nav" align="center" valign="middle">
			<a href="">Home</a>
			<a href="">Design</a>
			<a href="">Hosting</a>
			<a href="">Domains</a>
			<a href="">Contact Us</a></td>
			</tr>
		</table>

What am I missing here? I have tried turning the A into a display: block but that just fubars everything (unless I have done it incorrectly). Keep in mind those are only a few links so I can't do any width settings for the <a>'s.

TIA

NATE


Got a question? Search G O O G L E first.
 
Sort by date Sort by votes
Change [tt]height: 40px;[/tt] to [tt]line-height: 40px;[/tt] on your anchor declaration (#nav a). In addition to that, I suggest you use correct order to define the pseudo classes on a link :)link, :visited, :hover, :active) and skip all the declarations that stay the same (e.g. for :hover only specify the background, that is actually changing and you can omit :visited and :active since they're the same as link).

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
It's staying vertically aligned now but the background image isn't stretching the full 40px high. IE doesn't even show it at all. Any other suggestions.

NATE


Got a question? Search G O O G L E first.
 
Upvote 0 Downvote
After many hours battling with this I finally have it. Here is my solution using an <li>

Code: 
<html>
<head>
<title>test</title>
<style type="text/css">
body
	{
	background: #003366;
	}
#nav
	{
	background-image: url('/images/nav_bg.gif');
	}
#nav ul
	{
	width: 757px;
	padding: 0px;
	margin: 0px;
	list-style: none;
	height: 40px;
	background-image: url('/images/nav_bg.gif');
	}
#nav ul li
	{
	float: left;
	margin: 0px;
	padding: 0px;
	}
#nav ul li a
	{
	display: block;
	float: left;
	height: 40px;
	line-height: 40px;
	color: #ffffff;
	text-decoration: none;
	font-size: 13px;
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
	padding: 0px 14px 0px 14px;
	}
#nav ul li a:hover
	{
	background-image: url('/images/nav_hover.gif');
	background-repeat: repeat-x;
	}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="770">
	<tr>
	<td align="center" id="nav">
	<ul>
			<li><a href="">Home</a></li>
			<li><a href="">Design</a></li>
			<li><a href="">Hosting</a></li>
			<li><a href="">Domains</a></li>
			<li><a href="">Contact Us</a></li>
	</ul></td>
	</tr>
</table>
</body>
</html>

NATE


Got a question? Search G O O G L E first.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
201
Alt255
Alt255
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
747
pmonett
pmonett
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
701
3esolar
3
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
599
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top