css - floating divs for sitemap please have a look at the picture -
this have:
want
how can that?
<style type="text/css"> .sitemap { width:560px; } .sitemap .nav-box { float:left; width:170px; margin-right:15px; margin-bottom:20px; } .sitemap .nav-box span, .sitemap .nav-box { display:block; border-bottom:1px solid #434343; } .sitemap .nav-box span { color:gray; font-size:14px; text-transform:uppercase; border-bottom:1px solid #434343; line-height:20px; padding-bottom:3px; } .sitemap .nav-box { padding:3px 0; } </style> <div class="sitemap"> <h3>sitemap</h3> <div class="nav-box"> <span>hotels & apartments</span> <a href="#">alle hotels</a> <a href="#">5 *****</a> <a href="#">4 ****</a> <a href="#">3 ***</a> <a href="#">2 **</a> <a href="#">apartments</a> </div> <div class="nav-box"> <span>ferien-wohnungen</span> <a href="#">mieten</a> <a href="#">kaufen</a> </div> <div class="nav-box"> <span>dining & nightlife</span> <a href="#">gault millau</a> <a href="#">walliser spezialitäten</a> <a href="#">pasta & pizza</a> <a href="#">asian</a> <a href="#">bergrestaurant</a> <a href="#">caffe & bars</a> <a href="#">clubs & après ski</a> </div> <div class="nav-box"> <span>shopping & lifestyle</span> <a href="#">bijouterie</a> <a href="#">fashion</a> <a href="#">sportgeschäfte</a> <a href="#">food & beverage</a> <a href="#">apotheken</a> <a href="#">spa & wellness</a> <a href="#">massagen</a> </div> <div class="nav-box"> <span>sports & adventures</span> <a href="#">skipisten (pistenbericht)</a> <a href="#">ski & snowboard-schulen</a> <a href="#">ski & bergtouren</a> <a href="#">heliskiing</a> <a href="#">paragliding</a> <a href="#">indoor klettern</a> <a href="#">curling</a> </div> <div class="nav-box"> <span>kultur & events</span> <a href="#">kulturelles</a> <a href="#">eventkalender</a> </div> <div class="clear"></div> </div>
off course there fiddle http://jsfiddle.net/caramba/rykxq/
thanks help!
you try make tree nav-div several blocks inside. code works me (of course better make subdiv):
<div class="sitemap"> <h3>sitemap</h3> <div class="nav-box"> <span>hotels & apartments</span> <a href="#">alle hotels</a> <a href="#">5 *****</a> <a href="#">4 ****</a> <a href="#">3 ***</a> <a href="#">2 **</a> <a href="#">apartments</a> <span>shopping & lifestyle</span> <a href="#">bijouterie</a> <a href="#">fashion</a> <a href="#">sportgeschäfte</a> <a href="#">food & beverage</a> <a href="#">apotheken</a> <a href="#">spa & wellness</a> <a href="#">massagen</a> </div> <div class="nav-box"> <span>ferien-wohnungen</span> <a href="#">mieten</a> <a href="#">kaufen</a> <span>sports & adventures</span> <a href="#">skipisten (pistenbericht)</a> <a href="#">ski & snowboard-schulen</a> <a href="#">ski & bergtouren</a> <a href="#">heliskiing</a> <a href="#">paragliding</a> <a href="#">indoor klettern</a> <a href="#">curling</a> </div> <div class="nav-box"> <span>dining & nightlife</span> <a href="#">gault millau</a> <a href="#">walliser spezialitäten</a> <a href="#">pasta & pizza</a> <a href="#">asian</a> <a href="#">bergrestaurant</a> <a href="#">caffe & bars</a> <a href="#">clubs & après ski</a> <span>kultur & events</span> <a href="#">kulturelles</a> <a href="#">eventkalender</a> </div> <div class="clear"></div>
Comments
Post a Comment