I am new to the world of HTML and CSS and have been attempting to create a blog at . I managed to create a header image, but I wanted to make two specific areas of the image clickable. To achieve this, I decided to create two transparent boxes named box-link for the red one and box-link2 for the yellow one. While they appear correctly positioned in my browser, they do not scale properly on larger monitors or when resizing the page. Despite my efforts to find a solution and understand the relative positioning command, it seems that my current skills are not enough to address this issue.
Below is the code snippet:
<div class='box-wrap'>
<div class='box-wrap1'>
<a href='http://ics.restlessrayner.com/p/other-blogs.html' id='box-link'/>
<p/>
</div>
<div class='box-wrap1'>
<a href='http://ics.restlessrayner.com/' id='box-link2'/>
<p/>
</div>
And here is the corresponding CSS:
#box-link {
position: absolute;
top: 40px;
left: 725px;
width: 210px;
height: 65px;
background-color: red;
border: 3px solid transparent; }
#box-link2 {
position: absolute;
top: 50px;
left: 40px;
width: 500px;
height: 70px;
background-color: yellow;
border: 3px solid transparent; }