javascript - how to load a hyperlink ontop of an image -



javascript - how to load a hyperlink ontop of an image -

creating basic html page, should show logo banner, hyperlink on bottom right of logo. iframe page. storing image , iframe within 2 seperate divs, set within div.

problem when seek add together time, loads below image, , iframe sits ontop of blocking out. have tried z index , messing divs...any ideas?

<!doctype html> <head> <title>interactive map - meath field names project</title> <style> *{margin:0;padding:0} html, body { height:100%; width:100%; overflow:hidden; background-color:#e0dedf; } iframe { height:100%; width:100% } .content { width: 100%; height:90% } .logoheader { width: 100%; height: 10%; } .fullpage { height:100%; width: 100%; } .hlink { z-index: 1; color:#acd0d4; font-size:26px; font-family:verdana } </style> </head> <body> <div class="fullpage"> <div class="logoheader"> <img src="images/banner.png" alt="images" width="100%" /> <a class="hlink" href="http://www.google.com/">help page</a> </div> <div class="content"> <iframe class="wrapper"//linktoiframe</iframe> </div> </div> </body> </html>

the next 2 solutions seem work:

negative margin-top float right on link adding wrapper position relative , absolutely positioning link;

class="snippet-code-css lang-css prettyprint-override">a.hlink { position: relative; margin-top: -1.5em; float: right; z-index: 5; } #wrapper { position; relative; } #wrapper .otherlink{ position: absolute; bottom: 3px; right: 3px; } class="snippet-code-html lang-html prettyprint-override"><img src="images/banner.png" alt="images" width="100%" height="75" /> <a class="hlink" href="http://www.google.com/">help page</a> <p>more content</p><hr/> <div id="wrapper" style="position:relative"> <img src="images/banner.png" alt="images" width="100%" height="75" /> <a class="hlink" href="http://www.google.com/">help page</a> </div>

javascript html css html5 styles

Comments

Popular posts from this blog

php - How to pass multiple values from url -

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

database - php search bar when I press submit with nothing in the search bar it shows all the data -