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.
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
Post a Comment