Help floating ul tags

HTML & CSS
1

I have two ul tags one containing numbers of star and another how many times users has been rate by star numbers. I want to float them like in the example below but I don’t know if these are the right tags to use and how Do i actually go about floating this two elements?


<ul>
<li>1 star</li>
<li>2 star</li>
<li>3 star</li>
<li>4 star</li>
<li>5 star</li>
</ul>

<ul>
<li>-------- [0]</li>
<li>-------- [0]</li>
<li>-------- [2]</li>
<li>-------- [0]</li>
<li>-------- [5]</li>
</ul>

so it can look something like this

1 star -------- [0]
2 star -------- [0]
3 star -------- [2]
4 star -------- [0]
5 star -------- [5]

Will I have to use other types of tags in order to achieve this effect? or it will be fine by using <ul> and <li> tags?

Thank you.

2

To float just give the <ul> a class, and add float:left; (a width too would be nice)

ul.someclass
{
  float:left;
  width:200px;/*test*/
}

It would be best to float both :).

3

it would be best If I float both ul to left and give a width to each one right?

4

Considering the code you gave, yes float both left and a width would be best so you know exactly how much space you have and also to prevent float drop (in the case of big paragraphs)

5 

<style type="text/css">
.rating {
    list-style:none;
	width:54px;
	height:7px;
	margin:0 0 0px 0;
	padding:0px;
	clear:both;
	position:relative;
	
	
	}
	

ul.rating li {
cursor: pointer;
float:left;
text-indent:-900em;
}
#starrating {
margin:0;
font-size:12px;
font-weight:100;
float:left;
width:200px;
}
#starrating2 {
margin:0;
font-size:12px;
font-weight:100;
float:left;
width:200px;
}

</style>
<div id="starrating">1 Star</div>
	  <div id="starrating2">
     <ul class="rating onestar">
      <li class="one">1</li>
      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>
     <li class="total">[0]</li>
      </ul>
    </div>

   <div id="starrating">2 Star</div>
	  <div id="starrating2">
	  <ul class="rating twostar">
	  <li class="one">1</li>
      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>
      <li class="total">[0]</li>
      </ul>
	</div>
  
   <div id="starrating">3 Star</div>
	  <div id="starrating2">
	  <ul class="rating threestar">
	  <li class="one">1</li>
      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>
      <li class="total">[0]</li>
      </ul>
     </div>

<div id="starrating">4 Star</div>
	  <div id="starrating2">
      <ul class="rating fourstar">
      <li class="one">1</li>
      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>
      <li class="total">[0]</li>
      </ul>
	</div>
    
<div id="starrating">5 Star</div>
         <div id="starrating2">
	  <ul class="rating fivestar">
	  <li class="one">1</li>
         <li class="two">2</li>
        <li class="three">3</li>
        <li class="four">4</li>
        <li class="five">5</li>
     <li class="total">[1]</li>
      </ul>
    </div>

I think I provided the wrong code. I have change to a <div> and left the <ul>

Still the effect is something like

1 star -------- [0]
2 star -------- [0]
3 star -------- [2]
4 star -------- [0]
5 star -------- [5]

Have to say the <li> inside the ul tags are being floated to the left inside the ul tags. But now I want to float the div id starrating2 to the left of starrating id.

Thanks.

6

Hi, the 1star/2star/3star etc etc must be floated, however it also must be cleared or else it will just float with everything, Add clear:left; to “#starrating”

7

I thought about clearing it every time!

ok. let me clear it

8 

<style type="text/css">
#starrating {
margin:0;
font-size:12px;
font-weight:100;
float:left;
width:50px;
}
#starrating2 {
margin:0;
font-size:12px;
font-weight:100;
float:left;
width:200px;
}
.clearer {
    clear:both;
	
}
</style>

<div id="starrating">1 Star</div>
<div id="starrating2">
<ul class="rating onestar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class=\\"clearer\\"></div>

<div id="starrating">2 Star</div>
<div id="starrating2">
<ul class="rating twostar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class=\\"clearer\\"></div>

<div id="starrating">3 Star</div>
<div id="starrating2">
<ul class="rating threestar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class=\\"clearer\\"></div>

<div id="starrating">4 Star</div>
<div id="starrating2">
<ul class="rating fourstar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class=\\"clearer\\"></div>

<div id="starrating">5 Star</div>
<div id="starrating2">
<ul class="rating fivestar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[1]</li>
</ul>
</div>

I have added a clearer but it won’t float yet neither clear.

9

You didn’t do as I siad. Reread my post. When did I ever suggest you add HTML? That’s unneccessary.

But, you also have \“clearer\” (backslashes) there. I won’t help you try and fix the HTML way to go, because the CSS way is much better :).

10 

