Problem with menu positioning (inline list)

Hi all,

http://www.filmfestival15.com/2010redo/

Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site.

So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right?

The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language.

The html looks like this:

			<!-- main navigation -->
			<ul id="nav">
				<li class="home">
					<a href="index.htm"><span>Home</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="message-from-director.htm">Message From Director</a></li>
							<li><a href="what-is-15-15.htm">What is 15/15?</a></li>
							<li><a href="festival-history.htm">Festival History</a></li>
							<li><a href="judges-special-guests.htm">Judges &amp; Special Guests</a></li>
						</ul>
					</div><a href="#"><span>About 15/15</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="register-now.php">Register Now</a></li>
							<li><a href="get-ready.htm">Get Ready</a></li>
							<li><a href="conditions-of-entry.htm">Conditions of Entry</a></li>
							<li><a href="faq.htm">FAQ</a></li>
						</ul>
					</div><a href="#"><span>How To Enter</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="screening-information.htm">Screening Information</a></li>
							<li><a href="nominations.htm">2009 Nominations</a></li>
						</ul>
					</div><a href="#"><span>Programme</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="films.htm">Films</a></li>
							<li><a href="festival-trailers.htm">Festival Trailers</a></li>						
						</ul>
					</div><a href="#"><span>Archives</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li>
						</ul>
					</div><a href="#"><span>Sponsors</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="press-releases.htm">Press Releases</a></li>
							<li><a href="images.htm">Images</a></li>
						</ul>
					</div><a href="#"><span>Newsroom</span></a>
				</li>
					<li class="contact">
					<div>
						<ul>
							<li><a href="contact-us.php">Contact Us</a></li>
							<li><a href="15-15-committee.htm">15/15 Committee</a></li>
						</ul>
					</div><a href="#"><span>Contact</span></a>
				</li>
			</ul>

Code (markup):

...and the CSS looks like this:

#nav {
	font-size: 15px;
	line-height: 20px;
	list-style: none;
	padding: 0;
	position: absolute;
	top: 250px;
	left:-5px;
	width: 750px;
}
#nav li {
	display: inline;
	float: left;
	margin: 0 0 0 0px;
	position: relative;
}
#nav a {
	color: #000;
	float: left;
	text-decoration: none;
}
#nav a span {
	cursor: pointer;
	float: left;
	display: inline;
	font-weight: bold;
	line-height: 30px;
	padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
	background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
	background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
	background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
	left: auto;
	right: 0;
}
* html #nav .contact div {
	right: -1px;
}
#nav div {
	background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
	display: none;
	left: 0;
	padding: 5px 0 0;
	position: absolute;
	top: 30px;
	width: 168px;
	z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
	display: block;
}
#nav div ul {
	background: url(../img/bg-b.gif) no-repeat 0 100%;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0 0 5px;
	text-transform: none;
	width: 168px;
}
#nav div ul li {
	margin: 0;
	padding: 0;
	width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
	background: none;
	color: #000;
	display: block;
	line-height: 30px;
	padding: 0 0 0 9px;
	width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
	background: #D9581F;
}

Code (markup):

Any ideas?

Thanks so much in advance...

Neil

 

In case that's not clear, I'm after something like this... http://filmfestival15.com/2010redo/15.jpg

Thanks again!

 

For the Nav menu to spread over to the right set the margin for each li items (currently margin is set 0)

#nav li {
display:inline;
float:left;
margin:0 6px;
position:relative;
}

For a multilingual site you can use different CSS for each country to control (the especially the text related), normally a master CSS used for the layout and and country related fixes in a different css which is import depending upon the country chosen by the user.

 

Thanks so much radiant... That worked a treat!

 

By the way, is there a way to edit my initial post? I wouldn't mind removing the domain name so this doesn't appear in Google...