Fri, 2005-02-18 17:25
I am trying to do pure CSS layout with words, images and bg image. But I can't seem to get it. The layout for the first 2 images seem fine, then when I tried to add the 3rd image, it pushed it down...
Desired final layout
Invidual image pieces
The ugly turnout currently
CSS code here...
/*--------------- BEGIN WHITE CONTENT BOX ------------------*/ div.box { width: 350px; height: 190px; background: url("splash/white_bg.gif") no-repeat; margin: 20px; } div.box div { padding: 10px; } div.box h1 { font-size:120%; font-family: "Trebuchet MS", Arial, Tahoma, Verdana; border-bottom: solid 1px #cccccc; margin: 0 0 5px 0; } div.box p.content { text-align: center; margin-top: -80px; } span.read, span.journal, span.share, span.more { display:block; width:60px; height:75px; } span.read { float:left; margin-right:5px; background: url("splash/read.gif") no-repeat; } span.journal { background: url("splash/journal.gif") no-repeat -50% -2%; } span.share { background: url("splash/share.gif") no-repeat; } span.more { background: url("splash/more.gif") no-repeat; } span.read span, span.journal span, span.share span, span.more span { display:none; } /*------------END WHITE CONTENT BOX ------------------*/
HTML code here...
<div class="box"> <div> <h1>Lorem ipsum dolor</h1> <span class="read"><span>Read Views</span></span> <span class="journal"><span>Journal Views</span></span> <span class="share"><span>Share Views</span></span> <span class="more"><span>And More...</span></span> <p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean blandit, leo ut vehicula elementum, dui nulla elementum lectus.</p> </div> </div>