View Full Version : Don't wrap?

09-21-2005, 01:25 PM

I've got the following library item which I use on my pages, however some people have complained that it doesn't display well on lower resolutions of monitors. (See attached GIF).

What I think I need to do is tell the list to not wrap? Can someone please let me know what changes I need to make to the code?

Cheers - Shady

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* BEGIN style6 */
#navlist ul
margin: 10px 10px 10px 10px;
white-space: nowrap;
font: Verdana, Arial, Helvetica, sans-serif;

#navlist li
font: Verdana;
display: inline;
list-style-type: none;

#navlist a {
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 20px 20px 20px 20px;}
#navlist a:link, #navlist a:visited
color: #fff;
background-color: #036;
font-family:Verdana, Arial, Helvetica, sans-serif;

#navlist a:hover
color: #fff;
background-color: #369;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
body,td,th {
font-family:Verdana, Arial, Helvetica, sans-serif;

/* END style6 */
<title>StaffNavigationBar</title><div id="navcontainer">
<div align="center">
<ul id="navlist">
<li><a href="../Staff/Staff_My_Courses.asp" title="My Courses">My Courses</a></li>
<li><a href="../Staff/StaffMyTimetableByMonth_details.asp" title="My Timetable">My Timetables</a></li>
<li><a href="../Staff/Staff_My_Modules.asp" title="My Modules">My Modules</a></li>
<li><a href="../Staff/Staff_My_tutorials.asp" title="My Tutorials">My Tutorials</a></li>
<li><a href="../Staff/Staff_My_Supervision.asp" title="My Supervision">My Supervision</a></li>

09-21-2005, 02:56 PM
i thought HTML controlled elements like a list would wrap

can you not use <div>'s instead of <li>'s

Your other option is to make your site 800x600 friendly

09-21-2005, 06:47 PM
Where do you want the content to go when there's not enough space for it?
The browser does the correct thing and starts a new line when the first line is filled.

09-21-2005, 07:24 PM
Hey there..

Well I want it to start a new line with the next button - but I just don't want it to cover up one of the buttons on the row above (see GIF).

Alternatively I wouldn't mind it too much if they stayed in line, and it forced the browser to add a horizontal scroll bar in the window? That's a bad option though...