i designing website using twitter bootstrap. working fine except header area.
i have used .container-fluid set full-width background. , used .container put contents within 960px. problem logo background. want logo background area fill out left area outside .container class. possible?
here markup -
<div class="container-fluid full-width"> <div class="row-fluid header-top"> <div class="container"> <div class="span4 logo-area"> <div class="logo"> <h1> <a href=""> hello.</a></h1> </div> </div> <div class="menu span8"> <div class="navbar"> <ul class="nav" id="nav"> <li><a href="#"> home </a></li> <li><a href="#"> menu item2 </a></li> <li><a href="#"> menu item3 </a></li> <li><a href="#"> menu item4 </a></li> <li><a href="#"> menu item5 </a></li> <li><a href="#"> menu item6 </a></li> </ul> </div> </div> </div> </div> </div> thanks in advance.
it is, need remove flow of container either placing outside of it, or using css control giving position:absolute etc.
something like:
<div class="logo"> <h1> <a href=""> hello.</a></h1> </div> <style> .logo { position:absolute; top:100px; left:100px; } </style> <div class="container-fluid full-width"> <div class="row-fluid header-top"> <div class="container"> <div class="menu span8"> <div class="navbar"> <ul class="nav" id="nav"> <li><a href="#"> home </a></li> <li><a href="#"> menu item2 </a></li> <li><a href="#"> menu item3 </a></li> <li><a href="#"> menu item4 </a></li> <li><a href="#"> menu item5 </a></li> <li><a href="#"> menu item6 </a></li> </ul> </div> </div> </div> </div> </div>
Comments
Post a Comment