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 ;)
