The anchor for the circular image is oversized

Currently, I have a PHP code that displays a user's profile picture, and when clicked, it takes them to their own profile. The image is displayed correctly, and the link works fine. However, there seems to be an issue with the area covered by the anchor tag extending beyond the picture and overlapping with another nearby link. How can I reduce the area covered by this anchor?


    <?php 
    if ($searchuser == $username) { 
    ?>
        <a href="profile.php">
            <div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
        <?php 
            if ($searchuser == $username) {
        ?>
        </a>

        .user-pic {
            margin: 0 auto;
            width: 125px;
            height: 125px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border: 0.09em solid white;
            position: relative;
            top: -60px;
            padding: 0px;
            z-index: -100;
        }

Answer №1

Give this a shot:

php

<?php } 
    $show_user_link = false;
    if ($searchuser == $username) { 
        $show_user_link = true;
    }
?>

<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
    <?php if( $show_user_link ): ?>
        <a class="user-link" href="profile.php">
        </a>
    <?php endif; ?>
</div>

css

div.user-pic {
    position: relative;
}

a.user-link {
    height: 125px;
    width: 100%; 
}

Place the anchor inside the div tag and ensure that the div's position is set to relative with the anchor having a width of 100%.

PS: Consider using something like

<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>

when incorporating php and html for better code readability.

--- EDIT

Alright, give the updated code a try now. The only potential issue could be the anchor's height not being fixed at 125px, let me know if you encounter any problems with it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The tooltip for the Google+ button stopped working

After setting up my Portfolio, I added a Google+ button. However, the page lacks styling and there seems to be an issue with the tooltip causing delays. Can anyone help me identify where the problem lies? ...

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times. To achieve the alignment of t ...

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

After extensive research through various online resources, I have yet to find a solution to my specific CSS layout inquiry regarding "3 equal-height columns with a 'really' sticky footer". The desired layout includes the following components: ...

<ul><li>issue with indentation

Is there a way to eliminate the indent from my unordered list? While inspecting the element, I noticed what appears to be padding between the width of the box and the content. However, setting padding to 0px and margin to 0px doesn't seem to work as t ...

Customizing CSS in Angular Components: Taking Control of Style Overrides

I am new to working with Angular and HTML. Currently, I have two different components named componentA and componentB, each having their own .html, .css, and .ts files. In the componentA.css file, I have defined some styles like: .compA-style { font- ...

Only the initial external CSS ID is functional, while the second one is inactive

I am facing an issue with my table where I have applied an external CSS that uses alternating shaded rows. My aim is to have specific table cells with different background and font colors - one cell with a green background and red font, and another with a ...

When the CSS style sheet is not embedded within the HTML document, it fails

I'm facing an issue while trying to apply currency formatting to an HTML table in order to have it display correctly when opened in Excel. Initially, I tried doing this inline and it worked fine, like so: <td style="mso-number-format:$\##&bso ...

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

I created a basic HTML/CSS code for testing purposes, but I'm having trouble getting the library to function properly. I've placed the .htc, .php and .js files in the same directory as index.html, but it just won't work. Check out the code ...

Combine two CSS effects in succession using Jquery

I am attempting to combine two CSS transition effects together. The first code snippet works well with 'animate': $('.txt').css({'transition': 'transform .5s ease-in-out ', 'transform': 'translate(3 ...

The AngularJS framework is failing to disable the autocomplete feature for the input field with a password type

I have attempted to disable auto-complete for the password input, but it doesn't seem to be working. Below is a sample of my code: <form name="testfrm" ng-submit="test(testfrm)" autocomplete="off"> <input type="password" id="passwor ...

Troubles with Conditional Application of CSS Styles to a Twitter-Bootstrap Table

I am facing an issue with highlighting a row in a table when a barcode is entered. Despite following similar scenarios and checking my code, the CSS doesn't seem to be applied. Can anyone help me figure out what I'm missing or how I can fix this? ...

Tips for positioning a highcharts pie chart and legend in the middle of a page

I'm struggling to center my highchart data in a node/react single page application. Currently, it appears off-center like this: https://i.stack.imgur.com/ccR6N.png The chart is floating to the left and I would like to have everything centered within ...

Issues with Adaptive Headers

* { box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } html, body { font-size: 14px; } header { width: 100vw; height: 50px; background-color: #222; margin: 0 auto; padding: 0; display: flex; justify-content: ...

Ways to align a bootstrap 4 row both vertically and horizontally in the center amidst other rows

Assume there is a main menu followed by three rows. The first row should be at the top and the third at the bottom, while the second row needs to be centered both vertically and horizontally. As you scroll down, the main menu should be able to hide while ...

I'm having trouble getting my modal to open, it just displays the information on my page instead

I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...

Arrange two divs next to each other on the page: the div on the right can be scrolled through, while the div on the

I am attempting to create a layout similar to this https://i.sstatic.net/Y1FCp.png My goal is to: Have two main divs positioned side by side inside a wrapper div Ensure the wrapper expands to fill 100% of the browser size The left div (banner) should b ...

Divs gracefully appear one after the other in a sequential manner

I am attempting to showcase a sequence of 4 divs in a row using the ease-in CSS transition feature. I came across this example that demonstrates what I am aiming for: http://jsfiddle.net/57uGQ/enter code here. However, despite my best efforts, I am unable ...

Utilizing Boostrap to create a background image positioned on the far left of the screen within a .container

I am currently working with bootstrap 4 and have a layout that includes a container class: body #content.container .row .col-6 | Great content .col-6 | I really like it .row .col-12 And so forth .row ...

How to align text to the left and image to the right using CSS

I'm fairly new to CSS and struggling with a design issue. I want to display a series of stacked divs on my page, each containing text and one or more images. My goal is to have the text left-aligned and vertically centered, while the images are right ...

Implementing pagination for a scrolling tab group with a flexible number of buttons

I need to implement a pagination feature in my scroll function where users can select from a list of tabs/buttons and it will automatically scroll to the corresponding div/tab. Currently, I have a while statement that generates songs from my database, with ...