CSS Quote
Original: CSS gallery layout-smells like a table
Translated from: Http://dnevnikeklektika.com/en/css-gallery-layout-en
Translator's words: There really is no time word translation, will be the main part of the effect chart
Structure Code <ul class= "Gallery" >
<li><a href= "#" title= "Klik za veu sliku" ></a></li>
<li><a href= "#" title= "Klik za veu sliku" ></a></li>
.
.
.
Rinse and repeat for sixteen images
</ul>
Note: Although it is a simple unordered list, but has 4 layers of nesting, ul Li a img, have these four layers, basically meet the expansion of your design style.
Style css.gallery{
margin:0; padding:0;
Overflow:hidden; * * Clears the floats * *
width:100%; /* IE and older Opera fix for clearing, they need a dimension *
List-style:none;
}
. Gallery li{
Float:left;
Display:inline; * For IE-so it doesn ' t double the 1% left margin * *
width:23.8%;
margin:0 0 10px 1%; padding:10px 0;
height:83px; /* Height of IMG + 2 times 3px padding + 2 times 1px border = 83px * *
position:relative; /* This is the key * *
Background:url (45degree.png);
}
. Gallery A,
. Gallery img{
Display:block;
width:100%;
}
A img{Border:none}/* A small fix * *
. Gallery A:link,
. Gallery a:visited,
. Gallery A:focus,
. Gallery A:hover,
. Gallery a:active{
padding:3px;
Background: #eeefef;
width:75px; height:75px;
border:1px solid #eeefef; /* We Blend the border with the BG, as if it isn ' t there * *
Position:absolute; top:50%; left:50%; /* Position it so that this image ' s top left corner are in the center of the ' list item */
margin:-41px 0 0-41px; /* Pull the image into position with negative margins (margins value is half of the width of the image) * *
}
. Gallery a:hover{
Border-color: #dfdfdf;
}
* Are all optional, for decoration purpouses only * *
. gallery{
border-bottom:2px solid #000;
padding-bottom:10px;
margin-top:10px;
}
Note: Note text has been made clear, the technology involved include, clear float, known width and height elements of the vertical center, ie double patch hack and so on.
here is the model preview
