2 replies [Last post]
alphaville
alphaville's picture
Offline
newbie
Last seen: 2 years 47 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: 1 hour 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9259
Points: 3265

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

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

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

alphaville
alphaville's picture
Offline
newbie
Last seen: 2 years 47 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.