CODEWITHSUNDEEP
csslayout
techarch
techarch

Reputation: 1141

image on image layout with CSS

I have a image that I would like to position other images on. For example players on a basket ball court

What is the best way to do this with CSS, I am tempted to do this with tables but fear there maybe a better solution out there

Upvotes: 2

Views: 226

Answers (3)

mylesagray
mylesagray

Reputation: 8869

If you use tables I'll castrate you :)

So on with divs and CSS:

HTML:

<div id="bb-court">
<div id="player-1">
</div>
</div>

CSS:

#bb-court {
    z-index:1;
}

#player-1 {
    z-index:2;
    background-image: url();
    position: absolute;
    margin: top right bottom left; /* All with reference to parent */
}

Upvotes: 4

Bloodshot
Bloodshot

Reputation: 62

You can create multiple divs and use css to style it kind of like this (may not be accurate as I am just going off the top of my head)

<div class="court">
  <div class="player"></div>
  <div class="ball"></div>
</div>

#css

.court {
   float: left;
   position: relative;
   background: url(../images/court.png) no-repeat;
   width: 400px;
   height: 200px;
}

.court .player {
   position: absolute;
   left: 5px;
   top: 10px;
 }

 .court .ball {
   position: absolute;
   left: 5px
   top: 10px;
 }

Remember this is a quick mock, I would suggest going down this route and using Firebug for firefox to debug and get the positioning you want.

Upvotes: 1

kapa
kapa

Reputation: 78691

There are only better solutions than tables for this :).

What you're looking for is called absolute positioning. It means that you can grab an element, take it out of the document flow and define its coordinates (left, top). By default, 0,0 coordinates start at the top left corner of the browser area.

Let me give you an easy example. Here we define everything as divs:

<div id="court">
  <div class="player" id="john_smith">
  <div class="player" id="gunter_kreitzsch">
</div>

And the CSS that goes with it:

#court {
  position: relative; /* makes the top left corner of court 0,0 */
  width: 500px; height: 500px; /* define size */
  background-image: url(court.jpg);
}

.player { /* definition for player divs */
  position: absolute;
  width: 20px; height: 100px;
}

#john_smith { /* individual player definition */
  top: 30px; left: 50px; /* defining where the player should be */
  background-image : url(john_smith.png);
}

Upvotes: 3

Related Questions