Fri, 2011-12-30 15:45
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.
Sat, 2011-12-31 00:00
#1
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
Sat, 2011-12-31 14:15
#2
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.