Saturday, 15 June 2013

css - How to add logo and the menu on the image in html -



css - How to add logo and the menu on the image in html -

i'm developing website contain logo , menu. case want add together items on top of page , on slider first image. logo transparent image. want display slider image background of slider sec image.

i used bootstrap 3 here.

this construction of html.

<body> <header> <div class="row"> <div class="col-md-2"> //logo image </div> <div class="col-md-3""> <nav class="navbar navbar-default" role="navigation"></nav> </div> </div> </header> <div class="row"> <div class="container-fluid"> //slider </div> </div> </body>

css

logo css -

.banner-img { overflow: visible; z-index: 10000; float: left; position: absolute; }

menu css -

.menu { background: #f7f6f0; padding: 0; float: right; width: 100%; }

image 01

can help me solve problem?

html

<div id="logo"> <img src="http://skymaiden.com/placeholder.php" alt="" /> </div> <nav>menu</nav> <div id="slider"></div>

css

#logo { position:absolute; z-index-999; top:0; left:0; } nav { width:100%; height:35px; line-height:35px; background:green; color:#ffffff; font-weight:bold; text-align:right; } #slider { width:100%; height:200px; background:pink; }

fiddle demo

html css twitter-bootstrap

No comments:

Post a Comment