CSS Image Gallery / Bookshelf
I found a CSS Gallery somewhere on the web few days (I can’t find the link to that site, If found I will update the link here). It was pretty simple & starlight forward CSS to build an image gallery. Recently, I needed to put all supporting articles on BabyMagic in an easy navigation, Modified it a bit and out it under a rounded DIV’s. I wanted to create a bookshelf kind of UI so that anyone can easily navigate through the documents. A live demo is up, click the image at the end of this post see the demo. The good thing about this CSS Gallery is there’s no JS/AJAX, all pure CSS sweetness & it looks great! All the used images can be downloaded at Demo.
Here are the CSS & XHTML I used for it…
CSS for the Gallery
1: #gallery {
2: padding:0;
3: margin:0 auto;
4: list-style-type:none;
5: overflow:hidden;
6: width:700px;
7: height:100px;
8: border:0px solid #888;
9: background:#fff url(../images/win_backh.gif);
10: }
11: #gallery li {
12: float:left;
13: }
14: #gallery li a {
15: display:block;
16: height:100px;
17: width:24px;
18: overflow:hidden;
19: float:left;
20: text-decoration:none;
21: border-right:1px solid #fff;
22: cursor:default;
23: }
24: #gallery li a img {border:0;
25: }
26: #gallery li a:hover {
27: background:#eee;
28: width:100px;
29: }
CSS for the Rounded DIVs
1: .search_gallery {
2: text-align:left;
3: width:730px;
4: margin-left:35px;
5: position:relative;
6: }
7: .search_gallery .head {
8: background-image:url(../images/babytop.gif);
9: background-repeat:no-repeat;
10: width:100%;
11: height:35px;
12: }
13: .search_gallery .body {
14: background-image:url(../images/babyrepeat.gif);
15: background-repeat:repeat-y;
16: width:100%;
17: height:100%;
18: text-align:left;
19: padding-left:0px;
20: padding-right:0px;
21: }
22: .search_gallery .foot2 {
23: background-image:url(../images/foot1.gif);
24: background-repeat:no-repeat;
25: height:16px;
26: }
XHTML for the Gallery
1: <div class="search_gallery">
2: <div class="head"></div>
3: <div class="body">
4:
5: <ul id="gallery">
6:
7: <li><a href="suppdocs/newborn.html"><img src="imagewin00.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>
8:
9: <li><a href="suppdocs/breastfeeding.html"><img src="imagewin1.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>
10:
11: <li><a href="suppdocs/breastfeeding_tech.html"><img src="imagewin2.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
12:
13: <li><a href="suppdocs/changesinbody.html"><img src="imagewin6.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
14:
15: <li><a href="suppdocs/comonprobs2.html"><img src="imagewin5.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
16:
17: <li><a href="suppdocs/comonprobs.html"><img src="imagewin4.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
18: </ul>
19:
20: <div class="foot2"> </div>
21: </div></div>
Rashmi said,
Wrote on May 22, 2008 @ 10:58 pm
Nice guide… I’m trying it.
I have another idea with it.
Horizontal JavaScrip SlideMenu | ShekLOG said,
Wrote on June 3, 2008 @ 7:46 am
[...] something more sweeter than the simple CSS-only Horizontal Bookshelf I posted last week. Mike wrote a versatile 1kb horizontal accordion script can be used for [...]