Currently, I am in the process of constructing a website using HTML and CSS. My goal is to create a white rectangle that contains 4 images, each serving as a clickable link redirecting users to different sections on the page.
The issue I am facing is that only the last image among the 4 seems to be functioning as intended, leading users to the designated section. The other 3 images, on the contrary, are unresponsive to user clicks. Interestingly, upon removing the last image along with its containing div class, the "new" last image now becomes a functional link despite being inactive previously.
My analysis suggests that this problem stems from a CSS-related complication. When I temporarily disabled the CSS code for the rectangle div, all the images transformed into operational links (even though they appeared disarranged due to the absence of styling). This indicates that the issue lies within the CSS configurations of the rectangle class and its contained images:
#rectangle {
background: white;
width: 1000px;
height: 500px;
position: absolute;
left: 500px;
top: 200px;
text-align: center;
}
// More CSS code here...
In conclusion, I seek advice on rectifying this functionality concern related to the images within the rectangle div. Your assistance is greatly appreciated!