html - Why doesn't my text float on top of my image? -


i making homepage , when add image in, navigation goes under it, know why doesn't stay on top.

enter image description here

this html code.

<img id="img" src="img/navigation.png">         <nav>             <ul>                 <a href="index.html"><li>homepage</li></a>                 <li>forum</li>                 <li>donate</li>                 <li>vote</li>             </ul>         </nav> 

this css

nav {     width: auto;     float:right;     padding: 5px 5px 5px 5px;     display:inline-block; }  nav ul{     list-style:none;     padding:10px 8px; }  nav li{     list-style:none;     padding:15px 0;     display: inline-block;     font-size: 15px;     color: green; }  nav a,nav a:visited{     color:#ffffff;     text-decoration:none;     font-weight:bold;     font-size:20px; } 

why doesn't text float on top?

you may want use image background: http://jsfiddle.net/nh6gk/

nav {     width: auto;     float:right;     padding: 5px 5px 5px 5px;     display:inline-block;      background: url('http://placehold.it/500x150') no-repeat center; } 

Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -