100% Horizontal list possible ?

Re: 100% Horizontal list possible ?

Dave Brown wrote:[color=blue]
> 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.[/color]

<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>

Re: 100% Horizontal list possible ?

in comp.infosystem s.www.authoring.stylesheets, Dave Brown wrote:[color=blue]
> 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 ?[/color]

URL? What exactly did you do?

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

Re: 100% Horizontal list possible ?

On Mon, 22 Nov 2004 21:31:12 +0000, Dave Brown <dave@nospamher e.dbws.net>
wrote:
[color=blue]
> 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%[/color]

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

Re: 100% Horizontal list possible ?

Nik Coughin wrote:
[color=blue]
> li
> {
> float: left;
> width: 25%;
> }[/color]

That works too. ;)

Re: 100% Horizontal list possible ?

Neal wrote:
[color=blue][color=green]
>> Is it possible to have 4 LI items in a <UL> with the LI width set to
>> width:25%[/color][/color]
[color=blue]
> Sure it is. You need to change li to display: inline;[/color]

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

Re: 100% Horizontal list possible ?

Dave Brown wrote:[color=blue]
> 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.[/color]
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 ;-)

Re: 100% Horizontal list possible ?

David Dorward <dorward@yahoo. com> wrote:
[color=blue][color=green][color=darkred]
>>> Is it possible to have 4 LI items in a <UL> with the LI width set to
>>> width:25%[/color][/color]
>[color=green]
>> Sure it is. You need to change li to display: inline;[/color]
>
>No, the moment you make them display: inline, the width property no longer
>applies. You'll need to use float instead.[/color]

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

Re: 100% Horizontal list possible ?

Spartanicus wrote:
[color=blue]
> 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.[/color]

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)

Re: 100% Horizontal list possible ?

Brian <usenet3@juliet remblay.com.inv alid> wrote:
[color=blue][color=green]
>> 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.[/color]
>
>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!").[/color]

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

Re: 100% Horizontal list possible ?

On Tue, 23 Nov 2004 20:39:12 +0000, Spartanicus <me@privacy.net > wrote:
[color=blue]
> IIRC it was Neal who recently concluded that there is not a single good
> CSS layout tutorial on the net.[/color]

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;)

Re: 100% Horizontal list possible ?

Spartanicus wrote:[color=blue]
> Brian wrote:
>
>[color=green][color=darkred]
>>> 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.[/color]
>>
>> 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!").[/color]
>
>
> 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.[/color]


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)

Re: 100% Horizontal list possible ?


"Spartanicu s" <me@privacy.net > wrote in message
news:1s67q0dgcq 9midggddmhel39g 7e2gb9ib0@news. spartanicus.utv internet.ie...[color=blue]
> Brian <usenet3@juliet remblay.com.inv alid> wrote:
>
>
> IIRC it was Neal who recently concluded that there is not a single good
> CSS layout tutorial on the net.[/color]

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