Steps for properly inserting a hyperlink:

I'm in need of assistance. I have a grid containing several images that I want to make clickable by adding anchor tags, but when I do this, the images seem to disappear completely. I suspect there's an issue with them being inside the container div (refer to the code below), yet I can't pinpoint what's wrong. Additionally, I require the text beneath the image to be clickable as well, hence why I included it within the anchor tag. However, I'm having trouble removing the underline from the text even after applying 'text-decoration: none;'. Any suggestions on how to resolve all these issues? Please refer to the screenshot below for the current appearance.

HTML Code:

<section class="country">
        <h1>Our country</h1>
        <div class="container2">
            <a href="sub_history.html">
                <div class="history">
                    <p>History</p>
                </div>
            </a>
            <div class="culture">
                <p>Culture</p>
            </div>
            <div class="demo">
                <p>Demographics</p>
            </div>
            <div class="geo">
                <p>Geographics</p>
            </div>
        </div>
    </section>

And CSS:


.country {
    height: 85vh;
    width: 100%;
    background-color: #fff;
}

.country h1 {
    padding-top: 45px;
    text-align: center;
}

.container2 {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    grid-template-rows: repeat(2, 450px);
    margin-top: 5%;
}

.container2>div>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/hist.jpg");
    background-size: cover;
    background-position: center center;
}

.culture {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/culture.jpg");
    background-size: cover;
    background-position: center center;
}

.demo {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/demo.jpg");
    background-size: cover;
    background-position: center center;
}

.geo {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/geo.jpg");
    background-size: cover;
    background-position: center center;
}

.history p,
.culture p,
.demo p,
.geo p {
    margin-top: 95%;
    text-align: center;
    color: #fff;
    font-size: 25px;
}

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

If anyone has any ideas or solutions, your help would be greatly appreciated.

htmlcss

Answer №1

In the traditional sense, anchor tags are typically inline elements where they act as the anchor within a container rather than being the container itself. However, modern approaches have shifted this perception, and your current method is perfectly acceptable. Let me provide you with an alternative code structure to illustrate how you could organize your code in the traditional way and still achieve the desired outcome.

.country {
    height: 85vh;
    width: 100%;
    background-color: #fff;
    font-family: sans-serif; /* remove for own style */
}

h1 {
    padding-top: 45px;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    grid-template-rows: repeat(2, 450px);
    margin-top: 5%;
}

h2 a{
    display: block;
    padding-top: 95%;
    padding-bottom: 15%;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-color: lightgrey; /* Remove this, only used to show the elements */
    border: solid 1px black; /* Remove this, only used to show the elements */
}

.history h2 a{
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/hist.jpg");
}

.culture h2 a {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/culture.jpg");
}

.demo h2 a {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/demo.jpg");
}

.geo h2 a {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url("images/4ond/geo.jpg");
}
<section class="country">
  <h1>Our country</h1>
  <div class="grid-container">
    <div class="history">
      <h2><a href="#">History</a></h2>
    </div>
    <div class="culture">
      <h2><a href="#">Culture</a></h2>
    </div>
    <div class="demo">
      <h2><a href="#">Demographics</a></h2>
    </div>
    <div class="geo">
      <h2><a href="#">Geographics</a></h2>
    </div>
  </div>
</section>

Answer №2

Modify the background of the "a" element, not the entire div

<a class="history" href="sub_history.html">
<div>
<p style="margin: 90%">History</p>
</div>
</a>

Also, adjust the margin of the "p" tag to 90% for better results.

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

Overlay one image on top of another

Recently, I've been working on this code snippet. I am attempting to center the profile picture even when the screen width is reduced. The issue lies with using position:absolute, preventing margins:auto from functioning properly. As a workaround, I ...

htmlcssmaterialize

Tips for preventing the appearance of a horizontal scroll bar when utilizing the FlexLayoutModule in Angular

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-property-feed', templateUrl: './property-feed.component.html', styleUrls: ['./property-feed.component.scss'] }) export class Prope ...

cssangularangular-flex-layout

When the browser's inner width is less than the inner height, use jQuery or JavaScript to show a message on the webpage

I've been having trouble getting this to work and I've attempted various solutions suggested by different sources such as: Display live width and height values on changing window resize php echo statement if screen is a certain size And more, b ...

javascriptphpjqueryhtmlajax

CSS3PIE is failing to function properly in Internet Explorer