<style type="text/css">
#starrating {
margin:0;
font-size:12px;
font-weight:100;
float:left;
width:200px;
clear:left;
}
#starrating2 {
margin:0;
font-size:12px;
font-weight:100;
float:left;
width:200px;
}
.clearer {
    clear:both;
	
}
</style>
<tr><td height="3" style="width:400px;">
<div id="starrating">1 Star</div>
<div id="starrating2">
<ul class="rating onestar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class="clearer"></div>

<div id="starrating">2 Star</div>
<div id="starrating2">
<ul class="rating twostar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class="clearer"></div>

<div id="starrating">3 Star</div>
<div id="starrating2">
<ul class="rating threestar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class="clearer"></div>

<div id="starrating">4 Star</div>
<div id="starrating2">
<ul class="rating fourstar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[0]</li>
</ul>
</div>
<div class="clearer"></div>

<div id="starrating">5 Star</div>
<div id="starrating2">
<ul class="rating fivestar">
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="total">[1]</li>
</ul>
</div>
</td></tr>

I have done all you said and still it won’t float the. I have clear:left #starrating, taken the backslashes out of the clear class and i have float:left both #starrating and starrating2.

Any other suggestion?

11

Use the HTML and CSS you provided from post 5. Your new code has some table crap in there…

Anyway, using HTML/CSS from post 5, add in the red.

#starrating {
margin:0;
font-size:12px;
font-weight:100;
float:left;
[color=red]clear:left;[/color]
width:200px;
}
12

Don’t know what is really going on but still is not working.

13

Using the code from 5 (and then my code from 6) it was working so I don’t know what to tell you :).

The text had a text-indent:-999em (for the stars) but I assume you nkow that.

14

when you say for the star you mean in the #starrating id?

#starrating {
margin:0;
font-size:12px;
font-weight:100;
float:left;
clear:left;
width:200px;
[COLOR="Red"]text-indent:-999em; [/COLOR]

}
15

text-indent seem like it fixed it! let me check.

16 
#starrating {
margin:0;
font-size:12px;
font-weight:100;
float:left;
clear:left;
width:35px;
text-indent:0em; 

}

But then the #starrating 1 star is not exactly aligned with the #starrating2 id #starrating is lower than #starrating2 it seem like #starrating has a top:3px; displaying it like a half line below the #starrating2.

17

I added this

margin-top:-6px;

and now they are aligned. I still don’t get how text-indent:0em; fixed it. Does it has to do something with the default browser style?

it seems like the browser was given text-indent:0em; to the code.

18

Sorry was talking on facebook lol. Forgot to check this :). You set text-indent:-999em; so of course the text will be hidden unless you change it back to 0 (or remove the text-indent completely)

Can you give me updated HTML/CSS? It sounds like your editing a lot.

19 
 


<style type="text/css">

.rating {
    list-style:none;
	width:54px;
	height:7px;
	margin:0 0 0px 0;
	padding:0px;
	clear:both;
	position:relative;
	background:url(images/nyhungrygrid.gif) no-repeat 0 0;
	
	}
	

ul.rating li {
cursor: pointer;
float:left;
text-indent:-900em;
}

ul.rating li a {
	position:absolute;
	left:0;
	top:0px;
	width:12px;
	height:7px;
	text-decoration:none;
	z-index: 200;
}


ul.rating li.one a {left:0px}
ul.rating li.two a {left:11px;}
ul.rating li.three a {left:22px;}
ul.rating li.four a {left:33px;}
ul.rating li.five a {left:44px;}

ul.rating li a:hover {
z-index:2;
width:54px;
height:7px;
overflow:hidden;
left:0; 
background:url(images/nyhungrygrid.gif) no-repeat 0 0;
list-style:none;
}
ul.rating li.one a:hover {background-position:0 -42px;}
ul.rating li.two a:hover {background-position:0 -49px;}
ul.rating li.three a:hover {background-position:0 -56px;}
ul.rating li.four a:hover {background-position:0 -63px;}
ul.rating li.five a:hover {background-position:0 -70px;}

.rated{
  width:54px;
  height:7px;
  margin:0 0 0 0;
  padding:0;
  list-style:none;

  position:relative;
  
  background: url(images/nyhungrygrid.gif) no-repeat 0 0;
}

ul.rated li {

 /*ie5 mac doesn't like it if the list is floated\\*/
  float:left;
  /* end hide*/
  text-indent:-999em;
  font-size:9px;
}
ul.rated li.one a {left:0}
ul.rated li.two a {left:11px;}
ul.rated li.three a {left:22px;}
ul.rated li.four a {left:33px;}
ul.rated li.five a {left:44px;}

