center/shrink to fit redux.

[fred.haab]

So I'm anally trying to avoid tables, like all the "good" developers
keep saying I should, but with all my books and searching on the web, I
simply can't figure out a way to center an <ul> without using a table.

So the "requirement" is that the UL block itself is centered AS A
WHOLE. The actualy content within the block should be left aligned
(the bullets should line up). The title I have above the UL is pretty
short - and should also be left aligned (but I could live with it
centered over the list). So it's something basic like this:

<p>List Title:</p>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>

Problems with CSS:

1. <ul> width is, without specifically setting it, 100%. So is the
width of a DIV. So you can't use margin: auto auto.

2. I want the <ul> to be exactly centered, so if I use a % or a fixed
width, the <ul> will lean towards the left unless I space it exactly
perfectly... but we wouldn't want to do that because it would "break"
when users resize the window or fonts.

In other words, if there were only some way to have a block shrink to
fit the content (like a table data would do), then you could set the
margins to auto and have it centered and still not be restricted to
fixed widths and horrible consequences on resizing fonts and windows.
Obviously, even with a centered table, someone can do something extreme
(extra-extra huge fonts that in no way can look "right"), but someone
should theoretically be able to increase the font size without changing
the width of the window up until the width of the window is filled with
the longest line of the centered list, and even then it will wrap the
<li> and not necessarily look bad. Of course, at some point you just
have to say it's unreasonable to make it look good (like someone
shrinking a window to 100x100 and saying your site doesn't scale well).

I know the width will change to fit the content if you float the block
(ie float: left), but then how do you center it?

Shouldn't there be a "float: center"?

Thanks.

 

[mbstevens]

So the "requirement" is that the UL block itself is centered AS A
WHOLE.

<p>List Title:</p>

<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>
.............
Shouldn't there be a "float: center"?
.............

A center column is sometimes handled by setting the left and right
columns to the same percentage, leaving the center column the remainder
of the alloted space.

http://www.glish.com/css/2.asp

For your purposes, modify it so that the <ul> block _is_ the center column.

Different browsers are liable not to render it exactly the same.
To my eye it's close enough.

One should not insist on pixel perfection on the web -- it's not to
be had except in images.

 

[fred.haab]

No. Use <hx>...</hx>

Well, that's just nit-picking. I want the font to be the same.

A center column is sometimes handled by setting the left and right
columns to the same percentage, leaving the center column the remainder
of the alloted space.

Yes, I know - I explained that in the original post, and I don't
necessarily need "pixel perfect" (in fact, I don't expect it at all).
The problem is that it should work on any reasonable window resolution
(640 on up). In fact, I've done three columns with divs and CSS, and
it all works just fine for that content.

But let's say I write this for the lowest common denominator (640,
although I think 800 is more reasonable these days), and say "with the
given font and so forth, the UL takes up just under 50% of the page, so
if I set right and left columns (or margins) to take up 25% each, it
looks fine."

Then the user uses a 1024 or 1280 window. Now, the box is still
centered, but it's bigger - much bigger. The content in the box is
left justified to make the bullets line up. Now there is a big empty
space on the right side of the box using this technique.

If I fix the width of the box, then there is a problem when users
resize the font - the width of the container should expand up to the
maximum it can before text starts wrapping.

The only way I can see handle both cases - staying reasonably centered
regardless of window width AND staying centered and expanding the width
of the container a reasonable amount when the user selects a larger
font size is to use tables.

Don't get me wrong, I'm not trolling and trying to reignite the debate.
I used to use tables for layout all the time, now I'm using CSS, and
all my new stuff uses CSS and is run through validators and everything
- and if I'm not supposed to use tables for presentation, that's
fine... but I am thinking I will do so in cases like these because CSS
simply does not offer the functionality I want. The fact of the matter
is that "centered" might be deprecated (as well as "align=centered"),
which is fine - but CSS has not offered a BETTER alternative, it only
offered AN alternative.

