2 replies [Last post]
alphaville
alphaville's picture
Offline
newbie
Last seen: 2 years 34 weeks ago
Timezone: GMT+2
Joined: 2011-12-30
Posts: 2
Points: 3

I am planing to create a page with thumbnails. I am willing to have it's right and left margin sizes are fixed, only margins between thumbnails are variable/float. I am able to do this in flash but I don't know how to achieve that in css.

I hope there is some way to do it.

Thank you.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9172
Points: 3162

First, a gallery is a list,

First, a gallery is a list, so use a list structure:

<ul>
  <li><img src="..." />
  <li><img src="..." />
  <li><img src="..." />
  <li><img src="..." />
  <li><img src="..." />
  ...
</ul>

You could float these list items, but that raises issues should the t-nails be of differing heights, or if you add captions that might vary in the number of lines. Floats are not friendly towards centering or making justified lines.

The robust solution, then, is to display the list items as inline-block and set the text alignment in the container.

ul {
    margin-left: 40px;
    padding: 0;  /*removes the default padding*/
    text-align: justify; 
    }
 
li {
    display: inline-block;
    }

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

alphaville
alphaville's picture
Offline
newbie
Last seen: 2 years 34 weeks ago
Timezone: GMT+2
Joined: 2011-12-30
Posts: 2
Points: 3

Gary, thank you for your

Gary, thank you for your detailed explanation. I am quite new to Css. I think I need to learn some fundamentals to able to understand your explanation. I will try to do it in following days.

Thank you very much again.