I am at the beginning of trying to make a nice animated nav bar but i've encountered 2 problems so far:

 

1. when I hover over the navbar my cursor doesn't change to the little hand icon.

2. when the animation starts it pushes all below it down - is there a way to fix so that it just overlaps?

 

How do I say I know sweet FA about most of what i'm doing here without sounding like a naught!?!

 

Any help greatly appreciated!

 

J

 

Here's the LINK

Hi jheg,

 

For point 1 use cursor:pointer in your CSS and for point 2, give the nav bar an id and then set it to position:absolute or position:fixed. This way it's effectively removed from the page and won't affect the rest of the layout.

 

Bear in mind you will have to set a new position for the items below as they will jump up when you make the changes to the nav bar.

Thanks husseycoding

 

Now I have changed the position to absolute I think it has stacked them on top of each other and I can only see the top red one - Is there a way to get them side by side again and is this what you meant by

Bear in mind you will have to set a new position for the items below as they will jump up when you make the changes to the nav bar.

 

thanks

Try this

 

<div id="nav">
<div class="topbox topbox-one">HOME</div>
<div class="topbox topbox-two">MORTGAGES</div>
<div class="topbox topbox-three">PROTECTION</div>
<div class="topbox topbox-four">PROPERTY</div>
<div class="topbox topbox-five">OTHER</div>
</div>

 

#nav{position:absolute;}

 

and add position:relative; to body css

^^ Not that we should advocate the use of divs for navigation

^^ Not that we should advocate the use of divs for navigation

 

Sorry

 

I was just trying to help him understand what husseycoding had advised

^^ Not that we should advocate the use of divs for navigation

 

soz dont get what ya mean...

... has something flown right over my head???

Thanks mteam it worked!! Now I'm worried I shouldn't be using divs for navigation. Why is this a problem and what's the alternative?

I don't see a problem with using a div for navigation?

well have I got this code right?

 

the HTML

<ul class="nav"><div class="topbox topbox-one"><li><a href="beta.html" >HOME</a></li></div>
	<div class="topbox topbox-two"><li><a href="contact.html" >MORTGAGES</a></li></div>
	<div class="topbox topbox-three"><li><a href="about.html" >PROTECTION</a></li></div>
	<div class="topbox topbox-four"><li><a href="literature.html" id="literaturelink">PROPERTY</a>  </li></div>
	<div class="topbox topbox-five"><li><a href="research.html">OTHER</a></li></div>
</ul>

 

the CSS

.topbox	{ 
	width: 200px; 
	height: 20px;
	background: #eee;
	float: left;
	font:verdana;
	font-size:14px;
	text-align:center;
	color:white;
	cursor:pointer;

	}

.topbox-one 	{ background: #212122; }
.topbox-two	{ background: #75801e; }
.topbox-three 	{ background: #c7de1a; }
.topbox-four 	{ background: #c77a29; }
.topbox-five 	{ background: #c51638; }

ul.nav{
list-style-type:none;
font-size:12px;
text-align:center;	
position:absolute;

}
ul.nav li{
display:inline;
}
ul.nav a{
color:white;
text-decoration:none;

}

 

No div but still works?

You dont need the divs just use the list

 

<ul class="nav"><li class="topbox topbox-one"><a href="beta.html" >HOME</a></li> 
               <li class="topbox topbox-two"><a href="contact.html" >MORTGAGES</a></li>
               <li class="topbox topbox-three"><a href="about.html" >PROTECTION</a></li> 
               <li class="topbox topbox-four"><a href="literature.html" id="literaturelink">PROPERTY</a></li>
               <li class="topbox topbox-five"><a href="research.html">OTHER</a></li> 
</ul>

thanks again mteam.

 

It looks a bit odd at the moment I know but i'm really just trying to get an idea as to how certain things work. Why do my drop downs not appear over the images below? See here

You need to add a higher z-index to ul.nav

 

try z-index:1000;

 

ul.nav {
font-size:12px;
list-style-type:none;
position:absolute;
text-align:center;
z-index:1000;
}

LEGEND! HA ha what did that do (technically i mean)

Z-index is like a stack so z-index:1 is below z-index:2

 

if you have a look at here it will explain better than I can

perfect thanks worked like a dream! Final question i promise

 

see my banner at the top of the page what if I wanted to keep the banner in the same place but wanted to extend to the edge of the screen the gray color in line with the banner itself. Can this be done?

 

I tried to change the body from width:1000px; to width:100%; background-color:gray; but although that gave me 100% width it shifted the main content to the left.

 

I also tried to use a wrapper just after the <div id="header"></div> but this didn't work either.