Height constraint disregarded by anchor

Question

Height constraint disregarded by anchor

I am facing an issue with a large textual menu where the active link space is overlapping onto the other menu items. This is causing difficulty in accurately clicking on a link.

For reference, you can check out this example: http://jsfiddle.net/dhyz48j3/1/

Below is the source code:

<div id="menu">
    <span>
        <a href="#" id="still-life">Still&nbsp;Life</a><span class="divider">/</span><br/>
        <a href="#" id="interiors">Interiors</a><span class="divider">/</span><br/>
        <a href="#" id="books">Books</a><span class="divider">/</span><br/>
        <a href="#" id="personal">Personal</a>
    </span>
</div>

The CSS related to this issue is as follows:

#menu span, #menu span a {
        font-family: sans-serif;
        font-size: 6.1vw;
        line-height: 4.7vw;
        letter-spacing: -0.0425em;
        text-decoration: none;
        color: #ccc;
        display: inline-block;
        }

#menu span a:hover {
        color: #aaa;
        }

The links on the fiddle are not working accurately due to their larger size. I need assistance in resolving this problem. How can I fix this?

html css anchor

Answer 1

Answer №1

Although the suggestions provided by atmd are excellent for your code, they may not completely solve your issue:

font-size: 6.1vw;
line-height: 4.7vw;

It seems that the problem lies in the spacing of your text. While you've attempted to align the lines closely together and reduce the spacing, the font you're using still has extra space above and below the letters. This results in the elements occupying more space vertically than expected, causing them to overlap.

To address this issue, you can adjust the padding of the text element by setting a specific height and using overflow:hidden on a parent element. Then, position the anchor text in the center of the parent element. A functional example can be found here: http://jsfiddle.net/dhyz48j3/3/

Answer 2

Although the suggestions provided by atmd are excellent for your code, they may not completely solve your issue:

font-size: 6.1vw;
line-height: 4.7vw;

It seems that the problem lies in the spacing of your text. While you've attempted to align the lines closely together and reduce the spacing, the font you're using still has extra space above and below the letters. This results in the elements occupying more space vertically than expected, causing them to overlap.

To address this issue, you can adjust the padding of the text element by setting a specific height and using overflow:hidden on a parent element. Then, position the anchor text in the center of the parent element. A functional example can be found here: http://jsfiddle.net/dhyz48j3/3/

Answer 3

Answer №2

To organize a list like this, it is recommended to use the ul tag as they stack vertically by default.

<ul>
    <li><a href="#" id="still-life">Still&nbsp;Life</a></li>
    <li><a href="#" id="interiors">Interiors</a></li>
    <li><a href="#" id="books">Books</a></li>
    <li><a href="#" id="personal">Personal</a></li>
</ul>

This approach eliminates unnecessary markup and allows you to create dividers using CSS.

#menu span, #menu span a {
        font-family: sans-serif;
        font-size: 6.1vw;
        line-height: 4.7vw;
        letter-spacing: -0.0425em;
        text-decoration: none;
        color: #ccc;
        }

#menu span a:hover {
        color: #aaa;
        }

#menu span a:after {
        content: "/";
        }

#menu span a:last-child:after {
        content: "";
        }

Answer 4

To organize a list like this, it is recommended to use the ul tag as they stack vertically by default.

<ul>
    <li><a href="#" id="still-life">Still&nbsp;Life</a></li>
    <li><a href="#" id="interiors">Interiors</a></li>
    <li><a href="#" id="books">Books</a></li>
    <li><a href="#" id="personal">Personal</a></li>
</ul>

This approach eliminates unnecessary markup and allows you to create dividers using CSS.

#menu span, #menu span a {
        font-family: sans-serif;
        font-size: 6.1vw;
        line-height: 4.7vw;
        letter-spacing: -0.0425em;
        text-decoration: none;
        color: #ccc;
        }

#menu span a:hover {
        color: #aaa;
        }

#menu span a:after {
        content: "/";
        }

#menu span a:last-child:after {
        content: "";
        }

Height constraint disregarded by anchor

Answer №1

Answer №2

Similar questions

Having issues with downloading the app from the website

Spinning with animation in jQuery

The image component is missing the necessary "src" attribute even though a valid src value has been provided as a prop

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

Creating extensive pianoroll visualization using HTML and JavaScript

Styling the tab view in PrimeFaces

What are some possible applications for leveraging the HTML5 <link rel> attribute duo of stylesheet and next?

Creating a customized design for a q-popup-edit

Can I create personalized animations using Compass?

Injecting SVG styling into HTML using the content tag and CSS

unable to display dropdown menu from Django model in HTML view

The candy stripes on a loading bar zebra assist in creating a unique and

Retrieve the AJAX response data to be utilized in future operations

Comprehending the positioning of elements enclosed within a parent <div> tag

The Chrome extension takes control of the new tab feature by redirecting it to a custom newtab.html

Execute AJAX function when loading a form populated from a MySQL/PHP database

php redirect back to the page upon form submission

The html select option tag is automatically closed because of the presence of the "/" character within the dynamic value in JSP and JSTL

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

Divide the text into uniform segments immediately following "/>"