<!doctype HTML public '-//w3c//dtd HTML 4.01//en ' http://www.w3.org/tr/html4/strict.dtd ' > <ptml> <pead > <title>css List Grid View layout</title> <style> body{font-family:arial; Text-align:center; } p{}. img-grid{width:603px; Margin:auto; Overflow:hidden; position:relative; Border:solid 20px #CCCCCC; }. Img-grid h3{padding:0 0 12px 0; Background: #ccc; margin:0; Font:normal normal Bold 3em/normal "Georgia"; Letter-spacing:-0.1em; Text-align:center; }. Img-grid ul{list-style-type:none; margin:-1px 0 0-1px; padding:0; width:100%; border-width:0px 1px 0 0; position:relative; }. Img-grid li{zoom:1; List-style-type:none; margin:0; padding:0; Vertical-align:middle; width:200px; padding:0 0 30px 0; Text-align:center; position:relative; Border:solid 1px #dedede; Border-top-color: #CCCCCC;margin:-1px-1px 0 0; border-width:1px 0 0px 1px; Float:left; Display:inline; Font:150px/normal "Times New Roman"; *padding:0; *font-size:180px; }. Img-grid li img {vertical-align:middle; Background: #fff; font-size:12px; padding:2px; Border:solid 1px #555; Img-grid Li a:hover{text-indent:0;/*ie6 need this to trigger:hover*/}. Img-grid li a:hover img{padding : 1px; Border:solid 2px #336699; }. Img-grid Li strong{display:block; font:small/1.1 Arial; Background: #fff; Position:absolute; bottom:0; left:0; width:100%; }. Img-grid Li strong a{display:block; PADDING:8PX 4px; Color: #336699; Text-decoration:none; Zoom:1; }. Img-grid Li strong a:hover{text-decoration:underline; } </style> </pead> <body> <p>css List Grid layout</p> <p>compatible and Teste D with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21</p> <div class= "Img-grid" > <p>list grid view</p> <ul> <li> <strong>sodales Porta libero.n</strong> </li> <li> <strong>sodales Porterat. Nunc EU risus ut dolor bibendum adipiscing. proin</strong> </li> <li> <strong>sodales Porta libero. Integerdum adipiscing. proin</strong> </li> <li> <strong>sodales Porta libero. Integer adipiscing. proin</strong> </li> <li> <strong>sodalesber proin</strong> </li> <li> <strong>sodales in</strong> </li> ;li> <strong>sodales Porta Libero. Integer dignissim sceiquam erat. Nunc EU risus ut dolor bibendum adipiscing. Proin</strong&gT </li> <li> <strong>sodales Porterat. Nunc EU risus ut dolor bibendum adipiscing. proin</strong> </li> <li> <strong>sodales Porta libero. Integer dignissim scelerisque massa.ndum adipiscing. proin</strong> </li> <li> <strong>sodales Porta libero. Integer Dignissim at. Nunc EU risus ut dolor bibendum adipiscing. proin</strong> </li> <li> <strong>sodales Porta Liber Proin</stro ng> </li> <li> <strong>sodales Porta liberor bibendum adipiscing. proin</strong> </li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