.nostar {background-position:0 0}
.onestar {background-position:0 -7px;}
.twostar {background-position:0 -14px;}
.threestar {background-position:0 -21px;}
.fourstar {background-position:0 -28px;}
.fivestar {background-position:0 -35px;}
/* totals */
.rating li.total{
	left:65px;
	background:none;
	top:-3px;
	right:-40px;
	/*left:90px; if you want them aligned left*/
	position:absolute;
	text-indent:0;
	font-size:93%;
}
#move{
margin-bottom:3em;
margin-left:4em;
}
#move h3 {

}
#move img{
width:270px;
height:160px;
margin-right:60px;
margin-bottom:2em;
float:left;


}
#move .rating24 {
margin-bottom:2em;
float:left;
margin-top:-8px;
margin-left:-4px;
}
#move .price{
margin-left:10px;
margin-right:1em;



}
#move .sug{
width:100px;
height:10px;
margin-left:0.5em;
margin-top:0px;
float:left;
}
#move  .sug1{
width:100px;
height:10px;
margin-left:23.4em;
margin-top:-20px;
margin-bottom:2em;

}

#move .details{
margin-top:-45px;
margin-left:35em;

}
#move .subdetails{
  margin-left:17em;
  margin-top:-9.4em;
  clear:right;
  float:left;
     
}
#move .subdetails li{
margin-bottom:6px;
}

#move .ratingandreview {
margin-top:130px;
margin-left:35em;
clear:right;

}
#move .moverating{
margin-left:35.5em;
margin-top:-30em;
clear:both;
}
#smallthumbs {
clear:both;
float:left;
}
#smallthumbs img {
width:50px;
height:50px;
margin-right:15px;;
}

#starrating {
margin:0;
font-size:12px;
font-weight:100;
float:left;
clear:left;
width:35px;
text-indent:0em;
margin-top:-6px;

}

#starrating2 {
margin:0;
font-size:12px;
font-weight:100;
float:left;
width:50px;
 
}



</style>
<div id="move">

<h3>American Bread</h3>
<img src="images/logopic.gif" alt="Loigo Pic" width="32" height="32" />

<div class="price">Price:</div>
<div class="sug1">10.95</div>

<div class="rating24">Rating:</div>
<div class="sug">

<ul class="rated fivestar" id="1">
  <li class="one">1</li>
  <li class="two">2</li>
  <li class="three">3</li>
  <li class="four">4</li>
  <li class="five">5</li>
</ul>

</div>
 <div class="details">Details:</div>
 
<div id="smallthumbs">
<img src="images/logopic5050.gif" alt="Angry face" width="32" height="32" />
<img src="images/logopic5050.gif" alt="Angry face" width="32" height="32" />
<img src="images/logopic5050.gif" alt="Angry face" width="32" height="32" />
<img src="images/logopic5050.gif" alt="Angry face" width="32" height="32" />

</div>
 <ul class="subdetails">
 <li>Colorado style</li>
 <li>Farm style</li>
 <li>Argentinian Style</li>
 </ul>

<div class="ratingandreview">Rating And Reviews:</div>
<div class="moverating">
	  <div id="starrating">1 Star</div>
	  <div id="starrating2">

	  <ul class="rating onestar">
	  <li class="one">1</li>
      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>

      <li class="total">[0]</li>
      </ul>
	  </div>
	  	  
	  <div id="starrating">2 Star</div>
	  <div id="starrating2">
	  <ul class="rating twostar">
	  <li class="one">1</li>

      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>
      <li class="total">[0]</li>
      </ul>

	  </div>
	  	  
	  <div id="starrating">3 Star</div>
	  <div id="starrating2">
	  <ul class="rating threestar">
	  <li class="one">1</li>
      <li class="two">2</li>
      <li class="three">3</li>

      <li class="four">4</li>
      <li class="five">5</li>
      <li class="total">[0]</li>
      </ul>
	  </div>
	  	  
	  <div id="starrating">4 Star</div>
	  <div id="starrating2">

	  <ul class="rating fourstar">
	  <li class="one">1</li>
      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>

      <li class="total">[0]</li>
      </ul>
	  </div>
	  	  
	  <div id="starrating">5 Star</div>
	  <div id="starrating2">
	  <ul class="rating fivestar">
	  <li class="one">1</li>

      <li class="two">2</li>
      <li class="three">3</li>
      <li class="four">4</li>
      <li class="five">5</li>
      <li class="total">[1]</li>
      </ul>

	  </div>
	  	  </div></div>

Some help here guys. I have built as above so far without any assurance of being correct. So far it is the moverating class is collapsing with some margin. I am trying to place it right below the ratingandreview class but some how it doesn’t move negative. As you can see I have assign a negative margin-top but it doesn’t move the div negative. It seem like it is collapsing with ratingandreview or smallthumbs. Any how pardon me I don’t know that much HTML structuring.

Thank you.

20

Hi, I assme you know the <li>s text are still being hidden because of text-indent…

But to answer your question, you have a cleared element, more specificially on hte left side. “#smallthumbs”. A floated element with a negative top margin clashing into a floated element, no matter how big the margin is it will stop once it reaches the floated element. You need to setup your site in columns, not just randomly floating things :slight_smile: