PDA

View Full Version : Unordered List Overflow



neh
Feb 22nd, 2010, 05:01 AM
When the view port width is reduced, the unordered list overflows past the right float:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<!-- Internal stylesheet for reference -->
<style type="text/css">
* {padding:0;margin:0;}
body {background:#3e3e3e;}
ul {list-style-type:none;text-align:center;white-space:nowrap;}
li {display:inline;font-size:3em;padding:0 10px;}
#wrapper {margin:10px 35px 0;}
#ubl {width:5px;height:49px;float:left;}
#ubr {width:5px;height:49px;float:right;}
#ubc {height:49px;background:url('http://localhost/agr/ubc-xr.png') repeat-x;}
</style>
</head>
<body>
<div id="wrapper">
<img id="ubl" src="http://localhost/agr/ub-l.png" />
<img id="ubr" src="http://localhost/agr/ub-r.png" />
<ul id="ubc">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul><!-- #ubc -->
</div><!-- #wrapper -->
</body>
</html>
The unordered list cannot wrap because it is a navigation bar, and the layout must be fluid. How do I fix this semantically (i.e. not using tables or display:table)? I've tried several methods and haven't been able to come up with anything. :confused:

Excavator
Feb 22nd, 2010, 09:13 AM
When the view port width is reduced, the unordered list overflows past the right float:
/...
The unordered list cannot wrap because it is a navigation bar, and the layout must be fluid. How do I fix this semantically (i.e. not using tables or display:table)? I've tried several methods and haven't been able to come up with anything. :confused:

Hello neh,
I'm not sure where it's supposed to go then. It can't wrap and can't overflow, where did you see it going?
A min-width will stop it from dropping and overflowing but it's going to give you an X scroll...
Have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
* {padding:0;margin:0;}
body {background:#3e3e3e;}
#wrapper {
min-width: 792px;
margin:10px 35px 0;
}
#ubl {width:5px;height:49px;float:left;}
#ubr {width:5px;height:49px;float:right;}
ul#ubc {
height:49px;
margin: 0 5px;
background: #ccc url('http://localhost/agr/ubc-xr.png') repeat-x;
list-style-type:none;
text-align:center;
}
li {display:inline;font-size:3em;padding:0 10px;}
</style>
</head>
<body>
<div id="wrapper">
<img id="ubl" src="http://localhost/agr/ub-l.png" />
<img id="ubr" src="http://localhost/agr/ub-r.png" />
<ul id="ubc">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul><!-- #ubc -->
</div><!-- #wrapper -->
</body>
</html>

neh
Feb 22nd, 2010, 09:57 AM
Hi Excavator, thank you for your response :)

An x-scroll (across the entire view port) is exactly what I want; just how a table-cell would behave if white-space:nowrap were applied to it.

I've thought about min-width but it doesn't serve my purpose for a couple reasons:

a) I'm using relative font size which means the width of content can vary depending on browser stylesheet
b) the menu items character length vary depending on certain PHP conditions

So you see, I can't rely on min-width to accurately gauge how much content there will be. If I add, for example, a couple more items to the UL, your code no longer works. Or if I used a mobile browser that had a unique browser stylesheet, the 3em may be either too large or small.

I appreciate and thank you for the late night (at least where I am :p) response, but surely there must be another method? I'll continue researching this, but so far no luck. I'd prefer not having to resort to unsemantic code.

neh
Feb 22nd, 2010, 10:17 PM
Still stumped. :/

I hosted it for people to better see what I'm talking about:
http://htreplays.com/list/

Shrink the view port and you'll see what I mean.

Excavator
Feb 22nd, 2010, 10:29 PM
Perfect situation for min-width. If you don't tell it to stop collapsing with the browser resize, what else is it to do?
#wrapper {min-width:900px;margin:10px 35px 0;}

neh
Feb 22nd, 2010, 10:40 PM
Perfect situation for min-width. If you don't tell it to stop collapsing with the browser resize, what else is it to do?
#wrapper {min-width:900px;margin:10px 35px 0;}
With min-width, the container doesn't negatively scale with the content, which is one of the advantages of a fluid layout; it's scalable. What if I had a situation where I had only two items? The container would still stretch to 900px.

If I wanted to use min-width, I might as well create a fixed width layout and be done with the headaches that accompany fluid design. Do you see what I mean? :o

Excavator
Feb 23rd, 2010, 12:55 AM
Hmm, I'm being dense. A fixed width layout is totally different from a fluid width layout that uses a min-width.

Have you seen a menu that behaves like you're wanting? I'd like to see it if you could pass along a link.

Maybe something like this is what your looking for... http://www.pmob.co.uk/temp/hozinlinemenu.htm

neh
Feb 23rd, 2010, 01:42 AM
A fixed width layout is totally different from a fluid width layout that uses a min-width.
It was perhaps unfair of me to make that comparison. All I meant to say was, such a large min-width is arguably contradictory to a fluid layout.

Have you seen a menu that behaves like you're wanting? I'd like to see it if you could pass along a link.

Never. But standards enthusiasts often claim that everything done non-semantically with tables is possible with CSS and semantic, leaner markup. This is the problem I have encountered, and the only way I have found to achieve this is through tables and other non-semantic solutions.


Maybe something like this is what your looking for... http://www.pmob.co.uk/temp/hozinlinemenu.htm

That list uses width:100%, making it impossible to float anything on the same line, no? I would have to make the floats (images) li(s) in the ul which is of course, non-semantic, because the images contain no actual content relevant to the list.

:o