Another Horizontal Navigation Question(s)

@MontyVSep 28.2007

Ok been tweaking with this so bare with me. I know how do create a simple horizontal navigation. I know the basics of giving it padding to space it out and give it a background color and a:hover color. For the dandest reason I have a few problems.

1.) How to I get the whole navigation to line up on the right side instead of the left. (underscore represents blank space since for some reason spaces didn’t display properly on this forum)

Ex. | ______________ link1 link2 link3 | instead of
Ex. | link 1 link2 link3_______________ |

2.) My background color only covers the areas where the link actually is. So if I create the navigation the area with no links is white. How do I stretch it all out to say 800px? And no I don’t want the links to be spread across the whole page evenly. I still want the links to be on one side. Hope that makes sense.

3.) Instead of a color how can I use a image background and if so I would like to still stretch it out to the length of the page (800px) as mentioned in the above question.

Thanks for any help, tutorials and links anyone can provide.

to post a comment

CSS

8 Comments(s) _↴

@WebnerdSep 28.2007 — #We need your code please

@MontyVauthorSep 28.2007 — #Sorry I forgot.

[CODE]<ul id="navigation">
 <li><a href="#">Item one</a></li>
 <li><a href="#">Item two</a></li>
 <li><a href="#">Item three</a></li>
 <li><a href="#">Item four</a></li>
 <li><a href="#">Item five</a></li>
 </ul>
 [/CODE]

[CODE]#navigation {
 padding:0;
 margin:0;
 color:#fff;
 font-family: arial, helvetica, sans-serif;
 white-space:nowrap;
 list-style-type:none;
 }
 
 #navigation li {display:inline;}
 #navigation li a {
 padding:0.2em 25px;
 background:#fc6;
 color:#fff;
 text-decoration:none;
 float:left;
 border:none;
 }
 #navigation li a:hover {
 background:#08c;
 color:#fff;
 }
 [/CODE]

@WebJoelOct 01.2007 — #<ul id="navigation" [B]style="float:right;width:100%;"[/B]>

Causes the unordered list "navigation" to move to the far right,

and (if you want the list to be 100% width of page) :

#navigation li {display:inline;[B]float:right;[/B]}

makes list-items linde-up to the right, -albeit in reverse order. Re-structure your <li>s to count 'backwards'. (5,4,3,2,1) Otherwise, the left-to-right order will be the fifth, fourth, third, second and first links...

@MontyVauthorOct 03.2007 — #<ul id="navigation" [B]style="float:right;width:100%;"[/B]>

Causes the unordered list "navigation" to move to the far right,

and (if you want the list to be 100% width of page) :

#navigation li {display:inline;[B]float:right;[/B]}

makes list-items linde-up to the right, -albeit in reverse order. Re-structure your <li>s to count 'backwards'. (5,4,3,2,1) Otherwise, the left-to-right order will be the fifth, fourth, third, second and first links...[/QUOTE]

Ok Thank You. Now my navigation is is spilling over the page as opposed to staying aligned in the box. IE it displays fine but Firefox has it spilled over. Please help.

For example:

IE - |__________________link1 link2 link3 link4 link5 |

FF - |_________________ link1 link2 link3 link4 li | nk6

I was trying to post my whole page and stylesheet but I guess it's way too long. I hope this makes sense and is enough to figure it out.

[CODE]#navigation {
 height: 50px;
 width: 800px;
 background:url(images/NavBackground.jpg);
 background-repeat:no-repeat;
 margin-left:0;
 }
 
 #navigation ul {
 font-family:Verdana, Tahoma, Helvetica, Arial;
 font-size: small;
 color: #FFF;
 white-space: nowrap;
 }
 
 #navigation li {
 float:right;
 padding:15px 10px;
 list-style-type: none;
 display: inline;
 }
 
 #navigation li a {
 font-family:Verdana, Tahoma, Helvetica, Arial;
 text-decoration: none;
 color: #FFF;
 font-size:15px;
 }
 
 #navigation li a:link {
 color: #FFF;
 }
 
 #navigation li a:visited {
 color: #FFF;
 }
 
 #navigation li a:hover {
 color: #707070;
 background:none;
 }
 [/CODE]

[CODE]<ul id="navigation">
 <li><a href="#">Search</a></li>
 <li><a href="#">Hotel Sign Up</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Press</a></li>
 <li><a href="#">Know Us</a></li>
 </ul>
 
 [/CODE]

@KravvitzOct 03.2007 — #I don't see any overflow in FF1.x or 2.x on WinXP here.

@MontyVauthorOct 03.2007 — #I don't see any overflow in FF1.x or 2.x on WinXP here.[/QUOTE]

Ok just to show you I'm not crazy :rolleyes: see attached screenshot from Firefox 2.x. See how the word search is hanging off. Sorry I don't know what to call the problem but here it is.

[upl-file uuid=b3bf0cc0-db5a-4afa-8683-0fe0bd5f622a size=31kB]RLScreen-cropped.jpg[/upl-file]

@KravvitzOct 03.2007 — #I didn't say you were crazy. I just said that the code you posted doesn't seem to show the problem you're having. Evidently, the problem lies (at least partly) among code you haven't shown us.

@MontyVauthorOct 03.2007 — #I didn't say you were crazy. I just said that the code you posted doesn't seem to show the problem you're having. Evidently, the problem lies (at least partly) among code you haven't shown us.[/QUOTE]

Ok poor use of "smilies". I really do feel I'm going crazy here and not that people are calling me it. Anyways I just realized I can post .txt attachments instead of sticking the whole code on here.

[upl-file uuid=5368c100-9fd5-4bcc-9aa0-173fad50ad64 size=15kB]default.txt[/upl-file]

[upl-file uuid=57fcdaad-8e21-43cf-84ce-202e14cf1dd6 size=8kB]stylesheet.txt[/upl-file]

Also in #CSS _↴

Too much space, and centering issues Border-style doesn't show in Opera Sliding Doors technique "fix" for IE ??

Success!

Help @MontyV spread the word by sharing this article on Twitter...

Tweet This

Another Horizontal Navigation Question(s)

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Another Horizontal Navigation Question(s)

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