• 0
Sign in to follow this  
Followers 0

html/css problem

Question

Posted

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

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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>

Share this post


Link to post
Share on other sites
  • 0

Posted

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 ?

Share this post


Link to post
Share on other sites
  • 0

Posted

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/

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

Share this post


Link to post
Share on other sites
  • 0

Posted

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>

Share this post


Link to post
Share on other sites
  • 0

Posted

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

Share this post


Link to post
Share on other sites
  • 0

Posted

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

clever i try that tomorrow 

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted

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.

Share this post


Link to post
Share on other sites
  • 0

Posted

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.