...

View Full Version : positioning images



j05hr
07-05-2010, 01:27 PM
How can I make the image on the right be the same height as the image on the left?

http://printco.org/shop.html

What would be the easiest way to code this in CSS?

http://img3.imageshack.us/img3/9894/printcoshop.jpg (http://img3.imageshack.us/i/printcoshop.jpg/)

Thanks,

Josh

ahayzen
07-05-2010, 03:17 PM
In you HTML add height attributes.



<a href="#"><img src="images/businessCards1.jpg" alt="Business Card Offer" style="height:264px;" /></a>
<a href="#"><img src="images/letterheads.jpg" alt="Letterheads Offer" style="height:264px;" /></a>


Then just change the height accordingly. Also you may want to add the width attributes.

Andy

j05hr
07-05-2010, 07:14 PM
Thanks for the reply but this doesn't make the right hand side image align with the bigger image at the top. You are just setting the height of the image?

mbaker
07-05-2010, 08:07 PM
How does the image in your original post relate to what you want on your shop page?

In the image in your original post there is one large image top left and two smaller images on top of each other top right. Do you want to achieve the same layout on your shop page?

On the other hand if the image in your original post does not relate to what you want, how do you want the two images on your shop page to change in relation to each other.

Do you want them both the same height as the left hand image, but keep their existing widths?

Do you want them both the same height as the left hand image, but the right hand image to also be stretched to keep the same aspect ratio? If this, what to do you want to do about the image subsequently extending beyond the white background?

Do you want the left hand image to be reduced in size, the right hand image expanded in size, so that they are both the same height, and remain within the white background?

j05hr
07-06-2010, 12:38 AM
How does the image in your original post relate to what you want on your shop page?

In the image in your original post there is one large image top left and two smaller images on top of each other top right. Do you want to achieve the same layout on your shop page?

On the other hand if the image in your original post does not relate to what you want, how do you want the two images on your shop page to change in relation to each other.

Do you want them both the same height as the left hand image, but keep their existing widths?

Do you want them both the same height as the left hand image, but the right hand image to also be stretched to keep the same aspect ratio? If this, what to do you want to do about the image subsequently extending beyond the white background?

Do you want the left hand image to be reduced in size, the right hand image expanded in size, so that they are both the same height, and remain within the white background?

Hi,

Thanks for your reply.

Sorry for the confusion, I want it to exactly the same as the actual image posted. The small image I have there I want it to be in line with the top of the larger image so I can then post another image underneath it.

I hope I have answered your question.

Regards,
Josh

mbaker
07-06-2010, 08:58 AM
Have you tried float:left on your images. Something like:

#shop img {
float:left;
}

j05hr
07-06-2010, 11:09 AM
Have you tried float:left on your images. Something like:

#shop img {
float:left;
}

Thanks, that worked perfectly. Can't believe how easily they went into place after that. I floated my div left but that didn't make it work, I guess the images individually had to be floated left? If that's not the answer please can you explain the answer so I can learn from this.

Thanks again,
Josh

mbaker
07-06-2010, 03:18 PM
float:left (and float:right) are applied to the element / id / class that they are defined for.

In this instance all of the images are floated left in their containing div.

The first image is placed at the top of the div on the left. If there is sufficient width available the next image is placed at the top of the div to the immediate right of the first image, otherwise it is place below the first image on the left of the div.

Subsequent images are placed as high in the containing div as possible.

Provided you design / make your images of sizes that will stack up neatly, use sufficient of the div width so that following images are moved down the page, and list them in the correct order, they will stack up nicely on your page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum