[Addio569]

hi I am creating a website just for learning purposes, I want to better my CSS skills so I thought I'd make a website about my beloved Newcastle united

I have created a page that hold information about players, this is a snippet of code:

<div class="img">
	<a target="_blank" href="klematis_big.htm">
    <img src="images/krul.gif" alt="Tim Krul" width="141" height="141" />
	</a>
	<div class="desc">
	Tim Krul
	</div>

and the css I have used to style the div:

div.img
  {
  background: #BBBBBB;
  margin:6px;
  border:2px solid #000000;
  height:200px;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  //border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  font: normal 2em Impact, "Arial Narrow", sans-serif;
  text-align:left;
  font-weight:normal;
  width:120px;
  margin:2px;
  }

I want to place a flag next to each players name to show nationality, first off which would be the best way to do this?

I tried creating another class to place a flag next to the name but I want the flag to the right of the name but float doesn't seem to be working, I think it has something to do with the inheritance, but not sure.

I tried this:

 div.flag
  {
  display: inline;
  float: right;
  height:60px;
  width:60px;
  }

but the flag stays in the same position, I've tried margins and padding but it doesn't seem to be doing anything!

an example of what I'm trying to achieve, on the left how it is presently and on the right how I want it to look:

[IMG=http://img252.imageshack.us/img252/10/exampleij.png][/IMG]




Uploaded with ImageShack.us

please help

thanks

This post has been edited by Addio569: 21 January 2013 - 07:32 AM

[FerretHolmes]

From where I am right now I can't test out the code to achieve exactly what you are looking for. However, I do know that you can use images in place of bullets in a list using css. This could achieve to an extent what you're looking for, if nothing else will just be knowledge for future projects.

This code should be cross-browser compatible.

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}