I'm trying to make the #header
div clickable by wrapping a link element around it, but I cannot do it when it already has another image link inside the div. How would I fix this?
#header { border: 1px solid red; background-color: red; } img { width: 50px; height: 50px; }
<a href = 'index.php'> <div id = 'header'> <a href = 'profile.php?username=$username'> <img src = 'https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'> </a> </div> </a>
Now while the image link works just fine, the #wrapper
div is not clickable.
#header { border: 1px solid red; background-color: red; position: relative; /* establish nearest positioned ancestor for abs. positioning */ height: 50px; } #header a:first-child { display: block; height: 100%; } #header a:last-child { position: absolute; /* image now independently clickable */ top: 0; /* position image anywhere you want inside #header */ left: 0; } img { width: 50px; height: 50px; }
<div id='header'> <a href='index.php'></a> <a href='profile.php?username=$username'> <img src='https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'> </a> </div>
NOTES:
If you wrap a hyperlink inside another hyperlink, how is the browser supposed to know which link to execute?
Instead, make the #header
element entirely clickable, and absolutely position the image.
Now the image can be clicked separately and positioned anywhere inside the #header
element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.