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

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -