SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Hybrid View
-
Sep 28, 2004, 06:03 #1
- Join Date
- Jul 2004
- Location
- England
- Posts
- 588
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
horizontal ul with some li on left and others right
Another day... another question...
I have a horizontal ul with 5 li.
I want to 'split it'... 3 li to be on the left and 2 on the right. With a gap between.
To float a single li to the right, I'd use...
ul#listname .right {float: right;} and apply a class="right" to the appropriate li.
But what about 2? Can I simply wrap a class around 2 li?
-
Sep 28, 2004, 07:26 #2
- Join Date
- Oct 2003
- Location
- North Wales
- Posts
- 154
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This seems to work OK, but I've just noticed that IE is losing the list style, for some reason:
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Untitled </title> <style type="text/css"> /*<![CDATA[*/ <!-- #listContainer { width: 400px; border: 1px solid #ccc; } li.right { float:right; margin-right: 20px; clear: both; } --> /*]]>*/ </style> </head> <body> <div id="listContainer"> <ul> <li class="right"> List Item 4 </li> <li class="right"> List Item 5 </li> <li> List Item 1 </li> <li> List Item 2 </li> <li> List Item 3 </li> </ul> </div> </body> </html>
-
Sep 28, 2004, 07:53 #3
- Join Date
- Jul 2004
- Location
- England
- Posts
- 588
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
On IE Mac I'm getting 4 and 5 on the right with no bullets. Th eothers are to the left with bullets.
Should all be inline, no bullets.
Thanks anyway, I'll take a break and come back to it.
-
Sep 28, 2004, 08:19 #4
- Join Date
- Oct 2003
- Location
- North Wales
- Posts
- 154
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry, didn't read it properly
Is this what you are looking for:
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Untitled </title> <style type="text/css"> /*<![CDATA[*/ <!-- #listcontainer { width: 100%; height: 50px; border: 1px solid #ccc; padding: 0; } #list li { display: inline; list-style-type: none; padding: 10px; } #list li.right { float: right; } #list li.left { float: left; } --> /*]]>*/ </style> </head> <body> <div id="listcontainer"> <ul id="list"> <li class="left"> <a href="#">Item one</a> </li> <li class="left"> <a href="#">Item two</a> </li> <li class="left"> <a href="#">Item three</a> </li> <li class="right"> <a href="#">Item five</a> </li> <li class="right"> <a href="#">Item four</a> </li> </ul> </div> </body> </html>
-
Sep 28, 2004, 10:22 #5
- Join Date
- Jul 2004
- Location
- England
- Posts
- 588
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks. That's great.
Is it reliable to 'clean the code' so the default li is a float left?
I know it's a bit anal - I like 'simple'.
#list li
{
display: inline;
list-style-type: none;
padding: 10px;
}
#list li {
float: left;
}
#list li.right {
float: right;
}
<ul id="list">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li class="right"><a href="#">Item five</a></li>
<li class="right"><a href="#">Item four</a></li>
</ul>
-
Sep 29, 2004, 01:13 #6
- Join Date
- Oct 2003
- Location
- North Wales
- Posts
- 154
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, the less code the better. You could actually use less code still:
Code:#list li { display: inline; list-style-type: none; padding: 10px; float:left;} #list li.right {float: right;}
-
Oct 1, 2004, 08:26 #7
- Join Date
- Jul 2004
- Location
- England
- Posts
- 588
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks. Appreciated.
Bookmarks