1 Replies - 790 Views - Last Post: 22 January 2013 - 09:34 AM

#1 Addio569   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 316
  • Joined: 26-November 08

how do I positon an image within a div without using background-image

Posted 21 January 2013 - 07:19 AM

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" />
	<div class="desc">
	Tim Krul

and the css I have used to style the div:

  background: #BBBBBB;
  border:2px solid #000000;
div.img img
  //border:1px solid #ffffff;
div.img a:hover img
  border:1px solid #0000ff;
  font: normal 2em Impact, "Arial Narrow", sans-serif;

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:

  display: inline;
  float: right;

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:


Uploaded with ImageShack.us

please help


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

Is This A Good Question/Topic? 0
  • +

Replies To: how do I positon an image within a div without using background-image

#2 FerretHolmes   User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: how do I positon an image within a div without using background-image

Posted 22 January 2013 - 09:34 AM

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.
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; 

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1