html - How to set background across this bar -
html - How to set background across this bar -
i trying set background go horizontally across bar behind logo , nav
here html
<!--nav--> <div class="header"> <div class="title"> <img src="img/logo.png"> </div><!--/.title--> <nav class="nav"> <ul> <li>home</li> <li>services</li> <li>contact</li> </ul> </nav> </div>
and here css
.title { display:inline; float:left; margin:0 auto; } .nav { font-size:20px; color:#0f3; display:inline; float:right; margin:0 1.7%; padding:1% 4% 0; } ul { display:inline; float:right; list-style:none; } li { display:inline; }
you can modify .header
class.
keep in mind floating divs don't impact size of surrounding element. can utilize overflow: auto;
in header class create surrounding element take floating elements in consideration:
example
class="snippet-code-css lang-css prettyprint-override">.header { background: url(http://lorempixel.com/800/100/abstract/); width: 100%; overflow: auto; } img { padding: 12px; } .title { display: inline; float: left; margin: 0 auto; } .nav { font-size: 20px; color: black; text-shadow: 2px 2px 2px rgba(150, 150, 150, 1); display: inline; float: right; margin: 0 1.7%; padding: 0 4%; padding-top: 1%; margin-bottom: 0; } ul { display: inline; float: right; list-style: none; } li { display: inline; }
class="snippet-code-html lang-html prettyprint-override"><div class="header"> <div class="title"> <img src="http://lorempixel.com/100/40/people/"> </div> <!--/.title--> <nav class="nav"> <ul> <li>home</li> <li>services</li> <li>contact</li> </ul> </nav> </div>
html css background nav
Comments
Post a Comment