Looking for a solution to achieve rounded corners in Internet Explorer? Consider using . In my CSS file named template.css, I have included the following code which is loaded when the page loads on Joomla 1.5. .form_field {color:#222 !important; border:2p ...

htmlcssjoomlacss3pie

What is causing my Bootstrap Controls to malfunction?

I'm trying to create a Bootstrap carousel that shows 3 items at once and includes controls to switch between them. The carousel I've made does display the three items, but for some reason, the controls are not responding when clicked. I'm un ...

javascripthtmlcsstwitter-bootstrapbootstrap-carousel

Show the outcome of a mysql_query in PHP directly within MYSQL

I've been trying to figure out how to display my MySQL results in PHP using tables. Despite doing a lot of research on this topic, I haven't been able to find a solution yet. Here's the code that I have: <html> <head> </head& ...

phphtmlmysql

Curious about the distinction between express-ejs-layouts and DHTML?

According to Google search results, DHTML involves generating HTML content dynamically using Javascript. Meanwhile, EJS also claims to do the same thing with its abbreviation of Embedded JavaScript. It seems like both DHTML and EJS have similar functional ...

htmlexpressejsdhtml

ways to undo modifications made to a value within an input field using jquery or javascript

$(document).ready(function () { //Highlight row when selected. $(function () { $('#Cases tr').click(function () { $('#Cases tr').removeClass('selectedRow'); $(this).addClass(&apos ...

javascriptjqueryhtml

What is the technique for implementing a slide animation on hover to move a div identified by the class `box`?

How can I create a div element with the class of box that already has some transitions applied to it, and also include a slide animation on hover effect for the same div? .box { background-color: red; width: 70px; height: 70px; transition-propert ...

htmlcss

Differences between visibility property manipulation in HTML and JS

One issue I am facing is that when I add a hidden property to a button in the HTML, it remains invisible. <button id="proceed_to_next_question" hidden> Next Question </button> However, if I remove the hidden property and include the following ...

javascripthtmlvisibility

Internal styles are effective, while external styles seem to be less efficient

For some reason, internal CSS is working fine, but external CSS just won't cooperate. I even tried using the code !important, but it's like it doesn't understand. I'm trying to incorporate a gallery into my website, but I've hit a ...

javascripthtmlcssbootstrap-4styles

Does the body element inherit the line height property?

Below is some simple HTML code consisting of a div and a span: <div id="container">Some text to affect the width</div> <span>A</span> I am currently using Eric Meyer's CSS Reset, which sets the line-height of the body to 1 an ...

cssinheritancefonts

developing a loading animation with progress indicator in CSS3

I have been working on creating a preloader, but I am having trouble embedding the percentage with the CSS circle. So far, I have tried various plugins without success. Can anyone help me with this issue? Here is my current progress. Below is the HTML co ...

javascriptjqueryhtmlcsspreloader

The spacing between images on mobile devices is excessive

My images on mobile have too much space between them: mobile version They appear fine in Dev Tools: dev tools version This is my HTML: <div class="container-fluid"> <!-- <br> --> <div class="row"> ...

htmlcssmobilebootstrap-4mobile-development

Transferring Data from Python Script to Browser (with an xserver running on a Linux system)

Looking for suggestions on how to efficiently transfer data from a Python script to a web browser. The Python script, as well as the browser, are operating under an xServer environment in Linux (specifically Raspbian on Raspberry Pi). The script is respon ...

javascriptpythonlinuxhtmlxserver

Incorporating Bootstrap content directories into ASP.NET website projects

I've been experimenting with Bootstrap for website design, but I'm facing an issue with adding files to my project. When creating a project in Visual Studio 2015 using File/New/Web Site..., I'm able to simply Copy/Paste the css, fonts, js fo ...

c#cssasp.netweb-applicationsbootstrap-4

Utilizing vue-router to create two separate navigation bars where only one link is highlighted as active

In my setup, I have implemented two sections with navigation structured as follows: <ul class="navigation-list"> <li v-for="(route, index) in navRoutes"> <router-link :to="route.path"> <span>{{ route.name }}</span> ...

javascriptcssvue.jsvue-router

Creating a functionality in jQuery that allows users to dynamically add a new row by clicking a button

Hello all, I am currently facing an issue with my code where I need to call a text box (or a set of divs with input fields) multiple times by clicking a button (with the id 'add_row'). The current code works fine for the first time, but not for ...

phpjqueryhtmlajaxjquery-ui

If other options fail, Else If may not be a suitable choice

This is the process: switching from Issue: x==0||1 to x==0||x==1 etc. This code runs from an .html file <body> <div class="" id="pimg1"> </body><script> var x=new Date().getMonth(); if (x == 0||x == 5||x == 2){docu ...

javascripthtmlcsslogical-operators

issues with redirection of form validation

I am currently working on a Django project where users can add comments to posts. The information is saved directly in the database, which is functioning properly. However, I am facing an issue where after submitting the comment, the form keeps resubmittin ...

pythonhtmldjangobootstrap-4