CSS Navigation Bar Problems. |
CSS Navigation Bar Problems. |
shinydarkrai94 |
Nov 25 2010, 12:24 AM
Post
#1
|
Group: Members Posts: 1 Joined: 25-November 10 Member No.: 13,232 |
Hi everyone. I'm new to Html and CSS programming. I'm having a bit of a problem with my website. Here's my current code:
<html> <head> <style type="text/css"> body { background-image:url('background.png'); background-repeat:no-repeat; background-position:0px 100px; } ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } a:link,a:visited { display:block; width:142px; font-weight:bold; color:dark blue; background-color:#D0D0D0; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#F0F0F0; } </style> <body style="overflow: hidden"> <img src="logo\logo.bmp" height="85"/> <div style="top: 100; left: -50; position: absolute; z-index: 1; visibility: show;"> <img src="project navigation\top.jpg" height="30" width="2000" /> </div> <div style="top: 100; left: 300; position: absolute; z-index: 1; visibility: show;"> <img src="project navigation\all.png" height="30" /> </div> <div style="top: 150; left: 350; position: absolute; z-index: 1; visibility: show;"> <img src="project pictures\transitional picture1.jpg"/ height="400" width="600"> </div> <ul> <div style="top: 150; left: 200; position: absolute; z-index: 1; visibility: show;"> <li class="sidemenu"><a href="home.html">Home</a></li> </div <div style="top: 200; left: 200; position: absolute; z-index: 1; visibility: show;"> <li><a href="aboutus.html">about us</a></li> </div <div style="top: 250; left: 200; position: absolute; z-index: 1; visibility: show;"> <li><a href="services.html">services</a></li> </div <div style="top: 300; left: 200; position: absolute; z-index: 1; visibility: show;"> <li><a href="projects.html">projects</a></li> </div <div style="top: 350; left: 200; position: absolute; z-index: 1; visibility: show;"> <li><a href="experience.html">experience</a></li> </div <div style="top: 400; left: 200; position: absolute; z-index: 1; visibility: show;"> <li><a href="contact.html">contact</a></li> </div </ul> <div style="top: 435; left: 195; position: absolute; z-index: 1; visibility: show;"> <img src="info\contact info.png" height="125" width="235"/> </div> </body> </html> This code works fine, my problem is that I want to add a second navigation bar at the top of the website. Basically, I have a side navigation bar that displays "Home", "About Us", "Services", etc and I have it set so that the background block is a grey color normally, unless the user moves the mouse over it, in which case it will turn white. I want to add a second navigation bar that has the text white normally unless the user moves the mouse over it, which would turn it dark grey. My problem is that I have it set so that all A:Link and all A:Visited are a certain color. I tried adding a ".sidemenu" after it, but it didn't appear to work. Can anybody think of a solution so that I can have 2 different navigation bars with different effects when the user moves their mouse over them? If anyone is confused by my code and my poor description of my problem, you can look at what the website looks like here: http://i986.photobucket.com/albums/ae349/s...screenshot3.jpg. Thanks for your time . |
stjepan |
Nov 25 2010, 03:45 PM
Post
#2
|
Serious Coder Group: Members Posts: 329 Joined: 15-October 06 From: zagreb, croatia Member No.: 445 |
Go here http://www.webcredible.co.uk/user-friendly...tion-menu.shtml and read "Displaying the menu items inline", you'll get the picture how to do it.
And please, change </div to </div> It looks better |
Lo-Fi Version | Time is now: 29th March 2024 - 04:57 AM |