The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS Navigation Bar Problems.
shinydarkrai94
post 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 smile.gif.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
stjepan
post 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 smile.gif



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 04:57 AM