By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,665 Members | 1,513 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,665 IT Pros & Developers. It's quick & easy.

Navigation buttons on my site

tharden3
100+
P: 916
I have a question for you guys, I'm designing a website. Before I go any further, I'd like to get my navigation bars on the left side up and running. The site is themed to a bumblebee 'black and yellow' color scheme with nectar and honey and all that jazz. It should actually look pretty sweet when it's all done, no pun intended ;)
What I was trying to do was have the colors on the nav bars invert when you hover over them. I tried achieving this without PHP and came very close. I guess I could set them as images, but that just wastes load time and space. I was able to achieve the invert effect just fine, but could not get the boxes of yellow and black around the text to be the same length and size. I want the boxes holding the text to be the same length so everything is nice and neat. At first, I made the table holding the bars have a background and the invert worked fine, but boxes weren't the same size. So instead of affecting the table data, i tried to make the links directly absolute. this messed up the table background and squeezed it on the side of my screen. So I made the background seperate and now I got the bars the same size, and color inverting, but the bars layer on top of one another. You will understand what I'm talking about when you put the code in a browser. I will post the CSS and the HTML that I used the first effort, then the CSS and HTML I used the second effort. Look at both, and you will understand what I am trying to do. Any tips? Advice?

1st attempt:

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="PN.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8; image/jpeg" />
<title></title>
</head>
<body>
<div class="all">

<p id="titleleft"></p>
<div id="navback">
<p></p>
</div>
<div class="navigation">
<table>
<tr>
<td id="r1" class="menu"><a href="http://www.htmldog.com" class="links1">Home</a></td>
</tr>
<tr>
<td id="r2" class="menu"><a href="http://www.htmldog.com" class="links1">Reviews</a></td>
</tr>
<tr>
<td id="r3" class="menu"><a href="http://www.htmldog.com" class="links1">Events</a></td>
</tr>
<tr>
<td id="r4" class="menu"><a href="http://www.htmldog.com" class="links1">Movies</a></td>
</tr>
<tr>
<td id="r5" class="menu"><a href="http://www.htmldog.com" class="links1">Games</a></td>
</tr>
<tr>
<td id="r6" class="menu"><a href="http://www.htmldog.com" class="links1">Music</a></td>
</tr>
<tr>
<td id="r7" class="menu"><a href="http://www.htmldog.com" class="links1">Contact Us</a></td>
</tr>
<tr>
<td id="r8" class="menu"><a href="http://www.htmldog.com" class="links1">About O.R.</a></td>
</tr>
</table>



</div>
</body>
</html>
[/HTML]
[HTML]
body{background-color: black;}
.all{width: 800px; height: 800px;}
#titleleft{z-index: -1; background-image: url(honeycomb.png); position: absolute; top: -8%; left: -8%; height: 400px; width: 500px;}
#navback{ position: absolute; top: 240px; width: 120px; height: 350px;background-color: #8b8b8b; padding: 2px; border: 1px white solid; z-index: -1;}
.navigation{position: absolute; top: 240px;}
.menu{}
.links1{ position: absolute; width: 100px; height: 20px;text-decoration: none; color: black; background-color: #eed821; text-decoration: none; font: bold .8em/1.1 arial; padding: 2px; margin-top: 50px;}
.links1:hover{color: #eed821; background-color: black;}
[/HTML]

2nd attempt:

[HTML]
<link rel="stylesheet" type="text/css" href="PN.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8; image/jpeg" />
<title></title>
</head>
<body>
<div class="all">

<p id="titleleft"></p>
<div class="navigation">
<table>
<tr>
<td id="r1" class="menu"><a href="http://www.htmldog.com" class="links1">Home</a></td>
</tr>
<tr>
<td id="r2" class="menu"><a href="http://www.htmldog.com" class="links1">Reviews</a></td>
</tr>
<tr>
<td id="r3" class="menu"><a href="http://www.htmldog.com" class="links1">Events</a></td>
</tr>
<tr>
<td id="r4" class="menu"><a href="http://www.htmldog.com" class="links1">Movies</a></td>
</tr>
<tr>
<td id="r5" class="menu"><a href="http://www.htmldog.com" class="links1">Games</a></td>
</tr>
<tr>
<td id="r6" class="menu"><a href="http://www.htmldog.com" class="links1">Music</a></td>
</tr>
<tr>
<td id="r7" class="menu"><a href="http://www.htmldog.com" class="links1">Contact Us</a></td>
</tr>
<tr>
<td id="r8" class="menu"><a href="http://www.htmldog.com" class="links1">About O.R.</a></td>
</tr>
</table>



</div>
</body>
</html>
[/HTML]

[HTML]
body{background-color: black;}
.all{width: 800px; height: 800px;}
#titleleft{z-index: -1; background-image: url(honeycomb.png); position: absolute; top: -8%; left: -8%; height: 400px; width: 500px;}
.navigation{position: absolute; top: 240px; width: 120px; height: 350px;background-color: #8b8b8b; padding: 2px; border: 1px white solid;}
.menu{}
.links1{ width: 100px; height: 20px;text-decoration: none; color: black; background-color: #eed821; text-decoration: none; font: bold .8em/1.1 arial; padding: 2px; margin-top: 50px;}
.links1:hover{color: #eed821; background-color: black;}
[/HTML]

If you run this code and see the differences it might be easier to understand what I am trying to achieve. If I was not clear enough, let me know and I will rewrite thing in english ;)
Aug 13 '08 #1
Share this Question
Share on Google+
2 Replies


Dormilich
Expert Mod 5K+
P: 8,639
solution: use display: block on the links (then you don't even need the table) otherwise you can't assign width, height, padding and margin (those work only for block level elements (like td, div, p))
Aug 24 '08 #2

tharden3
100+
P: 916
solution: use display: block on the links (then you don't even need the table) otherwise you can't assign width, height, padding and margin (those work only for block level elements (like td, div, p))
ok, thanks. I'll try that out.
Aug 24 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.