html - Stairstep Div Formatting -

html - Stairstep Div Formatting -

i have client wants particular design on home page match seen on mag cover. basic stairstep design of cover never changes images do. have not been able devise way cover format without using 1 big image.

here's fiddle: http://jsfiddle.net/z6ghy/

note: appearance in fiddle right in how client wants seen. problem uses 1 big image must changed occasionally. much easier if these 3 images separated.

anyone know best way can accomplish this? images can placed via html or css, either way not matter, though nice see them in html seo benefits.

in case fiddle doesn't display image here is.. http://i.imgur.com/6s2i9l7.png

html:

<h2>innovative engineering science solutions in material handling</h2> <div class="home-container"> <div class="home-content"><p>experience impact lauyans &amp; company can create on business success. through innovative engineering science solutions in material handling, lauyans take responsibility planning, execution , acceptance of project.</p> <!--h2>lauyans... why take else?</h2--> <h2 style="margin: 80px 0 0 30px;">lauyans...<br /> why choose<br /> else?</h2> </div><!-- end home content --> </div><!-- end home container --> <div class="home-container2"> <div class="home-planning"> <h3>planning</h3> </div> <div class="home-execution"> <h3>execution</h3> </div> <div class="home-acceptance"> <h3>acceptance</h3> </div> </div>

css:

.home-container { width: 690px; height: 459px; background: url('/wp-content/uploads/2013/01/home-image.png') 50% 100% no-repeat; } .home-container2 { width: 690px; } .home-content { width: 430px; height: 429px; padding: 15px; } .home-content p { padding: 0; margin: 0; } .home-content h2 { padding-top: 10px; margin: 0; } .home-container2 h3 { padding-top: 0px; margin: 0; text-align: center; } .home-planning { width: 230px; float: left; } .home-execution { width: 230px; float: left; } .home-acceptance { width: 230px; float: left; }

i take absolute positioning route considering "unique" layout going for:

http://jsfiddle.net/z6ghy/1/

i reworked (including images had grab somewhere else):

html

<div class="home_con"> <h2 class="pge_title">innovative kitten solutions</h2> <div class="home_step"> <h2 class="step-title">lauyans...<br /> why choose<br /> else?</h2> <p> experience impact kittens can create on business success through purring. </p> <img class="img1" src="http://www.vivapets.com/img/album/52/19052_white_persian_kittens_for_adoption_thb.jpg" /> <img class="img2" src="http://www.saudivets.com/images/vpic20.jpg" /> <img class="img3" src="http://fc04.deviantart.net/fs70/f/2011/167/2/8/kitten_tracks_banner_100x300_by_xxjessie_kittehxx-d3j2h51.png" /> </div> <div class="img_text"> <div class="img_text_ele">planning</div> <div class="img_text_ele">execution</div> <div class="img_text_ele">acceptance</div> </div> </div>

css

.home_con h2.pge_title { font-weight:bold; font-size:1.125em; } .home_step { width:300px; height:300px; position:relative; } .home_step h2.step-title { position:absolute; top:110px; left:10px; } .home_step p { width:200px; position:absolute; top:10px; left:10px; } .home_step img { position:absolute; bottom:0px; } .home_step .img1 { left;0px; } .home_step .img2 { left:100px; } .home_step .img3 { left:200px; } .home_con .img_text { width:300px; overflow:hidden; } .home_con .img_text_ele { width:100px; float:left; text-align:center; }

html css html5 css3 xhtml