HTML->CSS Navigation Help!!!!?

  • Thread starter Thread starter Naomi
  • Start date Start date
N

Naomi

Guest
OK, I take a computer class and for homework about two weeks ago, we were asked to make a simple website using HTML... but me, i had to go all out and add photoshop made buttons, etc...
Now we have to create our same website but using CSS.
Please, help! It's due by the end of the day.
Here's the code for the navigation bar:
<a href="home.html"><img src="HOME NAVI.bmp" border="0" width="100" height="50"></a>
<a href="movies.html"><img src="MOVIES NAVI.bmp" border="0" width="100" height="50"></a>
<a href="sports.html"><img src="SPORTS NAVI.bmp" border="0" width="100" height="50"></a>
<a href="concerts.html"><img src="CONCERTS NAVI.bmp" border="0" width="100" height="50"></a>
<a href="contactus.html"><img src="CONTACT_US NAVI.bmp" border="0" width="100" height="50"></a>

If any additional help is needed, please ask.
Thanks in advance
... Now what do I do?
Liars never lie,

so does that go into the external file?
 
<a></href="home.html"><img src="HOME NAVI.bmp"border="0" width="100" height="50"></a>
<a></href="movies.html"><img src="MOVIES NAVI.bmp"border="0" width="100" height="50"></a>
<a></href="sports.html"><img src="SPORTS NAVI.bmp"border="0" width="100" height="50"></a>
<a></href="concerts.html"><img src="CONCERTS NAVI.bmp" border="0" width="100" height="50"></a>
<a></href="contactus.html"><img src="CONTACT_US NAVI.bmp" border="0" width="100" height="50"></a>
 
<a></href="home.html"><img src="HOME NAVI.bmp"border="0" width="100" height="50"></a>
<a></href="movies.html"><img src="MOVIES NAVI.bmp"border="0" width="100" height="50"></a>
<a></href="sports.html"><img src="SPORTS NAVI.bmp"border="0" width="100" height="50"></a>
<a></href="concerts.html"><img src="CONCERTS NAVI.bmp" border="0" width="100" height="50"></a>
<a></href="contactus.html"><img src="CONTACT_US NAVI.bmp" border="0" width="100" height="50"></a>
 
A CSS navigation bar typically look like this (this is a very basic pure CSS navbar):

<ul id="navbar">
<li><a href="home.html">Home</a></li>
<li><a href="movie.html">Movie</a></li>
<li><a href="sports.html">Sport</a></li>
<li><a href="concert.html">Concert</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

And you'll use a CSS to set the background image, probably reflowing (for horizontal navigation bar), removing the list appendages (the huge dot), probably implementing a sliding door technique for some fancy effect (google "sliding door navigation")

#navbar li {
background: url(image/navback.bmp);
display: block;
height: 50px;
width: 100px;
float: left;
}
 
Back
Top