Ways to adjust the anchor and h1 elements using CSS

I'm working on an HTML document with some markup,

<a class="home-link" href="index.html" rel="home">
<h1 class="site-title">John Arellano's Personal Website</h1>
</a>

While styling the site title, I encountered a problem. My cursor allows me to click on the link even in the blank space.

Is there anyone who can help me fix this using CSS only? Unfortunately, I am unable to make changes to the HTML document, so I need to find a CSS solution.

Even if I set the width to 200px, I can still click on positions beyond that limit.

htmlcss

Answer №1

To achieve this effect using CSS, you can use the following code:

<style>
     a:link{display:inline-block;}
</style>

Answer №2

It's important to remember that block elements should not be nested inside inline elements. Here is the correct way to structure it:

<h1 class="site-title"><a class="home-link" href="index.html" rel="home">John Arellano's Personal Website</a></h1>

Answer №3

To modify the html code, make sure to follow these steps:

<h1><a href="" class="home-link">Site name</a></h1>

If you are experiencing issues, it might be due to indentation in your css. Try implementing the following adjustments:

a.home-link{
 text-indent:0;
 display:block;
 cursor:pointer;
 height:80px; /*customize your height */
 width:80px; /*customize your width */

}

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

How can I center an image next to text on two lines, that is compatible with IE7?

I am trying to align an image (logo) with text in two lines - the website title and a brief description. Here is my attempt using HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...

cssinternet-explorer-7

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

The combination of the card hover effect and the bootstrap modal creates complications

Hey there! I'm in the midst of crafting a webpage using Bootstrap and EJS. My aim is to craft a modal window that pops up when a specific button is clicked to display extra information, and upon clicking an X or "close" button, the modal should disapp ...

javascriptcssbootstrap-5

What could be causing a specific CSS class to not take effect?

Recently, I embarked on a journey to learn Django framework with Python. My main source of knowledge is a course I found on YouTube. However, I encountered an issue where the CSS and JS features were not applying to my page as demonstrated in the course. ...

cssdjangobootstrap-4

Achieving Div Alignment in a Fluid Bootstrap Grid

I am currently utilizing the bootstrap grid system, as depicted below, and I am attempting to center some div elements (pic). Despite my attempts with various CSS properties like {margin:0 auto; width:50%}, I am unable to achieve the desired result. I fi ...

htmlcsstwitter-bootstrapcentering

jQuery function fails to work on a list that has been dynamically generated

Can someone please assist me? I have encountered an issue where the dynamic list on the second page is not functioning properly. When I click any "li" element to trigger an alert for the respective "id" (which works fine for a hardcoded list), nothing happ ...

jqueryhtmljquery-mobile

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...

javascripthtmlcssbutton

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

I have implemented a Bootstrap HTML section that consists of a container and two main rows. Here is the code snippet: <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style& ...

htmlcssbootstrap-4row

Show an SVG overlay when hovering over an image

Is there a way to create a hexagon shape around an image when it is hovered over using CSS only, even if the image itself has a circular border-radius of 50%? ...

javascriptcss

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-co ...

javascriptcssangulartypescripttabulator

Why is it that every time I write this code, the localhost gets redirected and a message pops up saying

<?php include("connect.php"); if(isset($_POST['submit'])) { $qonax=@$_POST['qonax']; $subject=@$_POST['subject']; $insert="INSERT INTO subject(ID,Qonax,Subject)VALUES('','$qonax', ...

phphtmlmysqlmysqliphpmyadmin

What's the best way to use the keyboard's enter key to mark my to-do list

I'm looking to update my todo list functionality so that pressing enter adds a new todo item, instead of having to click the button. <h1 style="text-align:center">Todo List</h1> <div class="container"> ...

htmlangulartypescript

The appearance of Recaptcha buttons is unattractive and seemingly impossible to

Let me start by saying that I have already looked into the issue of "Recaptcha is broken" where adjusting the line-height was suggested as a solution. Unfortunately, that did not work for me. After implementing Google's impressive Recaptcha on my web ...

javascripthtmlcssrecaptcha

Split total based on checkboxes toggled with JavaScript

I'm facing a challenge. I have a total sum of donations collected, for example, 10€. Additionally, there are various NGOs that one can select to donate to. Individuals have the option to toggle on/off which NGO's they wish to contribute toward ...

javascripthtmlcheckboxtoggle

Encountering Error 500 with Jquery Min.Map File

ERROR: GET request to http://domain.com/assets/js/jquery-1.10.2.min.map returned a 500 Internal Server Error Can anyone help me figure out what's causing this error? I checked the log files in /var/log/error but couldn't find any information. T ...

javascriptphpjqueryhtmltwitter-bootstrap

The curly braces in AngularJS are failing to display the values on the HTML page

After trying various articles and solutions to different questions, I am still unable to resolve my issue. I am working on a blank ionic project and it is running smoothly in my browser using ionic serve without any errors. However, instead of displaying ...

javascripthtmlangularjsionic-framework

How to optimize the loading speed of background images in an Angular application

Utilizing Angular v6, typescript, and SASS for my project. A CSS background image is set for the homepage, however, it's a large photo that always takes too long to load. Custom CSS: @import '../../../scss/variables'; :host { .wrapper { ...

cssangularimage-processingoptimizationsass

Safari is displaying the HTML5 range element improperly

My HTML input type=range element is styled perfectly in Chrome, but it's a disaster in Safari. The track ball disappears or only partially renders when moved, and it seems to take forever to load. Any idea what could be causing this strange behavior? ...

jqueryhtmlformscsssafari

What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected. I tried to add a custom class to the mat-menu element us ...

htmlcssangularangular-materialangular7

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

javascripthtmlcssbootstrap-5