html - Extra Box Appears When Browser Ratio is Different -
i'm trying create clickable box sizes , positions relative how browser sizes, box when decrease width of browser , increase length. i'm not sure going on , how rid of it.
here screen captures of going on: - browser @ full size: http://i.imgur.com/mbymoyw.png - browser stretched described above: http://i.imgur.com/kux1tdn.png
css:
img.banner { width: 100%; z-index: 0 } #banner { width: 100%; margin-top: 0px; margin-bottom: auto; margin-left: 0px; margin-right: auto; position: relative } a.rollover { display: block; position: absolute; top: 15%; left: 15%; width: 17%; height: 8%; background-color: black; }
html:
<body> <div id="banner"> <img src="image.png" class="banner"/> <a href="banner1.png" class="rollover"> </div> </body>
also, other suggestions improve css , html appreciated, since i'm new this.
thanks.
simple though seems, not closing anchor tag browser generating 2 anchors - 1 inside div, , 1 outside it. these layout on top of each other until browser resized: positions deviate bit , 'split'. fix closing anchor:
<body> <div id="banner"> <img src="image.png" class="banner"/> <a href="banner1.png" class="rollover"></a> <--added closing tag here </div> </body>
you can check out fiddle here. can't believe took me long!
Comments
Post a Comment