Reece S — Fri, 30 Nov 2007 13:54:25 +0000

This is just a rough example of a code I made to do exactly what you want. but you will need to add your own attributes and properties to complete it, you cannot just copy and paste. I recommend using this as a guide, rather than a code.

Quote: #img1 {
top: 150px; // Keep the "top" identical on all the images.
left: 300px; // If you images are 100px width x 100px height.
}

#img2 {
top: 150px;
left: 420px;
}

#img3 {
top: 150px;
left: 540px;
}

#img4 {
top: 150px;
left: 660px;
}

Let us know if you need any more help.
If you want,k you could always try W3 Schools.
http://www.w3schools.com/css/default.asp

webwiz — Thu, 29 Nov 2007 01:51:46 +0000

Perhaps I'm a bit late for this, but there is a tutorial at css.maxdesign.com. If that is not suitable, try the rest of the "Floatutorials".

calculator — Mon, 26 Nov 2007 17:03:30 +0000

you missed the semi-column after the 150px;

BTW using

#apollo li{
  width:18.9%;
  float:left;
  text-align:center;
  padding:0 0 100px 0;
  margin-right:1%;
  background-position:50% 100%;
  background-repeat:no-repeat;
}

seem to work as well- I've got the css edit toolbar with firefox and can see it work

Trinitrotoluene — Mon, 26 Nov 2007 16:48:38 +0000

Tried that, didn't work !

calculator — Mon, 26 Nov 2007 16:43:48 +0000

ok then try a width of 150px instead and also add a clearing p after the list.

You can remove the #apollo, #apollo li{ margin:0; padding:0; }, I checked your code and you do the *{ margin:0; padding:0; }

Trinitrotoluene — Mon, 26 Nov 2007 16:39:24 +0000

Hi Calculator!

Thanks once again. The only problem now is they are stacking instead of side by side. I'm in firefox but I changed the width anyway and they are still stacking!

Thanks again pal

calculator — Mon, 26 Nov 2007 16:24:38 +0000

Hi Trinitrotoluene,
Cool, so here's the code for it

Let's say your image is a 100px square, what you would get is:
in the html

<ul id="apollo">
<li id="ap1">Apollo 1</li>
<li id="ap1">Apollo 2</li>
<li id="ap1">Apollo 3</li>
<li id="ap1">Apollo 4</li>
<li id="ap1">Apollo 5</li>
</ul>

and in your CSS:

#apollo, #apollo li{margin:0; padding:0; }
#apollo li{ width:19% float:left; text-align:center; padding:0 0 100px 0; margin-right:1%; background-position:50% 100%; background-repeat:no-repeat; }
#ap1{ background-image:url("/missionbadges/apollo1badge.png"); }
#ap2{ background-image:url("/missionbadges/apollo2badge.png"); }
#ap3{ background-image:url("/missionbadges/apollo3badge.png"); }
#ap4{ background-image:url("/missionbadges/apollo4badge.png"); }
#ap5{ background-image:url("/missionbadges/apollo5badge.png"); }

If the blocks are stacked one above the other and not one next to each other change the width 19% to 18.9% - IE6 - flunked maths and the box model exam

Hope this helps.

Trinitrotoluene — Mon, 26 Nov 2007 14:44:37 +0000

http://img255.imageshack.us/img255/7180/mockupyv6.jpg

That's how I'd like it! Once again thanks for all your help and advice

calculator — Mon, 26 Nov 2007 14:02:56 +0000

Hi Trinitrotoluene,

I am confused about what you want

Are you after something like

[image]Apollo 1 [image] Apollo 2 [image]Apollo 3 [image] Apollo 4

If that's the case, using the model before, add the following to the .imgbg class

width:250px;
float:left;

if the above is not what you want, could you make a picture - or find an example - of what you want to achieve.

Trinitrotoluene — Mon, 26 Nov 2007 13:25:56 +0000

Thank you calculator! Unfortunately I can't seem to get them to stay on one line. Ideally I need four next to each other