html/css problem

[damindor]

hello I am doing a webiste for fun and is nearly done with the Html part I still have to make it look cool.I would like to list ratings a certain game might get for example I have a pic of a 3 out of 5 stars rating I want to put it right next to the site that rates it.It like this 

 

<u2>Ratings:</u2>

<ul>

<li>GAMESPOT<img src="gamespot.jpg" width="20" height="20" style="float:right" /></li>

<li>IGN: 8.4 out of 10</li>

<li>METACRITIC: 4 out of 5</li>

</ul>

 

No I thought that one way of getting the pic right beside it was to float the pic right but then its on the other side of the page so I though I could decrease the width of the element.Surely there must be another way

 

Any andvice would be greatly apprecaited

[Seahorsepip Veteran]

Remove float on the site and add float left to the ratings.

[damindor]

Remove float on the site and add float left to the ratings.

I tried it but it floats the image on the left side I want it on the right side this is how the code looks now

 

<u2>Ratings:</u2>

<ul>

<li>GAMESPOT<img src="gamespot.jpg" width="20" height="20" style="float:left" /></li>

<li>IGN: 8.4 out of 10</li>

<li>METACRITIC: 4 out of 5</li>

</ul>

[LaP]

I'm not sure to understand what you want to do. Why do you even float the image ?

 

When you float the pic right it is on the other side of the page cause float ignores content that is not floated. So it will float to the right of the web site. For it to float to the inner right of the li the li and ul would not to be floated too.

 

 

 I have a pic of a 3 out of 5 stars rating I want to put it right next to the site that rates it

 

Why don't you just put the image there ?

[Seahorsepip Veteran]

This? http://jsfiddle.net/3XFjH/

 

@LaP

 

He's using ul so he has to use float or display: inline to put the items next to each other.

 

But yeah also using inline is a option and maybe better: http://jsfiddle.net/3XFjH/1/

[LaP]

This? http://jsfiddle.net/3XFjH/

 

@LaP

 

He's using ul so he has to use float or display: inline to put the items next to each other.

 

Yeah but the image will still appear right next to the text inside the li. If the li has a fixed width with inline-block then yeah he might want to float it right but then if it appears on the other side of the web site it means the li and ul are not floated.

 

It is not clear ...

 

[edit]

 

Ok he might be using inline-block or inline to display the li on a line so yeah in this case the float: right will float the image to the right side of the page.

 

Having the whole css would help ...

 

Anyway if this is the case there's 2 options.

 

Float the li and ul left and float the image right.

Display:inline-block for the li, position relative for the li and position:absolute for the image with right:0.

[damindor]

thank you for the replies let me clarify.This is how I want it to look

 

Gamespot:(here is a pic of a rating for example a pic of 3 out of 5 stars the text I put in there would have been better if it was placed in comments)

 

I'm sorry for not clarifying it from the start please any help you can give will be apprecaited

 

so to make sure you have

 

<ul>

<li>gamespot(pic)</li>

</ul>

[Crimson Rain]

Use css. Put the image as li's background-image. Position as necessary.

[damindor]

Use css. Put the image as li's background-image. Position as necessary.

clever i try that tomorrow 

[LaP]

clever i try that tomorrow 

 

It is clever but i don't think it is WAI compliant. You should technically use background for background images only i.e. images which mean nothing and can be skipped by screen readers and such without the user lacking any vital information.

[Crimson Rain]

It is clever but i don't think it is WAI compliant. You should technically use background for background images only i.e. images which mean nothing and can be skipped by screen readers and such without the user lacking any vital information.

He already has the vital information in text. Image is just fluff.

 

Also, someone who is having trouble with just this simple stuff, there is no point for him to worry or even think about WAI or whatever else is out there. At least, not at this point.

[Crimson Rain]

btw, another way to do it is this: http://www.microsoft.com/surface/en-us/support/install-update-activate/2-update-history

 

look at the link on right that says talk to a live agent.

[damindor]

I decided to crop the image using photoshop or whatever instead of trying to adjust height and width.If I get the image the right size how else then would you put it directly next to the text?