SRL Archive - Web Development

Well, I'm redesigning my school club's website, and I'm making a nav bar. It has rollover drop-down buttons (which… don't work yet :P) and a background in the same style.

I want the nav bar to stretch across the entire page, but there is always a little margin on the left and right of the element. I have used left: -10; to move it, but then the margin on the right grows larger, and I can't make it stretch all the way. Also, the buttons on the navbar are no longer aligned in the center.

What am I to do? =P

{ display: block; }

amirite?

What is that used with?

right now, I'm using this:

div#nav
{
height: 30px;
width: 100%;
background-image: url(images/nav_bg.jpg);
}

And inside the div is:

ul#nav
{
margin: auto;
padding: 0px;
list-style-type: none;
width: 800px;
height: 30px;
}

And of course, the navbar is that unordered list.

A bit rusty on CSS, but I'm pretty sure either:

div#nav
{
height: 30px;
float: left;
width: 100%;
background-image: url(images/nav_bg.jpg);
} 

Or

div#nav
{
margin: 0 0 0 0;
height: 30px;
width: 100%;
background-image: url(images/nav_bg.jpg);
} 

Alright, I got it to work (was just playing around a bit).

Now… I have a problem ;)

The text in an anchor tag doesn't show up in the drop-down nav.

If someone could help me out, that'd be great!

CSS File

body 
{
	background-color: white;
	background-image: url(images/background.png);
	background-position: center center;
	margin: 0 auto;
	width: 900px;
	border: 5px solid black;
}

div#banner
{
	width: 100%;
	height: 125px;
	background-color: black;
}

div#nav
{
	height: 30px;
	width: 100%;
	background-image: url(images/nav_bg.jpg);
}

div#main 
{
	background-color: white;
}

table
{
	background-color: white;
}

ul#nav
{
	display: block;
	margin: 0 auto;
	padding: 0px;
	list-style-type: none;
	width: 806px;
	height: 30px;
}

ul#nav li
{
	float: left;
	position: relative;
	border-left: 1px solid black;
}

ul#nav li a
{
	display: block;
	width: 160px;
	height: 30px;
	text-indent: -9999px;	
}

ul#nav li:hover ul,ul#nav a:hover ul
{
	visibility: visible;
}

ul#nav li a.home
{
	background: url(images/navbar/navbar_01.gif) no-repeat 0 -30px;
}

ul#nav li a.home:hover
{
	background-position: 0 0;
}

ul#nav li a.info
{
	background: url(images/navbar/navbar_02.gif) no-repeat 0 -30px;
}

ul#nav li a.info:hover
{
	background-position: 0 0;
}

ul#nav li a.events
{
	background: url(images/navbar/navbar_03.gif) no-repeat 0 -30px;
}

ul#nav li a.events:hover
{
	background-position: 0 0;
}

ul#nav li a.media
{
	background: url(images/navbar/navbar_04.gif) no-repeat 0 -30px;
}

ul#nav li a.media:hover
{
	background-position: 0 0;
}

ul#nav li a.forums
{
	background: url(images/navbar/navbar_05.gif) no-repeat 0 -30px;
}

ul#nav li a.forums:hover
{
	background-position: 0 0;
}

ul#nav li ul
{
	visibility: hidden;
	position: absolute;
	height: 0;
	left: -41px;
	width: 160px;
	list-style-type: none;
}

ul#nav li ul li
{
	background-color: #8DB6D0;
	font-family: verdana,arial,helvetica,sans-serif;
	color: black;
	text-align: center;
	height: auto;
	width: 100%;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

ul#nav li ul li a
{
	color: white;
}

ul#nav li ul li:hover,ul#nav li ul a:hover
{
	color: white;
	background-color: black;
}

body,p,h1,h2,h3,table,td,th,ul,ol
{
	font-family: verdana,arial,helvetica,sans-serif;
}

h1
{
	color: white;
	text-align: center;
	margin: 0px;
	text-decoration: underline;
	font-size: 25px;
	font-weight: bold;
}

h2,h3
{
	text-indent: 20px;
	text-decoration: underline;
	font-size: 25px;
	font-weight: bold;
	color: #0F3E9A;
}

p
{
	color: black;
	font-size: 14px;
}

HTML File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title>West Broward NHS - Home</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
	<!-- Banner -->
	<div id="banner" class="header">
	  <h1>BANNER</h1>
	</div>
	<!-- Buttons -->
	<div id="nav">
	  <ul id="nav">
		<li>
		  <a class="home" href="#" title="Home">Home</a>
		</li>
		<li>
		  <a class="info" href="#" title="Info">Info <!-- About Us, Contact Us, Requirements --> </a>
		  <ul>
		    <li><a href="/about.html" title="About Us">About Us</a></li>
			<li><a href="/contact.html" title="Contact Us">Contact Us<!--</a>--></li>
			<li style="border-bottom: 1px solid black;"><a href="/requirements.html" title="Requirements">Requirements</a</li>
		  </ul>
		</li>
		<li>
		  <a class="events" href="#" title="Events">Events <!-- Project List, Social Events, Calendar --> </a>
		  <ul>
		    <li><a href="/projects.html" title="Project List">Project List</a></li>
			<li><a href="/socialevents.html" title="Social Events">Social Events</a></li>
			<li style="border-bottom: 1px solid black;"><a href="/calendar.html" title="Calendar">Calendar</a></li>
		  </ul>
		</li>
		<li>
		  <a class="media" href="#" title="media">Media <!-- Photos, Related Links --> </a>
		  <ul>
		    <li><a href="/photos.html" title="Photos">Photos</a></li>
			<li style="border-bottom: 1px solid black;"><a href="/related.html" title="Related Links">Related Links</a></li>
		  </ul>
		</li>
		<li style="border-right: 1px solid black;">
		  <a class="forums" href="#" title="Forums">Forums</a>
		</li>
	  </ul>
	</div>
	<!-- Main -->
	<div id="main">
	  <h2>Home</h2>
		<p>Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... Welcome to the West Broward High School National Honor Society! I hope you enjoy your stay. And remember... 
		</p>
	</div>
  </body>
  <!-- Possible Colors
	#8EB6D0 - Carolina Blue
	#828283 - "Silver"
	#4D81B1 - Darker Blue 
	#FFFFFF - White
	#669999 - Teal
	#BFD4E8 - Lighter Blue
	#333333 - Black
     --> 
</html>

Found the problem:

ul#nav li a
{
	display: block;
	width: 160px;
	height: 30px;
	text-indent: -9999px;
}

All the text is pushed off the page because of the text-indent: -9999px;
Remove that line and you can see the text.

Edit: You will also be able to see the text in the drop down boxes too.
Edit2: Sorry for the major gravedig.. I just noticed the date. In my defence the forum thread was quite high on the first page of the Web Development forum!