PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 29, 2020 4:10 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 10 posts ] 
Author Message
PostPosted: Fri Mar 28, 2014 4:33 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
I have a div, the same width as the large image above it.
The div is to display a selection of thumbnails to view the 'gallery' of images.

I need the images to line up, and tile. I'm doing three per row.
Trouble is, because of the width of the images, even if I add right margin to them to try and line the right one up to the right edge of the div (with the left one lined up left), it all goes wrong, but pushing the last image to the next line.

So:
a) is there a way to "justify" images in a div, so they just auto space out;
b) where you do float: right, and the DIV is set to text-align: left - can you text-align: center so they float: right, but start from the middle...??
So even if they don't quite match the right edge, they are vertically aligned to the image above?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Mar 28, 2014 3:45 pm 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
Are the thumbnails always the same size? If so then just float them left and set the margins. If they are different sizes then you are probably going to need to use Javascript to set the widths and margins.

_________________
(#10850)


Top
 Profile  
 
PostPosted: Sat Mar 29, 2014 3:06 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Always same size, but even adding a margin pixel by pixel, won't ever get the right one lined up.
Can it not be done as I suggested?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Sat Mar 29, 2014 12:09 pm 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
If the problem is the rightmost one wrapping then either increase the width of the containing div or have a different style for the end div that does not have margins.

_________________
(#10850)


Top
 Profile  
 
PostPosted: Mon Mar 31, 2014 3:03 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
But go back to my original question, as that would resolve this. It would make both sides even.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Mon Mar 31, 2014 10:42 am 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
What do you mean "both sides even"? I am assuming that you want N smaller images to display evenly spaced below a larger image.

_________________
(#10850)


Top
 Profile  
 
PostPosted: Mon Mar 31, 2014 10:47 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
I don't think it's at all possible to light the right edge up, without creating odd spacing in between the others in the row of four.
Therefore, I thought if I centre aligned it, and adjusted the margins as best as I can, then it will at least be vertically aligned.

If you do Float: left;, it starts at the left and appears to the right of each one.
Can it "start" from the centre, so they are centered...?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Mon Mar 31, 2014 11:10 am 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US
It is possible to line the right edge up if its width is divisible by the widths of the spacings. Otherwise something will need to be a different spacing. But if you want them to flow then you will need to calculate the right sized to make it work.

_________________
(#10850)


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 10:19 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
Yes. I just did something like that.
Every third image, there is no right margin. And the other are set just so, and it lines up.
BUT - can you still not do a 'float' and it start from the middle, and as it would appears, it goes to the right but is centered?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Apr 01, 2014 11:21 am 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13592
Location: New York, NY, US

_________________
(#10850)


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 12 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

Jump to:  
Powered by phpBB® Forum Software © phpBB Group