| home / programming / css_gallery2 /1 |    [previous][next] |
|
|
|
I'll style the unordered list to removing the bullets and the indentation.
Browsers have different ways of doing this, Internet Explorer and Opera use margin values for the indentation whereas Mozilla/Netscape/Firefox all use padding values, so to cater for this I need to style the list as follows.
/* Removing the list bullets and indentation */
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
list-style-type:none;
background:#888;
}
|
The bullet point are gone and the grey background of the <ul> is visible. In Internet Explorer the grey background will stretched in height to enclose all the images, whereas in other browsers the images will overflow the grey background.
The initial size of the images was calculated to be 64px x 48px to act as 'thumbnails' around the outside of the display area.
However, I've decided to have a 1px border around each image to act as a separator. To do this I need to reduce the actual image size to 62px x 46px and the styling will be as follows:
/* Resize the images to 64px x 48px */
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
The images are now reduced to 62px x 46px with the 1px border being the same color as the background.
We now move on to positioning the thumbnail images around the edge of the display area.
To do this we will style the <li> tags.
Step 6a - moves the top line of thumbnails into place
/* Default style for list items */
#gallery li {
width:64px;
height:48px;
float:left;
z-index:100;
}
The images are now grouped in 4 rows with a blank space between image 17 and 18.
/* Styling the left side of the display area */
#gallery li.lft {
float:left;
clear:left;
}
It's a bit of a jumble, but the left side of the display area is now filled.
Internet Explorer adds a small space vertically between each image but that will be taken care of later.
/* Styling the right side of the display area */
#gallery li.rgt {
float:right;
clear:right;
}
If you use Internet Explorer you'll see that the top, left and right images are in the correct place but the bottom row is not at the bottom. All other browsers have the images correctly positioned
This is where that extra list item (class="pad") is brought into play. We can style this to force the bottom row of images into place.
Step 6d - moves the bottom row of thumbnails into place in Internet Explorer
/* Force the bottom row of images into place (IE only) */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}
The bottom row of images are now in place but we still have gaps between the horizontal row of images in Internet Explorer.
/* Getting rid of the image gaps */
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
| home / programming / css_gallery2 /1 | [previous][next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: Sept 12, 2005
URL: http://webreference.com/programming/css_gallery2/1
