Question 274937 in Html Question posted in
Some basic documentation can be found here.

Image is clickable even outside of the designated area – HTML/CSS

Not sure where did I messed it up. Seems i can click the image that’s pointing to index even on the left of the image, as shown in the image below.

img example

<section id="header">
    <a href="index.html"><img src="resources/logo-blue.png" class="Logo" alt="Logo"></a>
    [...] 
    </div>
</section>

and CSS:

.Logo {
display: flex;
justify-content: center;
max-width: 100px;
max-height: 100px;
padding-left: 40%;
}

I know this might be a very basic question but this is my first major project, would really appreciate your thoughts.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to all answering. Because of a mix of info i got from all your comments, i found what i've done wrong. I was using padding for image, instead i used the margin for container and this solved my issue. Not sure if it's the best solution long term, but it does the job for me. Thanks a lot!


  2. 0

    To make the clickable area of the link match the visible area of the logo, you should adjust the anchor tag’s size and possibly its display properties.

    I’ve made an example for you:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .LogoContainer {
            display: flex;
            justify-content: center;
            max-width: 100px;
            max-height: 100px;
        }

        .LogoContainer a {
            display: block;
            text-align: center;
        }
    </style>
</head>
<body>
    <section id="header">
        <div class="LogoContainer">
            <a href="index.html"><img src="resources/logo-blue.png" class="Logo" alt="Logo"></a>
        </div>
    </section>
</body>
</html>

    In this code, I added a new div element with the class LogoContainer that wraps the anchor () element and the logo image. The CSS for .LogoContainer a sets the anchor to display: block; and text-align: center;, making it cover only the visible area of the logo.

    Good luck in your learning! 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search