Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts

    Floating elements within display: list-item

    Hello,

    I was making an itunes chart for my website, and stumbled across floating elements within a <ol> list. I ended up just setting the li's to display: block; which eliminated the numbering. I was wondering how can you float elements within a list without offsetting or destroying the numbering? I ended up having to number my list with :before, content: '++', but hopefully there's an easier way
    Last edited by Sammy12; 08-08-2011 at 07:15 AM.

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,897
    Thanks
    46
    Thanked 202 Times in 201 Posts
    what about...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    <style type="text/css">
    #nav ol li{float:left; margin-left:25px;}
    #nav ol{background: blue; padding:2px; float:left;}
    #notnav span{float:left;}
    #notnav ol{background:black; padding 2px; color:white;}
    </style>
    
    </head>
    
    <body>
    <div id="nav">
    <ol>
    <li style="background:orange;">one</li>
    <li style="background:pink;">two</li>
    <li style="background:purple;">three</li>
    <li style="background:red;">four</li>
    <li style="background:green;">five</li>
    </ol>
    </div>
    <hr style="clear:both" />
    <div id="notnav">
    <ol>
    <li style="background:orange;"><span>one</span></li>
    <li style="background:pink;"><span>two</span></li>
    <li style="background:purple;"><span>three</span></li>
    <li style="background:red;"><span>four</span></li>
    <li style="background:green;"><span>five</span></li>
    </ol>
    </div>
    </body>
    </html>
    see attached SS... not sure if this answers accurately
    Attached Thumbnails Attached Thumbnails Floating elements within display: list-item-ol.png  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    thanks for spending the time to write it all out. i think you are addressing the problem!



    I just plugged the script into a new doc. don't know how you got that other pic. im using chrome.

    however, yes the image above is right on the money. exact problem im having. even worse, if you set a width to the span the number will go even further to the right

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Sammy12 View Post
    I just plugged the script into a new doc. don't know how you got that other pic. im using chrome.

    however, yes the image above is right on the money. exact problem im having. even worse, if you set a width to the span the number will go even further to the right
    Apparently, WebKit browsers (tested Chrome 13/Safari 5.1) have an odd behavior where the list item bullets (i.e., numbers here) are tied to the non-floated text inside the list item. As a result, if you have a left float at the start of a list item, then the bullet will likely overlap the float because the non-floated text will be just to the right of the float.

    Your example doesn't have any non-floated text, of course, but the bullets are aligned to the hypothetical location where non-floated text would start; that is, non-floated text would hypothetically begin just to the right of the left-floated text "one", "two", etc. and bullets are therefore placed to the left of this position. That bullet position happens to be on top of the floats.

    It looks like Mozilla Firefox (6 B4) and Win. Internet Explorer (9 and 10 PP2) have the expected behavior where the bullets are tied to the list item's box and therefore always appear outside of it.

    Opera 11.5 does something bizarre and generates two bullets: one for the floated text and one for the non-floated text. So, you end up with the WebKit behavior plus another bullet beside each float.

    Here's some code that makes things more obvious and which I used while troubleshooting:

    Code:
    <!doctype html>
    <html lang="en-US">
    	<head>
    		<title>Demo Document</title>
    		<style>
    			/* Layout */
    			* { margin: 0; padding: 0; }
    			body { width: 25em; margin: 1em auto; }
    			.list { margin: 1em; }
    			.list ol { padding: 0.25em; }
    			.list li { margin: 0.125em; margin-left: 2em; padding: 0.5em; }
    			.list.horizontal ol { overflow: auto; }
    			.list.horizontal li { outline: 0.1em dashed; }
    			.list.horizontal.to_left li { float: left; }
    			.list.horizontal.to_right li { float: right; }
    			.list.vertical div { outline: 0.1em dashed; margin: 0.125em; padding: 0.5em; }
    			.list.vertical.to_left div { float: left; margin-right: 0.25em; }
    			.list.vertical.to_right div { float: right; margin-left: 0.25em; }
    			
    			/* Counters */
    			/*
    			.list.vertical { counter-reset: FIX-ME-NOW_COUNTER; }
    			.list.vertical div::before { content: counter(FIX-ME-NOW_COUNTER) ". "; counter-increment: FIX-ME-NOW_COUNTER 1; }
    			*/
    			
    			/* Color Scheme */
    			ol {                          background-color: hsla(  0,   0%,  90%, 1.0); color: black; }
    			li {                          background-color: hsla( 15,  60%,  50%, 0.5); color: inherit; }
    			li + li {                     background-color: hsla( 75,  60%,  50%, 0.5); }
    			li + li + li {                background-color: hsla(135,  60%,  50%, 0.5); }
    			li + li + li + li {           background-color: hsla(195,  60%,  50%, 0.5); }
    			li + li + li + li + li {      background-color: hsla(255,  60%,  50%, 0.5); }
    			li + li + li + li + li + li { background-color: hsla(315,  60%,  50%, 0.5); }
    		</style>
    	</head>
    	<body>
    		<div class="horizontal list to_left">
    			<ol>
    				<li>Item One</li>
    				<li>Item Two</li>
    				<li>Item Three</li>
    				<li>Item Four</li>
    				<li>Item Five</li>
    				<li>Item Six</li>
    			</ol>
    		</div>
    		<div class="horizontal list to_right">
    			<ol>
    				<li>Item One</li>
    				<li>Item Two</li>
    				<li>Item Three</li>
    				<li>Item Four</li>
    				<li>Item Five</li>
    				<li>Item Six</li>
    			</ol>
    		</div>
    		<div class="vertical list to_left">
    			<ol>
    				<li>
    					<div>Item One</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Two</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Three</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Four</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Five</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Six</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    			</ol>
    		</div>
    		<div class="vertical list to_right">
    			<ol>
    				<li>
    					<div>Item One</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Two</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Three</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Four</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Five</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    				<li>
    					<div>Item Six</div>
    					<p>a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z
    					   a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    				</li>
    			</ol>
    		</div>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    thanks for that...but it doesn't truly answer my question. prior to asking i was looking for a universal fix that i could use throughout my pages. all i could think of was something like

    Code:
    li { display: block; }
    
    b + * ~  * {
     padding-left: 15px;
     display: block;
    }
    
    b:before {
     content: '1';
    }
    Code:
    <ol>
     <li>
       <div style="float: left;">
            <b>.</b>
            <span class="title"></span>
            <span class="below"></span>
       </div>
       <div style="float: right;">
          <!-- image here -->
       </div>
     </li>
    </ol>
    but ++ will not work if javascript disabled, and :before not supported in early ie6, ie7 & ff3..its so far from a list now and can hardly pass for semantically correct



    does anyone have a method that works cross-browser.
    Last edited by Sammy12; 08-07-2011 at 01:35 PM.

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,897
    Thanks
    46
    Thanked 202 Times in 201 Posts
    hey Sammy,
    I checked the code i used earlier, if you remove the float from the span attribute in chrome it looks just like the SS... now when checking that i went back and checked against the IE's and FF... and actually you can remove the float from the span entirely... try that and let me know if it is what you were driving at

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    need the float on the span. since another span is going to the right of it. position: absolute; could probably do this, but it doesn't seem to be the "right" way. I just thought there might be some type of trick.

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,897
    Thanks
    46
    Thanked 202 Times in 201 Posts
    what about this?

    Code:
    #notnav ol{background:black; padding 2px; color:white;}
    
    ......
    
    <div id="notnav">
    <ol>
    <li><span style="background:orange;">one</span><span style="background:grey;">second "one"</span></li>
    <li><span style="background:pink;">two</span><span style="background:white; color:black;">second "two"</span></li>
    <li><span style="background:purple;">three</span><span style="background:aqua;">second "three"</span></li>
    <li><span style="background:red;">four</span><span style="background:teal;">second "four"</span></li>
    <li><span style="background:green;">five</span><span style="background:brown;">second "five"</span></li>
    </ol>
    </div>
    the span by nature is inline... it wont attempt to take up a whole line like blocks... i guess why do you need to float? or what is the floating purpose?
    Attached Thumbnails Attached Thumbnails Floating elements within display: list-item-delete.png  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I guess it doesn't truly matter any more haha. the answer is no, you cannot float elements within display: list-item.

    i wanted a title to the left and an image to the far right.

  • #10
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,897
    Thanks
    46
    Thanked 202 Times in 201 Posts
    well even if it doesnt matter, i hope this helps

    Code:
    #notnav ol{background:black; padding 2px; color:white;}
    
    ....
    
    <div id="notnav" style="width:300px;">
    <ol>
    <li><span style="background:orange;">one</span><span style="background:grey; float:right; clear:right;">second "one"</span></li>
    <li><span style="background:pink;">two</span><span style="background:white; color:black; float:right; clear:right;">second "two"</span></li>
    <li><span style="background:purple;">three</span><span style="background:aqua; float:right; clear:right;">second "three"</span></li>
    <li><span style="background:red;">four</span><span style="background:teal; float:right; clear:right;">second "four"</span></li>
    <li><span style="background:green;">five</span><span style="background:brown; float:right; clear:right;">second "five"</span></li>
    </ol>
    </div>
    floating/clearing the second span does not do the error with the numbers floating the first one did... still dont know if that's what your driving for... tested IE and chrome
    Attached Thumbnails Attached Thumbnails Floating elements within display: list-item-delete.png  

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Sammy12 View Post
    Code:
    b:before {
     content: '1';
    }
    If you were trying to use this to generate your own list numbers on elements other than the li elements, that can be done with the counter-increment and counter-reset properties. There's example code in a CSS comment within the style sheet of my previous post.

    Like the before and after pseudo-classes, however, they are not supported in MSIE6. I'd say good luck supporting that browser. Even Google has given up on it.

    Quote Originally Posted by Sammy12 View Post
    Code:
    <ol>
     <li>
       <div style="float: left;">
            <b>.</b>
            <span class="title"></span>
            <span class="below"></span>
       </div>
       <div style="float: right;">
          <!-- image here -->
       </div>
     </li>
    </ol>
    When you're trying to put content side-by-side, you do not float both sides. The first half of the content—that which occurs first in the document source code—should be floated and the remaining half of content should remain in the normal flow.

    Quote Originally Posted by Sammy12 View Post
    but ++ will not work if javascript disabled, and :before not supported in early ie6, ie7 & ff3..
    I'm pretty certain that Mozilla Firefox 3 supports the before pseudo-element and counter properties.

    Quote Originally Posted by Sammy12 View Post
    its so far from a list now and can hardly pass for semantically correct
    Without seeing your content, it's hard to say.

    If the image is indeed content, you may want to consider using an HTML table or definition list to associate the title with the image. Otherwise, (if it's not) you may want to consider using CSS background images or CSS table layout to display the image and achieve your desired layout.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by Arbitrator View Post
    I'm pretty certain that Mozilla Firefox 3 supports the before pseudo-element and counter properties.
    :before is buggy in ff3. im going to go ahead mark this as "resolved" I was looking for "oh yeah you just make this block, float this. This thread is getting a bit overdue

    @alykns yeah, right float works fine it's no longer really a list so. hopefully if anyone else finds themselves in this issue they will see this thread, since I wasn't able to find anything when searching. I guess the simple answer is: it's no longer a list when you have a bunch of columns, its a TABLE. they should have a numbered table in html.




    p.s. yes I know it can be done. let me end this thread
    Last edited by Sammy12; 08-08-2011 at 07:15 AM.

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Sammy12 View Post
    :before is buggy in ff3.
    Oh, right. I forgot that older versions of Firefox don't support the display and position properties properly for the before and after pseudo-classes.

    Quote Originally Posted by Sammy12 View Post
    I guess the simple answer is: it's no longer a list when you have a bunch of columns, its a TABLE. they should have a numbered table in html.
    There's no need to make such an element when you can use CSS to do the same thing (see the "Counters" part of the style sheet):

    Code:
    <!doctype html>
    <html lang="en-US">
    	<head>
    		<title>Demo Document</title>
    		<style>
    			/* Layout */
    			* { margin: 0; padding: 0; }
    			html { margin: 1em; }
    			table { caption-side: bottom; margin: 1em auto; border-collapse: collapse; }
    			caption { padding: 0.5em; }
    			caption::before { content: "⬑ " /* U+2B11 LEFTWARDS ARROW WITH TIP UPWARDS */; }
    			caption:hover + tbody *, caption:hover + tbody ::before { border: 0.1em solid; }
    			tr::before, th, td { border: 0.1em solid; padding: 0.5em; }
    			
    			/* Counters */
    			tbody { counter-reset: TABLE_ROW_COUNTER; }
    			tbody tr::before { counter-increment: TABLE_ROW_COUNTER 1; content: counter(TABLE_ROW_COUNTER) ". "; display: table-cell; }
    			
    			/* Typography */
    			caption, th { font-weight: bold; }
    			caption { text-align: right }
    			
    			/* Color Scheme */
    			html { background-color: white; color: black; }
    			caption:hover { border-color: lightblue; background-color: lightblue; color: inherit; }
    			caption:hover + tbody *, caption:hover + tbody ::before { border-color: lightblue; }
    			tr:nth-child(even) { background-color: hsl(0, 0%, 90%); color: black; }
    			tr:hover { background-color: lightblue; color: inherit; }
    			
    			/* UI */
    			tbody tr::before, caption:hover { cursor: default; }
    		</style>
    	</head>
    	<body>
    		<table>
    			<caption>Figure 1</caption>
    			<tbody>
    				<tr>
    					<th scope="row">Header 1</th>
    					<td>Content 1</td>
    				</tr>
    				<tr>
    					<th scope="row">Header 2</th>
    					<td>Content 2</td>
    				</tr>
    				<tr>
    					<th scope="row">Header 3</th>
    					<td>Content 3</td>
    				</tr>
    				<tr>
    					<th scope="row">Header 4</th>
    					<td>Content 4</td>
    				</tr>
    				<tr>
    					<th scope="row">Header 5</th>
    					<td>Content 5</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •