 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / November 2004100% Horizontal list possible ?
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. > Hi all, > [quoted text clipped - 4 lines] > > Any thoughts ? URL? What exactly did you do?  SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> > Hi all, > [quoted text clipped - 6 lines] > > 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> > 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. >> 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. SignatureDavid Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/> Home is where the ~/.bashrc is >>> Is it possible to have 4 LI items in a <UL> with the LI width set to >>> width:25% [quoted text clipped - 3 lines] >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 SignatureSpartanicus > 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!"). SignatureBrian (remove "invalid" to email me) >> 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 [quoted text clipped - 5 lines] >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). SignatureSpartanicus > 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;) >>> 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 [quoted text clipped - 10 lines] > 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. SignatureBrian (remove "invalid" to email me) > 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 > Hi all, > [quoted text clipped - 6 lines] > > 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 ;-) |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.