html - Getting content to clear a responsive image -
i have responsive image outside of body in code below. fills top half of screen , responsive, great, want of content underneath stay underneath image resizes nothing working - rather clear image sits on top of it. ideas or alternative methods try?
the html:
</head> <img src="/portfolio/images/me.jpg" class="ri"> <body> <header> <div class="contain"> <a href="/"><img src="/portfolio/images/logo.png" alt="logo" width="200" height="200"></a> </div> </header> <div class="contain"> <nav> <ul> <li><a href="/contact">contact</a></li> <li><a href="/work">work</a></li> <li><a href="/details">details</a></li> </ul> </nav> </div>
the css:
.contain { width: 980px; margin: 0 auto; } img.ri { position: absolute; max-width: 100%; min-width: 980px; top: 0%; left: 0%; border-radius: 1px; box-shadow: 0 3px 6px rgba(0,0,0,0.9); z-index: -200; } body { .lift { height: 80px; } header {
this wanted if used floats rather position absolute; image should not outside off body really.
see http://jsfiddle.net/bncqp/ example
code
.contain { width: 980px; margin: 0 auto; float:left; } img.ri { float:left; max-width: 100%; min-width: 980px; top: 0%; left: 0%; border-radius: 1px; box-shadow: 0 3px 6px rgba(0,0,0,0.9); z-index: -200; }
Comments
Post a Comment