100% Horizontal list possible ?

Dave Brown wrote:

Hi all,

Is it possible to have 4 LI items in a <UL> with the LI width set to
width:25% so that each one sizes to 25% of whatever its container
width is ? It doesnt seem so, the width doesnt seem to affect the
li. even when the ul width is 100%

Any thoughts ?

Dave.

<style type="text/css">
ul
{
list-style: none;
width: 50%;
}

li
{
float: left;
width: 25%;
}
</style>

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

in comp.infosystems.www.authoring.stylesheets, Dave Brown wrote:

Hi all,

Is it possible to have 4 LI items in a <UL> with the LI width set to
width:25% so that each one sizes to 25% of whatever its container width
is ? It doesnt seem so, the width doesnt seem to affect the li. even
when the ul width is 100%

Any thoughts ?

URL? What exactly did you do?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

On Mon, 22 Nov 2004 21:31:12 +0000, Dave Brown <da**@nospamhere.dbws.net>
wrote:

Is it possible to have 4 LI items in a <UL> with the LI width set to
width:25% so that each one sizes to 25% of whatever its container width
is ? It doesnt seem so, the width doesnt seem to affect the li. even
when the ul width is 100%

Sure it is. You need to change li to display: inline; though, otherwise
they go below each other by default.

Nik Coughin wrote:

li
{
float: left;
width: 25%;
}

That works too. ;)

Neal wrote:

Is it possible to have 4 LI items in a <UL> with the LI width set to
width:25%

Sure it is. You need to change li to display: inline;

No, the moment you make them display: inline, the width property no longer
applies. You'll need to use float instead.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Dave Brown wrote:

Hi all,

Is it possible to have 4 LI items in a <UL> with the LI width set to
width:25% so that each one sizes to 25% of whatever its container width
is ? It doesnt seem so, the width doesnt seem to affect the li. even
when the ul width is 100%

Any thoughts ?

Dave.

Thanks for the replys, the thing missing was a float:left; for the li
element. without that it didnt size to 25%. but nowi have to stop the
last one dropping because there is a border, so asking it to be 25% will
make it drop. maybe 24.9% will do ;-)

David Dorward <do*****@yahoo.com> wrote:

Is it possible to have 4 LI items in a <UL> with the LI width set to
width:25%

Sure it is. You need to change li to display: inline;

No, the moment you make them display: inline, the width property no longer
applies. You'll need to use float instead.

In cases like this, before suggesting to float an element it should imo
always be pointed out that the correct way to do this is to set display
to either inline-block or inline-table, and that resorting to floating
is a nasty hack which is sometimes needed because Mozilla and IE don't
support either css value [1].

Then it should be pointed out that using floats inappropriately like
this has drawbacks such as running into UA float bugs, floats being
removed from the flow and the necessity to use the clear property on the
next block level element (with more bugs).

The #1 problem people run into when using css for layouts is due to IE's
lack of support for css tables, the #2 problem is floats being used
inappropriately, the problems they cause which leads to people saying
that css isn't suitable for layouts.

[1] on block level elements

--
Spartanicus

Spartanicus wrote:

The #1 problem people run into when using css for layouts is due to
IE's lack of support for css tables, the #2 problem is floats being
used inappropriately, the problems they cause which leads to people
saying that css isn't suitable for layouts.

After spending a couple of years around ciwas, I'd have to concur that
these are the biggest stumbling blocks in css. In fact, it might be
worth preparing article, perhaps linked to the faq, to warn newcomers
("danger ahead!").

--
Brian (remove "invalid" to email me)

Brian <us*****@julietremblay.com.invalid> wrote:

The #1 problem people run into when using css for layouts is due to
IE's lack of support for css tables, the #2 problem is floats being
used inappropriately, the problems they cause which leads to people
saying that css isn't suitable for layouts.

After spending a couple of years around ciwas, I'd have to concur that
these are the biggest stumbling blocks in css. In fact, it might be
worth preparing article, perhaps linked to the faq, to warn newcomers
("danger ahead!").

IIRC it was Neal who recently concluded that there is not a single good
CSS layout tutorial on the net. I briefly thought about having a go at
one, but I chickened out when I realized how much work it would be to
create something that I myself would be happy with.

I also considered asking the group for volunteers to do something
collectively, but I fear that creating a really good tutorial from a
collective effort would require so much coordination that the required
individual effort would still be huge (for the coordinator at least).

--
Spartanicus

On Tue, 23 Nov 2004 20:39:12 +0000, Spartanicus <me@privacy.net> wrote:

IIRC it was Neal who recently concluded that there is not a single good
CSS layout tutorial on the net.

And there's a cold martini for the first person to prove me wrong. One is
sorely needed. Two would be even better, because we could argue more;)

Spartanicus wrote:

Brian wrote:

The #1 problem people run into when using css for layouts is due
to IE's lack of support for css tables, the #2 problem is floats
being used inappropriately, the problems they cause which leads
to people saying that css isn't suitable for layouts.

After spending a couple of years around ciwas, I'd have to concur
that these are the biggest stumbling blocks in css. In fact, it
might be worth preparing article, perhaps linked to the faq, to
warn newcomers ("danger ahead!").

IIRC it was Neal who recently concluded that there is not a single
good CSS layout tutorial on the net. I briefly thought about having a
go at one, but I chickened out when I realized how much work it would
be to create something that I myself would be happy with.

Yeah, you'll notice that I didn't volunteer myself. ;-) I'll be
moving into a new apartment soon, and plan on getting high speed
internet. Perhaps when I do I'll be able to donate some time to such a
project.

--
Brian (remove "invalid" to email me)

"Spartanicus" <me@privacy.net> wrote in message
news:1s********************************@news.spart anicus.utvinternet.ie...

Brian <us*****@julietremblay.com.invalid> wrote:
IIRC it was Neal who recently concluded that there is not a single good
CSS layout tutorial on the net.

I started out with Webmonkey to learn html simply because that's where I
ended up when doing a search. When I discovered what W3C stood for, and
that the website would teach me much, I completely went through the html
"class" over and over on parts until I could get a perfect score on the
quiz. I then went through the section on CSS, but found it lacking in
exactly "how-to". It assumes I know too much already.

Where would be the best place to learn the deeper things about html/CSS? Is
the W3Cschools site the best place? Is webmonkey up-to-date enough to
depend on for a different perspective?

--
PC