PDA

View Full Version : Don't wrap?


Jim_Shady
09-21-2005, 02:25 PM
Hiya,

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;
text-decoration:none;
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 */
-->
</style>
<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>
</ul>
</div>
</div>

davidj
09-21-2005, 03: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

domedia
09-21-2005, 07: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.

Jim_Shady
09-21-2005, 08: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...

Shady.