Previous Message
Next Message

Re: [css-d] RE: how to center a listt

Sent by Porter Glendinning on 27 January 2002 14:02


At 12:43 PM 1/27/02, Chris digitized these thoughts:
>Is it possible that it is illegal or impossible to horizontally center 
>an unordered list element without centering the individual lines?  I 
>KNOW! I'LL USE "BLOCKQUOTE"  (just kidding, maybe).

I believe the problem you're running into is that the content of your 
list items is based on the font-size used to display them, and not on 
the size of the browser window. That is, width of that block is 
/visibly/ determined by the characters in the longest list item. 
However, when you specify widths and/or margins using percentages, the 
values are relative to the width of the list's parent element -- 
effectively the width of the visitor's browser window.

In case this doesn't quite make sense, here are a couple of ASCII 
diagrams that will hopefully clarify things a bit. In each, the outer 
box represents the page body, the inner box represents the ul element 
box, and the "x"s represent the list item contents.

     Default ul, no properties specified:

     +------------------------------------------------+
     |+----------------------------------------------+|
     || * xxxxxxxxxxxx                               ||
     || * xxxxxxxxxxxxxxxxx                          ||
     || * xxxxxxxxxxxxxx                             ||
     |+----------------------------------------------+|
     +------------------------------------------------+


     ul element with width and margin properties set:

     +------------------------------------------------+
     |     +------------------------------------+     |
     |     | * xxxxxxxxxxxx                     |     |
     |     | * xxxxxxxxxxxxxxxxx                |     |
     |     | * xxxxxxxxxxxxxx                   |     |
     |     +------------------------------------+     |
     +------------------------------------------------+

As you can (hopefully) see in the second example, the ul box has been 
centered in the page, but the contents still appear to be hanging off 
to the left. It would be nice if there were some way to say, "Make the 
width of this element as small as possible without wrapping its 
contents," but off the top of my head I can't think of any way that 
would work for this.

One approach to getting around this problem is to set the width of the 
ul element based on the font size that's being used. The em, en, and ex 
family of units will allow you to do this; however, be aware that some 
browsers might have trouble with them. Also, if you modify the content 
of the list items, you may need to revisit the measurement you set.

Working off you're existing code, I was able to get roughly the effect 
that I think you were going for by adding this rule set:

     ul {
       width: 33em;
       margin: inherit auto;
     }

Something that helps me visualize all this nonsense when I'm having 
trouble is to make the borders on the elements I'm working with 
visible, either by adding rules for specific selectors or by tossing in 
a rule set like this:

     * { border: 1px solid red; }

Hope this helps.  :)

- Porter


+--------------------------------------------------------+
| Porter Glendinning      [EMAIL-REMOVED]  |
| Web/UI Commando              http://www.serve.com/apg/ |
+--------------------------------------------------------+
| Porter's Workshop - http://www.serve.com/apg/workshop/ |
+--------------------------------------------------------+
Previous Message
Next Message

Message thread: