Unobstructive image gallery listing using CSS

Posted by Sunil | Filed under Web Development

CSS development requires some special treatment when it developing for a CMS website. Usually while creating image gallery, video gallery or some type of sitemap design, it needs some extra care. Otherwise it will become mess up the entire template. Some designs are looks like this… 

Image Gallery

Image Gallery

This gallery is simple. It has fixed width and height. We can easily style this by putting this code. 

ul.gallery, ul.gallery li, ul.gallery p{
margin:0;
padding:0;
list-style:none;
font:12px/16px Arial, Helvetica, Verdana;
}

ul.gallery li{
float:left;
width:80px;
height:80px;
margin:20px 20px 0 0;
}

Enough! Your gallery is ready!!

But!!!

Assume that each flower have a lot of description. Or the flowers name is little bit bigger. How we can manage with CSS? if the description is little bit lengthy it may looks like this… 

Image Gallery Crapped

Image Gallery Crapped

Here comes a simple solution to prevent this.
 

Ul.gallery li{
margin:20px 20px 0 0;
width: 80px;
min-height: 80px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
_height: 80px;
}

I am now trying to explain this code a little bit. I hope you are an intermediate level of CSS programmer. So I am not explaining each line of code. You people may be doubtful about the following properties.

display:-moz-inline-stack; what does it mean? Mozilla Firefox2 doesn’t support inline-block at all, but they have -moz-inline-stack which is about the same. That’s why we are using –moz-inline-stack.

The next line code is display:inline-block. As it sees it is an inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

zoom:1 Zoom property is non existent property in modern browsers.  But here we are using this for fix has layout problem of Internet Explorer. It will fix the absence of inline-block in Internet Explorer. *display:inline is also needs to fix this.

Hope you know the margin, width, min-height, vertical-align, properties of CSS. And the underscore hack of ie6.

And definitely it is not a valid CSS. But it will work with most of the browsers.

Here goes the final code

CSS

ul.gallery, ul.gallery li, ul.gallery p{
margin:0;
padding:0;
list-style:none;
font:12px/16px Arial, Helvetica, Verdana;
}

ul.gallery p{
text-align:center;
}

ul.gallery li{
margin:20px 20px 0 0;
width: 80px;
min-height: 80px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
_height: 80px;
}

HTML

    

  • Flower1
    Yellow Rose
    • 
	
  • Flower2Red Rose!! waooo it is a nice rose
    • 
	
  • Flower3
    Flower
    • 
	
  • Flower1
    Yellow Rose
    • 
	
  • Flower2
    Red Rose
    • 
	
  • Flower3
    Flower
    • 
	
  • Flower1
    Yellow Rose
    • 
	
  • Flower2
    Red Rose
    • 
	
  • Flower3
    Flower
    •

 

Download the source code

Tags: , , , , , ,

Permalink | Comments (2) | March 1, 2009

2 Responses to “Unobstructive image gallery listing using CSS”

  1. How to create a simple navigation using CSS and XHTML | Sunil's blog Says:
    April 12th, 2009 at 12:11 am

    [...] I wrote about the Unobstructive image gallery listing using CSS, many people asked me to post some tutorial on this blog. So that will be helpful for others. So I [...]

  2. Myhtmlworld completed 6 months | Sunil's blog Says:
    May 2nd, 2009 at 4:30 am

    [...] Unobstructive image gallery listing using CSS [...]

Leave a Reply