Back To Website Design Forum

Justify Images

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post November 27th, 2007, 9:51 pm

I have two rows of images, one has 4 and the other has 3. I want to be able to spread the images out to the sides of the container and keep equal spacing between the images for each row.

Basicly I want to replicate what a table does by defualt.

Quote:
[]__[]__[]__[]
[]____[]___[]
#define NULL (::rand() % 2)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 27th, 2007, 9:51 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 27th, 2007, 11:49 pm

maybe something like:
CSS:
Code: [ Select ]
div.row1
{
width:25%;
padding:0px;
margin:0px;
float:left;
}
div.row2col1
{
clear:both;
width:33.3%
padding:0px;
margin:0px;
float:left;
}
div.row2
{
width:33.3%
padding:0px;
margin:0px;
float:left;
}
  1. div.row1
  2. {
  3. width:25%;
  4. padding:0px;
  5. margin:0px;
  6. float:left;
  7. }
  8. div.row2col1
  9. {
  10. clear:both;
  11. width:33.3%
  12. padding:0px;
  13. margin:0px;
  14. float:left;
  15. }
  16. div.row2
  17. {
  18. width:33.3%
  19. padding:0px;
  20. margin:0px;
  21. float:left;
  22. }

HTML:
Code: [ Select ]
<body>
<div class='row1'><img src='image1.jpg' /></div>
<div class='row1'><img src='image2.jpg' /></div>
<div class='row1'><img src='image3.jpg' /></div>
<div class='row1'><img src='image4.jpg' /></div>
<div class='row2col1'><img src='image5.jpg' /></div>
<div class='row2'><img src='image6.jpg' /></div>
<div class='row2'><img src='image7.jpg' /></div>
</body>
  1. <body>
  2. <div class='row1'><img src='image1.jpg' /></div>
  3. <div class='row1'><img src='image2.jpg' /></div>
  4. <div class='row1'><img src='image3.jpg' /></div>
  5. <div class='row1'><img src='image4.jpg' /></div>
  6. <div class='row2col1'><img src='image5.jpg' /></div>
  7. <div class='row2'><img src='image6.jpg' /></div>
  8. <div class='row2'><img src='image7.jpg' /></div>
  9. </body>


I haven't tested this, but I think it should work ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post November 28th, 2007, 5:26 am

I'm not too sure what you mean when you say tables do that by default, since I can't replicate what you have in your diagram - maybe your picture is misleading?

Anyway, going strictly by your text-image I came up with this:



Code: [ Select ]
<div id="gall">
<img src="test.jpg" alt="" width="114" height="104" />
<img src="test.jpg" alt="" width="114" height="104" />
<img src="test.jpg" alt="" width="114" height="104" />
<img src="test.jpg" alt="" width="114" height="104" />

<img class="cent" src="test.jpg" alt="" width="114" height="104" />
<img class="cent" src="test.jpg" alt="" width="114" height="104" />
<img class="centx" src="test.jpg" alt="" width="114" height="104" />

</div>
  1. <div id="gall">
  2. <img src="test.jpg" alt="" width="114" height="104" />
  3. <img src="test.jpg" alt="" width="114" height="104" />
  4. <img src="test.jpg" alt="" width="114" height="104" />
  5. <img src="test.jpg" alt="" width="114" height="104" />
  7. <img class="cent" src="test.jpg" alt="" width="114" height="104" />
  8. <img class="cent" src="test.jpg" alt="" width="114" height="104" />
  9. <img class="centx" src="test.jpg" alt="" width="114" height="104" />
  11. </div>


Code: [ Select ]
#gall {width: 480px; border: 1px solid #000}
.cent {margin-right: 64px}
.centx {margin-right: 0px}
  1. #gall {width: 480px; border: 1px solid #000}
  2. .cent {margin-right: 64px}
  3. .centx {margin-right: 0px}



Which all ends up looking like this:
Image


Basically I'm using the width of the container to constrain the top row of images and then controlling the right-margin on the images in the bottom row to get the spacing to match that of your diagram.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post November 28th, 2007, 5:36 am

ps

Or you can just have two rows of images, each row in its own div.
On the second row you can use {text-align: justify}, which results in exactly the same thing as I have above. A lot simpler.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post November 29th, 2007, 4:33 pm

I tried using justify but it didnt seem to work. I dont really want to have set margins because I would lie it to spread any number of images out equaly.
#define NULL (::rand() % 2)
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post November 29th, 2007, 6:08 pm

How about this...

The css...
Code: [ Select ]
.imgcontainer {
 width: 600px;
 height: auto;
}
.imgs {
 display: inline;
 margin-left: auto;
 margin-right: auto;
}
  1. .imgcontainer {
  2.  width: 600px;
  3.  height: auto;
  4. }
  5. .imgs {
  6.  display: inline;
  7.  margin-left: auto;
  8.  margin-right: auto;
  9. }

And the HTML is...
Code: [ Select ]
<div class="imgcontainter">
<div class="imgs"><img src="test.jpg" alt="" /></div>
<div class="imgs"><img src="test.jpg" alt="" /></div>
<div class="imgs"><img src="test.jpg" alt="" /></div>
<div class="imgs"><img src="test.jpg" alt="" /></div>
</div>
  1. <div class="imgcontainter">
  2. <div class="imgs"><img src="test.jpg" alt="" /></div>
  3. <div class="imgs"><img src="test.jpg" alt="" /></div>
  4. <div class="imgs"><img src="test.jpg" alt="" /></div>
  5. <div class="imgs"><img src="test.jpg" alt="" /></div>
  6. </div>


I haven't tested it but I'm sure it would would... at least I think that it should work :o

At least it worked on my other stuff... :lol:
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Joined: May 22, 2004
  • Posts: 3415
  • Loc: Richland, WA
  • Status: Offline

Post December 1st, 2007, 1:27 pm

No, that doesnt work either. It equal spaces images but if I have four images on the first row and three on the second, the three below line up with the first three on the top. Im looking for equal spacing of all images to the edge of the container.
#define NULL (::rand() % 2)
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post December 1st, 2007, 3:35 pm

I'll probably receive some flak for saying this, but if it's at least close to the right context, why not just actually use a table?
The Beer Monocle. Classy.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post December 2nd, 2007, 9:17 am

spork wrote:
I'll probably receive some flak for saying this, but if it's at least close to the right context, why not just actually use a table?

I was thinking the same thing. I mean, you don't want to use tables for the whole layout of your website, but using tables to display data or images within a website is perfectly acceptable. That's what they were made for after all.
phoenix web design
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post December 2nd, 2007, 4:44 pm

Using tables is okay if you use them correctly... :)
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 98 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.