I want to be proven wrong - I'm not expert, but I'm pretty old school
about it - the user should have as much flexibility as possible.
Fixing the width of websites is not a good alternative - it's merely AN
alternative just so people can get away without using tables so other
developers don't mock their html.

So I'm leaving it plain for now (not centered), and I'm hoping that
someone will tell me it's possible to center an arbitrary sized
(dependent on the content) container.

 

[Ed Mullen]

So I'm anally trying to avoid tables, like all the "good" developers
keep saying I should, but with all my books and searching on the web, I
simply can't figure out a way to center an <ul> without using a table.

So the "requirement" is that the UL block itself is centered AS A
WHOLE. The actualy content within the block should be left aligned
(the bullets should line up). The title I have above the UL is pretty
short - and should also be left aligned (but I could live with it
centered over the list). So it's something basic like this:

<p>List Title:</p>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>

Problems with CSS:

1. <ul> width is, without specifically setting it, 100%. So is the
width of a DIV. So you can't use margin: auto auto.

2. I want the <ul> to be exactly centered, so if I use a % or a fixed
width, the <ul> will lean towards the left unless I space it exactly
perfectly... but we wouldn't want to do that because it would "break"
when users resize the window or fonts.

In other words, if there were only some way to have a block shrink to
fit the content (like a table data would do), then you could set the
margins to auto and have it centered and still not be restricted to
fixed widths and horrible consequences on resizing fonts and windows.
Obviously, even with a centered table, someone can do something extreme
(extra-extra huge fonts that in no way can look "right"), but someone
should theoretically be able to increase the font size without changing
the width of the window up until the width of the window is filled with
the longest line of the centered list, and even then it will wrap the
<li> and not necessarily look bad. Of course, at some point you just
have to say it's unreasonable to make it look good (like someone
shrinking a window to 100x100 and saying your site doesn't scale well).

I know the width will change to fit the content if you float the block
(ie float: left), but then how do you center it?

Shouldn't there be a "float: center"?

Thanks.

I'm sure there's something horribly wrong with this but I tried it real
fast just as an exercise. http://edmullen.net/temp/test2.html. It does
validate, for what that's worth. I've shrunk the window, blown up and
reduced the text, etc. and it seems to work well in Mozilla and IE. the
worst thing that seems to happen is that the placement of the TITLE will
shift noticeably right when the text is absurdly enlarged in Mozilla.
There's probably some way to overcome that but nothing occurred to me in
the brief time I spent on this.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
How come abbreviated is such a long word?

 

[fred.haab]

I'm sure there's something horribly wrong with this but I tried it real
fast just as an exercise. http://edmullen.net/temp/test2.html. It does
validate, for what that's worth. I've shrunk the window, blown up and
reduced the text, etc. and it seems to work well in Mozilla and IE. the
worst thing that seems to happen is that the placement of the TITLE will
shift noticeably right when the text is absurdly enlarged in Mozilla.
There's probably some way to overcome that but nothing occurred to me in
the brief time I spent on this.

Yes - that all works the way you describe it, but I will not have any
wrapping list items. You see, your fifth item forces the list to the
maximum width of the div that it's enclosed in. If you made that item
no bigger than, for example, the third item, you would see the problem
more clearly.

Then you'd adjust the widths of the margins to make it look right.
Then when you resized the window, you'd more clearly see the problem...

In my list, the options are short. I don't want them to wrap unless
they absolutely have to.

If I used a table data element, the element would expand when I
increased the font size up until the maximum it could be before
wrapping the list item.

Also, using the technique you used, without wrapping, you'd play with
the margins until it looked right for you and your browser window
size.... let's say you did a lowest common denominator and reasonably
assumed no less than a screen width of 800. So you adjust the margins
so it's reasonably centered (this is why it doesn't HAVE to be pixel
perfect, "reasonably" centered is just fine). So let's say you have
the margins set to 25%, so the content is 50%, aligned left.

Now you go up to 1280 width from 800. You've added over 50% more to
the width. Now your content box will still take up 50%, but if it
looked right before, it will now have a third of the right side taken
up by empty space.

In other words, your "box" is centered (be it a div or whatever), but
if you tweaked it so the content was centered for 800, it's not for
1280 (or even 1024). Moreover, it's worse if you built it for 1280 and
then shrink the window - now you will have all sorts of wrapping where
it's really unecessary, and there is technically plenty of horizontal
room for it.

So you might decide, then, to fix the width and "auto" the margins...
that would solve one problem, but cause another when the nearly blind
user (yes, I actually encounter them) increases the font size.

Do you see? CSS seems fine to center fixed width and sometimes
relatively sized content (relative to the window), but it seems to me
to fail for arbitrary, possibly dynamically changing sized content, as
is the case when the user changes font size, or the content contained
is unknown when the static portion of the page is written (php, asp...
scripting, like javascript makes it even worse - you have absolutely no
idea what the content might actually be).

I'm appreciating the replies and the work you put into it, but I'm
sorry I'm just not getting a solution to the problem. It's one of
those things that I can say "I can see the CSS way for 90% of the time,
but tables are still the best option the other 10%". I know that'll
make purists howl, but it works... and unlike some other "cheats",
tables are not, and won't be, deprecated.

 

[mbstevens]

Well, that's just nit-picking. I want the font to be the same.

Preferring semantic markup is hardly nit-picking. The comment was
lagniappe, but I addressed the question you asked just after this.
If you want the font to be the same, set it the same in CSS and stick
to semantic markup.

But let's say I write this for the lowest common denominator

CSS based pages are supposed to be usable by the lcd, not written
specifically for it. But you knew that...

If I fix the width of the box, then there is a problem when users
resize the font - the width of the container should expand up to the
maximum it can before text starts wrapping.

I don't understand what you really want.
Text within an <li> does wrap only when it reaches the width of its
container (the <ul>). If you're
using the <ul> as the center column, the text will expand and contract.
The text within the <li> will wrap at whatever size the <ul> is.

______________________________
It would be much easier to understand exactly what your problem is if
you would put up a couple of pages, one tables, one CSS, that
demonstrate your problem.
________________________________

So I'm leaving it plain for now (not centered), and I'm hoping that
someone will tell me it's possible to center an arbitrary sized
(dependent on the content) container.

I thought you wanted the <ul> to be uncontained:

['So the "requirement" is that the UL block itself is centered AS A
WHOLE. '].

There is another method than the one I mentioned in the previous post.
If you can drop this no-container requirement you just center one
container within another with the auto-width margins method of centering.

#outer_container {
text-align:center;
}

#contained_container{
margin:0px auto;
text-align:left;
}

___________________________
But again, why don't you put up a couple of pages that actually
demonstrate your problem. That will eliminate a huge amount of
fencing.
___________________________

 

[Ed Mullen]

Yes - that all works the way you describe it, but I will not have any
wrapping list items. You see, your fifth item forces the list to the

Gotcha. Thanks for the detailed explanation.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
A fool-proof method for sculpting an elephant: First, get a huge block
of marble; then chip away everything that doesn't look like an elephant.

 

[fred.haab]

I don't understand what you really want.
Text within an <li> does wrap only when it reaches the width of its
container (the <ul>). If you're
using the <ul> as the center column, the text will expand and contract.
The text within the <li> will wrap at whatever size the <ul> is.

Why should it wrap unless it HAS to wrap because you've run out of
screen space? You're making it wrap simply because the container it's
in is fixed in size. There isn't, and wasn't, ever some condition that
there was no container wrapping the list, so I'm sorry if I somehow
gave that impression.

______________________________
It would be much easier to understand exactly what your problem is if
you would put up a couple of pages, one tables, one CSS, that
demonstrate your problem.
________________________________

http://frhaab.home.comcast.net/test/prob2.html

The page is self explanatory. The result, as I see it, is that the
table gracefully handles not only resizing the page, but the font as
well. That is, the table will grow horizontally as much as possible
before wrapping when you increase the font size. By giving a specific
width to a div (even if it's relative), you are forcing those list
items to wrap even if there's enough horizontal space to handle the
increased font size.

I use both fixed and relative div sizes to show the problem. The fixed
size more gracefully handles resizing the window - it remains
relatively centered. However, even with huge amounts of horizontal
space, it will wrap text when you increase the font size too much.

The relative width div is slightly better when you make the window
excessively wide, you can increase the font size a lot - but ONLY if
you increase the window width a LOT... and if you leave the font alone,
increasing the window width makes the actual list become more and more
uncentered (to the left).

There is another method than the one I mentioned in the previous post.
If you can drop this no-container requirement you just center one
container within another with the auto-width margins method of centering.

#outer_container {
text-align:center;
}

#contained_container{
margin:0px auto;
text-align:left;
}

Yes, of course - this is exactly what I want... the problem is that the
default box size is 100% width... so a sub container (div within a div,
or even a ul within a div), with no other specifications, is also going
to be 100% width...

In other words, the margin trick doesn't work unless you specify a
width somewhere along the lines.... if I'm mistaken, please let me
know, because that's the cruxt of the problem! Centering images, for
example, is a piece of cake!

Now, I know it seems like I'm really reaching to try to disprove the
philosphy that divs can be used anywhere tables can - but I really,
actually, honestly ran into this today... I just wanted a small list of
options for my users... the page is very simple - the title of the page
and some options.

 

[mbstevens]

Now, I know it seems like I'm really reaching to try to disprove the
philosphy that divs can be used anywhere tables can - but I really,
actually, honestly ran into this today... I just wanted a small list of
options for my users... the page is very simple - the title of the page
and some options.

Ok, I see the problem. You have to ask yourself if the difference in
rendering is really worth moving away from semantic markup.
The CSS versions only look a bit visually awkward in instances of truly
pathological text size or browser window size, and the CSS versions are
still usable and accessible.

However, I'll spend a bit of time trying to come up with a fix, because
I find your problem interesting. If I should discover a way that works
better I'll post it, although I don't know of one off-hand.

 

[Jonathan N. Little]

Ok, I see the problem. You have to ask yourself if the difference in
rendering is really worth moving away from semantic markup.
The CSS versions only look a bit visually awkward in instances of truly
pathological text size or browser window size, and the CSS versions are
still usable and accessible.

However, I'll spend a bit of time trying to come up with a fix, because
I find your problem interesting. If I should discover a way that works
better I'll post it, although I don't know of one off-hand.

The only way I can see use a wrapper and tweak to suit...

<style type="text/css">
..gotClass { margin-left: 35%; }
..gotClass UL { margin-left: 0; padding-left: 0;}
</style>


<div class="gotClass">
<h2>List Title:</h2>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>
</div>

Put title in a H# block seems more appropriate if it is a title for the
block (this case a list) to follow.

 

[mbstevens]

The only way I can see use a wrapper and tweak to suit...

Yes, and I find that the tweaking becomes quite easy if you
give a <ul> width in ems.

http://www.mbstevens.com/centering.html

This seems to perform better than the CSS examples that fred.habb gave.
It should be no problem to take a test of the text length for server
side generated pages, too, and spit out corrected CSS with the page. He
mentioned generating the things with javascript, too, I believe. All I
can say is -- horrors!

 

[BootNic]

So I'm anally trying to avoid tables, like all the "good" developers
keep saying I should, but with all my books and searching on the
web, I simply can't figure out a way to center an <ul> without
using a table.

