HTMLHelp Forums > List positioning

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

lambneck

Oct 23 2008, 10:57 PM

Hello,
I am having a problem with my menu bar.
What is happening is that when the width of the browser
gets narrower than the width of all the list items in the menubar,
the last list items get dropped down to the line below.
Does anyone know how to keep this from happening?

CODE

#navbar{
margin:0;
padding:0;
line-height:43px;
background-image: url(../pix/perpetualGradient.jpg);
background-repeat: repeat-x;
}

#navbar li {
padding-top: 14px;
margin-left: 83px;
border-left: none;
display:inline;
font-size:14px;

}

#navbar li a {padding: 1em 0.2em;}

<ul id="navbar">
  <li id="postResume"><a href="postResume.php">Post Resume</a></li>
  <li id="viewJobs"><a href="viewJobs.php">View Jobs</a></li>
  <li id="viewResumes"><a href="chatRoom.php">View Resumes</a></li>
  <li id="chat"><a href="chat.html">Chat Room</a></li>
  <li id="forum"><a href="forums.php">Forum</a></li>
  <li id="help"><a href="help.php">Help</a></li>
</ul>

Christian J

Oct 24 2008, 04:24 AM

Where else could they end up if the window is narrow? Using an LI left margin of say 4% (instead of the current 83px) should make it less likely to happen, though.

lambneck

Oct 24 2008, 07:45 AM

QUOTE(Christian J @ Oct 24 2008, 04:24 AM)

Where else could they end up if the window is narrow? Using an LI left margin of say 4% (instead of the current 83px) should make it less likely to happen, though.

they would stay where they are and the window would have a scroll bar appear along the bottom.

Christian J

Oct 24 2008, 08:54 AM

Horizontal scrollbars are annoying for users, compared to that it's much better to let the menu wrap the way it's doing now.

See also http://htmlhelp.com/faq/html/design.html#screen-size

lambneck

Oct 24 2008, 10:20 PM

QUOTE(Christian J @ Oct 24 2008, 08:54 AM)

Horizontal scrollbars are annoying for users, compared to that it's much better to let the menu wrap the way it's doing now.

See also http://htmlhelp.com/faq/html/design.html#screen-size

I see your point but I honestly think 600px is an absurdity small amount of space to design a website around and if someone is going to use a browser window at that size then they should be prepared to put up with the annoyance of horizontal scrollbars.

Also with regards to my current problem the text in the menu bar is White and when it spills over out of the black background of the menu strip it disappears into the white background of the page below it.

Christian J

Oct 25 2008, 09:53 AM

QUOTE(lambneck @ Oct 25 2008, 05:20 AM)

I honestly think 600px is an absurdity small amount of space to design a website around

For me the code example menu wrapped below 900px, many users prefer to use such small windows even if their screens allow more.

QUOTE

and if someone is going to use a browser window at that size then they should be prepared to put up with the annoyance of horizontal scrollbars.

As a user I'd rather put up with the wrapped menu, then at least I wouldn't have to scroll.

QUOTE

Also with regards to my current problem the text in the menu bar is White and when it spills over out of the black background of the menu strip it disappears into the white background of the page below it.

Doesn't the height of ul#navbar expand when the links wrap?

As a side-note you may want to specify a backup BG-color in case the BG-image doesn't load:

CODE

#navbar{
background: #000 url(../pix/perpetualGradient.jpg) repeat-x;
}

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.