DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

List Panel Experiment

05.07.2006
| 831 views |
  • submit to reddit
        // List panel experiment


<style type="text/css">
/*<![CDATA[*/
* { margin : 0; padding : 0; }
html 	{ text-align : center; }
body 	{ width : 680px; margin : 0 auto; padding : 4em 0; background-color : #fff; font : 78%/1.5 "Lucida Grande","Lucida Sans Unicode", Verdana, sans-serif; color : #333; text-align : left; }

h1 { padding : 2px 10px; background-color : #c84c0e; color : #fff; font-size : 120%; text-transform : uppercase; }
h2 { width : 190px; margin-bottom : .5em; padding-top : 150px; font-size : 100%; text-transform : uppercase; }
h3 { float : left; font-size : 100%; margin-right : 5px; }
p  { display : inline; font-size : 100%; }

ol { list-style-type : none; padding-top : 10px; border : 1px solid #c4c4d0; border-top-width : 0; overflow : hidden;  }
li { float : left; width : 190px; margin : 0 5px 10px 10px; min-height : 26em; padding : 10px; }
li:hover { background-color : #fff; outline : 1px solid #c4c4d0; }
li:last-child { margin-right : 0; }

img, img a { border : none; }
a:link, a:visited { text-decoration : none; color : #c84c0e; }
a:hover { color : #000; }
h2 a { display : block; margin-top : -150px; padding-top : 150px; text-decoration : none; }

li#one h2 { background : transparent url(images/item-1.jpg) no-repeat -190px 0; } 
li#two h2 { background : transparent url(images/item-2.jpg) no-repeat -190px 0; }
li#three h2 { background : transparent url(images/item-3.jpg) no-repeat -190px 0; }
li#four h2 { background : transparent url(images/item-4.jpg) no-repeat; }
li#five h2 { background : transparent url(images/item-5.jpg) no-repeat; }
li#six h2 { background : transparent url(images/item-6.jpg) no-repeat; }

li#four:hover h2>a { background : transparent url(images/item-4.jpg) no-repeat -190px 0; }
li#five:hover h2>a { background : transparent url(images/item-5.jpg) no-repeat -190px 0; }
li#six:hover h2>a { background : transparent url(images/item-6.jpg) no-repeat -190px 0; }

/*]]>*/
</style>


<div id="content">

<h1>Lorem ipsum dolor sit amet</h1>

<ol>

<li id="one">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt.</p>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h3>Lorem:</h3>
<p>Lorem ipsum dolor.</p>

</li>

<li id="two">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h3>Lorem:</h3>
<p>Lorem ipsum dolor.</p>

</li>

<li id="three">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h3>Lorem:</h3>
<p>Lorem ipsum dolor.</p>

</li>

<li id="four">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h3>Lorem:</h3>
<p>Lorem ipsum dolor.</p>

</li>

<li id="five">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h3>Lorem:</h3>
<p>Lorem ipsum dolor.</p>

</li>

<li id="six">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<h3>Lorem ipsum dolor:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h3>Lorem:</h3>
<p>Lorem ipsum dolor.</p>

</li>

</ol>

</div>