So the "requirement" is that the UL block itself is centered AS A
WHOLE. The actualy content within the block should be left aligned
(the bullets should line up). The title I have above the UL is
pretty short - and should also be left aligned (but I could live
with it centered over the list). So it's something basic like this:

[snip]

The first thing that comes to mind is display:table. Work around would be needed
for IE.

<style type="text/css">
..table{
display:table;
margin:auto;
}
..table p{
margin: 0;
}
ul,li{
margin:0 0 0 5px;
padding:0 0 0 5px;
}
</style>

<div class="table">
<p>List Title:</p>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>
</div>

I can think of a way or two that may work in IE.

If you wish to allow IE to display just a bit different, then you could assign a width
to the table class for IE, the result would be almost the same but will not shrink ,
and could be a real pain if you have several of these on a page because you may
need to play with the width to get the results you want.

<!--[if IE]>
<style type="text/css">
..table{width:10.5em}
</style>
<![endif]-->

The work around I am going to suggest is not likely to be very popular, since it
will not get you away from a table.

<div class="table">
<!--[if IE]>
<table summary="Broken IE layout" style="margin:auto;"><tr><td>
<![endif]-->
<p>List Title:</p>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>
<!--[if IE]>
</tr></td></table>
<![endif]-->
</div>

Another option for IE would be to use an css expression, but that would be
dependent on Jscript.

--
BootNic Thursday, June 01, 2006 5:55 PM

The only thing wrong with immortality is that it tends to go on
forever.
*Herb Caen*

 

[mbstevens]

he mentioned generating the things with javascript, too, I believe.

....but not in this subthread, over in the one with Ed Mullin.
That may have been confusing.

 

[Neredbojias]

To further the education of mankind, mbstevens

Yes, and I find that the tweaking becomes quite easy if you
give a <ul> width in ems.

http://www.mbstevens.com/centering.html

This seems to perform better than the CSS examples that fred.habb
gave.

Using the concept of width in ems, I made a sort of "centering re-
columnizing list" for my index page awhile back. It's not perfect, and
Opera has an inline-vs-inline-block thingy, but it works for me (-although
I should really php the Opera hack...)

http://www.neredbojias.com/

 

[Ed Mullen]

...but not in this subthread, over in the one with Ed Mullin.
That may have been confusing.

Err, just so no one goes searching for "Ed Mullin" (with an "I") ... it
is "Ed Mullen (with an "E")." ;-)

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
Does it bother you that doctors call what they do a practice?

 

[mbstevens]

Err, just so no one goes searching for "Ed Mullin" (with an "I") ... it
is "Ed Mullen (with an "E")." ;-)

Silly me.

 

[mbstevens]

To further the education of mankind, mbstevens



Using the concept of width in ems, I made a sort of "centering re-
columnizing list" for my index page awhile back. It's not perfect, and
Opera has an inline-vs-inline-block thingy, but it works for me (-although
I should really php the Opera hack...)

http://www.neredbojias.com/

That exercises nicely at all sorts of different sizes.

 

[dorayme]

http://www.neredbojias.com/
That exercises nicely at all sorts of different sizes.

? In Safari I have to open to almost 1600 px wide to get all in?
I might have missed the context of all this....

 

[mbstevens]

? In Safari I have to open to almost 1600 px wide to get all in?
I might have missed the context of all this....

I was thinking it is fine for one section to move below another in a
narrow window, and still look centered. Personal judgement call, but
it was endorsed by Officer Bud White, Gaius Maximus, and Captain Aubry.

 

[dorayme]

I was thinking it is fine for one section to move below another in a
narrow window, and still look centered. Personal judgement call, but
it was endorsed by Officer Bud White, Gaius Maximus, and Captain Aubry.

Actually, I better keep out of this. Seems easy enough to centre
a list? But there is obviously more going on. I am sure I caught
a glimpse of Hume in your mark up somewhere in the thread. Now he
is an enjoyable writer...