Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Jul 2005
    Posts
    77
    Member #
    10681
    Hi all,

    [URL REMOVED]

    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:
    Code:
    			<!-- 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>


    ...and the CSS looks like this:

    Code:
    #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;
    }

    Any ideas?

    Thanks so much in advance...

    Neil

  2.  

  3. #2
    Member
    Join Date
    Jul 2005
    Posts
    77
    Member #
    10681
    In case that's not clear, I'm after something like this

    Thanks again!

  4. #3
    Member
    Join Date
    Jul 2005
    Posts
    77
    Member #
    10681
    Thanks anyway but I've found a solution...

    What I did was change the margin in #nav li to spread them out a bit like this...

    Code:
    #nav li {
    display:inline;
    float:left;
    margin:0 6px;
    position:relative;
    }
    ... and then I used a different seperate CSS file for each language. The main thing is it works!

    Thanks!
    Neil


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:09 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com