What is causing my link to be clickable beyond the designated linked text area?

https://i.sstatic.net/RZPaw.png

Displayed above is the current image. By clicking anywhere inside the black border, you will be directed to the provided URL. However, I specifically want only the text "RANKINGS" to be clickable.

Here is the HTML code:

<div id="div1">
      <a href="https://example.com" target="_blank" rel='noopener noreferrer'><h4 id="title">RANKINGS</h4></a>
</div>

And this is the CSS code:

#title {
    margin-top: -10px;
    font-size: 20px;
    color: #e846ff;
    text-align: center;
    font-family: 'Trebuchet MS';
    border: 1px solid black;
}
htmlcsshyperlink

Answer №1

You have placed a Heading element (h4) inside an anchor (a) element.

Despite Anchors being inline elements and not taking up the full width of the screen, you included a Heading element within it.

Heading elements, on the other hand, are block elements and do consume the full width of the screen.

To achieve your desired outcome, consider reversing the HTML structure like demonstrated in this codepen:

<h4 id="title">
    <a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>

This approach will give you the result you are looking for.

Answer №2

When using the h4 element, keep in mind that it is a block-level element that takes up the full width of the window. Consider using a span tag instead of h4 and remember that h4 is not valid inside certain tags. If you still want to use h4, you can apply the following CSS:

#title{
display:inline;
}

Answer №3

It appears that the element in question is set to display as a block, which typically results in it occupying 100% of the width of its container. To confirm this, you can inspect the element directly. If you wish for the element to adjust its width automatically, consider changing the display property from block to inline. Keep in mind that headings usually have a default width of 100%. Additionally, don't forget to verify the display property of any links within the element.

Answer №4

If you want to address this problem in a different way, consider applying the width: fit-content; property to your a element. This adjustment will ensure that the link stays within the text boundaries and does not exceed them:

<h4 id="title">
    <a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>

(CSS:)

h4 a{
width: fit-content;
}

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

Adding app stylesheet in Django

I'm a bit unsure about how to incorporate CSS into my HTML. I have an app within my project that has its own template folder, and I would like to include the sample.css file in my HTML. I think it should be something like this: <link rel="styleshe ...

cssdjangodjango-templatesstatic-files

Error message in JS/Ajax alert box

I keep receiving an alert box saying "Image uploaded" even when the variable $imagename is empty. Below is the script in question: <script> function ajax_post1(ca){ var cat = ca; var name = document.getElementById("name").value; var ...

javascripthtmlajax

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

css

How to Implement Full Height CSS for Child Elements?

How can I set the child containers "left" and "right" to be 100% height of the parent container, which is already at 100% height? Also, what's the best way to position the container "hexCont" horizontally? CSS: <style type="text/css"> html ...

csscss-position

Tips for locating a webpage element with Selenium?

click here for image driver=webdriver.Chrome() driver.get("https://compass.tinkoff.ru/") driver.maximize_window() driver.implicitly_wait(20) elem = driver.find_element(By.XPATH, '//button[text()="Open Full Map"]').click() tim ...

pythonhtmlselenium-webdriverelement

Creating a flexible Bootstrap 3 layout that responds to the size of a div, not just the screen

Having a web page layout with a main content area and a fixed-width sidebar is proving to be a challenge. I want the content displayed in both sections to be responsive, adjusting based on the size of their respective parent divs rather than the screen siz ...

htmlcsstwitter-bootstrap

Creating a custom Vue.js component for specific table cells within a table row - here's how!

My challenge is having related and neighboring table columns grouped within the same component in Vue.js. However, I'm facing a limitation with the template system where only one tag can be directly placed inside <template>. Typically, this wrap ...

htmltemplatesvue.jshtml-table

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

Restoring the style on <a> renders it ineffective

Recently, I encountered an issue where the functionality of the <a> tag is lost when using this CSS code: a {all:unset;}. Does anyone have any suggestions on how to address this problem without completely avoiding the use of that particular code sn ...

htmlcss

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Having an issue with jQuery. Trying to include the fixed-top class (Bootstrap 4) when scrolling, but it's not working as expected. jQuery(document).ready(function($){ var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".robig").a ...

javascriptjqueryhtmlbootstrap-4

Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...

javascripthtmljquerycss

Having trouble with element.scrollTo not functioning properly on mobile devices?

I have been working on creating a vertical scrolling carousel, and so far everything seems to be functioning well. I can scroll horizontally using buttons and swipe gestures successfully on the simulator. However, when I view the website on a real mobile d ...

javascripthtmlreactjs

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

First and foremost, I apologize for the awkwardly phrased question. The issue at hand is that when the tags exceed the container size, the search option becomes hidden. My goal is to have the search bar adjust dynamically, moving everything back inside the ...

jqueryhtmlcss

What steps can I take to ensure that my server is accessible to all users?

After successfully creating a chat server using Node.JS and hosting it on my LocalHost (127.0.0.1), I realized that only I have access to the chat. To make the chat server accessible to everyone, I want to deploy it on my real server. The real server URLs ...

javascripthtmlnode.js

The function getSelection().focusNode does not function properly within a specified ID

My current code allows for text to be bolded and unbolded using Window.getSelection(). I found the initial solution here: Bold/unbold selected text using Window.getSelection() It works perfectly without any issues. However, when I tried to modify the code ...

javascripthtmlcss

Identifying the issue of body.onload not being triggered

My web pages use body.onload (or window.onload) to properly set up, but sometimes the onload event is not being triggered. Is there a way in a specific web browser (preferably Chrome, where this issue seems more common) to identify what is causing the pag ...

javascripthtmldom

The Form button in my PHP email code is failing to produce any output when submitted

I attempted to create a contact form using a combination of HTML and PHP. Everything was functioning as expected during testing with the code input type="submit" name="submit" value="Submit" However, when I switched to using div and button with the class ...

phphtmlmail-form

dotdotdot.js is only functional once the window has been resized

For my website, I am attempting to add an ellipsis to multiline paragraphs that exceed a certain height. I have incorporated the dotdotdot jquery plugin from here. An odd issue arises when the page is refreshed, as the ellipsis does not appear until I res ...

javascriptjqueryhtmlcssjquery-plugins

Material design for Angular applications - Angular Material is

Recently, I decided to explore the world of Angular and its accompanying libraries - angular-material, angular-aria, and angular-animate. I'm eager to experiment with this new styling technique, but it seems like I've hit a roadblock right at the ...

javascripthtmlcssmaterial-designangular-material

What is the best method for ensuring three inside divs have equal heights?

I am working with a container div#content that holds three inner divs. I want to ensure that all three divs have the same height, but also expand based on their content. Here is an example of what I have tried: <!doctype html public "-//w3c//dtd html 4 ...

csshtmlheight