...

View Full Version : Please help the noob with positioning



kynocht
03-07-2005, 11:38 AM
Please help the noob!

I am having trouble getting images to position correctly with CSS/HTML.

I want to position 3 photos (size 150x113) within a blank space to the right of a short paragraph.

HTML Code looks like this (Strict DOCTYPE):

<div class="roleimage1"><img src="placeholder.jpg" alt="placeholder"></div>
<div class="roleimage2"><img src="placeholder.jpg" alt="placeholder"></div>
<div class="roleimage3"><img src="placeholder.jpg" alt="placeholder"></div>

<p>
The companies are spread out around Melbourne:<br />
<a href="headquarters.html"><span class="wep">Headquarters (HQ):</span></a> Hawthorn<br />
<a href="acoy.html"><span class="wep">Alpha (A) company:</span></a> Sunshine<br />
<a href="bcoy.html"><span class="wep">Bravo (B) company:</span></a> Surrey Hills<br />
<a href="ccoy.html"><span class="wep">Charlie (C) company:</span></a> Sandringham<br />
<a href="dcoy.html"><span class="wep">Delta (D) company:</span></a> McLeod<br />
<a href="sptcoy.html"><span class="wep">Support (Spt) company:</span></a> Moonee Ponds<br />
</p>

First, I tried this CSS:

.roleimage1 {
float: right;
width: 150px;
}

.roleimage2 {
float: right;
width: 150px;
}

.roleimage3 {
float: right;
width: 150px;
}

However, this shoved them all to the right hand side. Not what I wanted.

Then I tried this:

.roleimage1 {
float: right;
width: 150px;
margin: 0 150px 0 0;
}

.roleimage2 {
float: right;
width: 150px;
margin: 0 30px 0 0;
}

.roleimage3 {
float: right;
width: 150px;
margin: 0 30px 0 0;
}

This puts them in the position I want, at 1024 x 768. But when you get to 800 x 600, it squashes everything up, and any higher it's too spaced out. How can I get the images to stay evenly spaced, slightly left of the centre, and work in different resolutions using CSS? Help me, please!

ronaldb66
03-07-2005, 12:17 PM
It would really help to see what this is supposed to look like: can you supply a link to an online page, or else make a screen shot /sketch of the desired effect?

kynocht
03-07-2005, 12:29 PM
The page is here:

http://www.users.on.net/~kynocht/role.html

I want the 3 images to go to the right of this paragraph:

"The companies are spread out around Melbourne:
Headquarters (HQ): Hawthorn
Alpha (A) company: Sunshine
Bravo (B) company: Surrey Hills
Charlie (C) company: Sandringham
Delta (D) company: McLeod
Support (Spt) company: Moonee Ponds"

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum