How to put a correct ahref-CodePudding

I need some help. I have a grid with some images. I want them to be clickable, so I added a tag, but when I'm doing this my whole images disappears almost. I think there is something wrong because it is in the container div (see code below). but I can't figure out what is wrong. The text under the image must be clickable too, so that's why I put it in the a href also. The problem with the text is that the underline isn't going away when I do: text-decoration: none;. I don't know how I can fix this all. Anyone have an idea? See screenshot below how it looks like now.

HTML Code:

<section >
        <h1>Our country</h1>
        <div >
            <a href="sub_history.html">
                <div >
                    <p>History</p>
                </div>
            </a>
            <div >
                <p>Culture</p>
            </div>
            <div >
                <p>Demographics</p>
            </div>
            <div >
                <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;
}

Hope somebody could help me out.

CodePudding user response：

Just change the background of the "a" tag not the div

<a  href="sub_history.html">
<div>
<p>History</p>
</div>
</a>

and for the "p" tag put the margin 90% (it's better)

CodePudding user response：

Anchor tags are by default meant as inline elements. So instead of being the container, it's supposed to be the anchor inside the container. (Although that's mostly history now a days and your approach is fine, but still let me show you how you could structure your code that way and solve your problem )

.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 >
  <h1>Our country</h1>
  <div >
    <div >
      <h2><a href="#">History</a></h2>
    </div>
    <div >
      <h2><a href="#">Culture</a></h2>
    </div>
    <div >
      <h2><a href="#">Demographics</a></h2>
    </div>
    <div >
      <h2><a href="#">Geographics</a></h2>
    </div>
  </div>
</section>