CODEWITHSUNDEEP
htmlcss
cgee
cgee

Reputation: 1887

an anchor tag in a div should wrap the div

I want to wrap an inner a-tag in a div

I thought this works with a display:block.

However, it does not work.

Here is my code (https://jsfiddle.net/x6hw0e3u/):

HTML:

<div class="column dmd-card-box">
  <div class="media image-top medium">
    <div class="media-body text-center">
      <div class="excerpt">
        <p><span class="fa fa-user-plus fa-4x"></span></p>
        <p><strong>Treffsicher Neukunden gewinnen</strong></p>
        <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>        </div>
    <a href="" class="button ">Neukunden gewinnen</a>
    </div>
  </div>
</div>

CSS:

.dmd-card-box{
  height:300px;
  border:1px solid black;
  width:25%;
}
.button{
  display:block;
}

What I want to reach is:

Is that possible?

Thank you.

Upvotes: 0

Views: 91

Answers (2)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

Easiest and recommended way to achieve what you want is to wrap the div inside the a tag:

<a href="" class="button ">
<div class="column dmd-card-box">
  <div class="media image-top medium">
    <div class="media-body text-center">
      <div class="excerpt">
        <p><span class="fa fa-user-plus fa-4x"></span></p>
        <p><strong>Treffsicher Neukunden gewinnen</strong></p>
        <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>        </div>
    </div>
  </div>
</div> 
</a>

If there is any constraint in doing this, then you should set the a tag with absolute position and 100% width and height:

.dmd-card-box
{
 position: relative;
}
.dmd-card-box a
{
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}

You would also need to remove the text inside the a tag for this method. Here is updated JSFiddle after using absolute positioning for the link: https://jsfiddle.net/x6hw0e3u/1/

.dmd-card-box{
  height:300px;
  border:1px solid black;
  width:25%;
  position: relative;
}
.button{
  display:block;
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
<div class="column dmd-card-box">
  <div class="media image-top medium">
    <div class="media-body text-center">
      <div class="excerpt">
        <p><span class="fa fa-user-plus fa-4x"></span></p>
        <p><strong>Treffsicher Neukunden gewinnen</strong></p>
        <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>        </div>
    <a href="" class="button "></a>
    </div>
  </div>
</div>

Upvotes: 1

Asons
Asons

Reputation: 87191

Updated

As you can't change markup, do like this, using position: absolute

.dmd-card-box {
  height: 300px;
  border: 1px solid black;
  width: 25%;
}
.media-body {
  position: relative;
}
.button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
<div class="column dmd-card-box">
  <div class="media image-top medium">
    <div class="media-body text-center">
      <div class="excerpt">
        <p><span class="fa fa-user-plus fa-4x"></span>
        </p>
        <p><strong>Treffsicher Neukunden gewinnen</strong>
        </p>
        <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>
      </div>
      <a href="" class="button ">
      </a>
    </div>
  </div>
</div>

For everyone who can change markup, do like this, where you put the div inside the a (as of HTML5 this is now valid)

.dmd-card-box {
  height: 300px;
  border: 1px solid black;
  width: 25%;
}

.button {
}
<div class="column dmd-card-box">
  <div class="media image-top medium">
    <div class="media-body text-center">
      <a href="" class="button ">
        <div class="excerpt">
          <p><span class="fa fa-user-plus fa-4x"></span></p>
          <p><strong>Treffsicher Neukunden gewinnen</strong></p>
          <p>Stellen Sie ihre Produkte genau den Kunden vor, die sich dafür interessieren.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions