CODEWITHSUNDEEP
htmlcsshyperlinkbox
IncinV2
IncinV2

Reputation: 1

Css- how to make the whole div clickable that has a image and text: specific example

Here is the layout:

    .article-box
    {
      display: flex;
      border: 1px solid transparent;
       box-shadow: rgba(50, 50, 50, 0.74902) 10px 5px 8px -2px;
    }
    .article-box:hover
    {
      
      border: 1px solid transparent;
      box-shadow: rgba(50, 50, 50, 0.74902) 13px 8px 18px -2px;
    
    
    }
    .article-image
    {
      padding:3px;border:thick solid black;
      height: 250px;
      width:250px;
      display: inline-block;
      float:left;
    }
    
    .article-box-text
    {
      margin: 20px;
      height: 250px;
      width:450px;
      background-color: #ffffff;
      border: 1px solid black;
      opacity: 0.6;
    	flex: 1;
    }
    .article-box-text p
    {
    margin: 5%;
      font-weight: bold;
      color: #000000;
    
    }
    <div class="article-list">
        <div class="article-box">
        <a href="example.com">
        <img class="article-image" src="example.jpeg" alt="" width="150" height="150"/></a>
        <div class="article-box-text"><p>Example statement</p></div>
        </div>
        </div>

For this specific code and css, how would I be able to wrap the whole thing and make it clickable without distorting the setup. Because right now if I put around the article-box, it would mess up the setup and the boxes would appear to the top and bottom of each other. Basically I want a big box, with an image next to a box with text inside. The box and text should have separate borders and not overlap. The bigger box with the image and text itself should be clickable not just the image. I have tried multiple things on the internet and they would either messup the layout or not work at all leaving only the image clickable. Maybe the only option is to make the whole thing under a and try positioning them with each other?

Thanks for all your help.

Upvotes: 0

Views: 2554

Answers (2)

Jon P
Jon P

Reputation: 19772

HTML 5 is More permissive with what you can contain within an a tag (https://developer.mozilla.org/en/docs/Web/HTML/Element/a), so you can replace your article-box div with an a with the same class.

.article-box {
  display: flex;
  border: 1px solid transparent;
  box-shadow: rgba(50, 50, 50, 0.74902) 10px 5px 8px -2px;
}

.article-box:hover {
  border: 1px solid transparent;
  box-shadow: rgba(50, 50, 50, 0.74902) 13px 8px 18px -2px;
}

.article-image {
  padding: 3px;
  border: thick solid black;
  height: 250px;
  width: 250px;
  display: inline-block;
  float: left;
}

.article-box-text {
  margin: 20px;
  height: 250px;
  width: 450px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  flex: 1;
}

.article-box-text p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
<div class="article-list">
<a class="article-box" href="example.com">
    <img class="article-image" src="example.jpeg" alt="" width="150" height="150" />
    <div class="article-box-text">
      <p>Example statement</p>
    </div>
  </a>
</div>

Div and a side by side example: https://jsfiddle.net/y66pok0d/

Upvotes: 2

Patrick Moore
Patrick Moore

Reputation: 13344

A big problem is your use of <div> to contain the <p> element. Seems like removing the <div> and using other elements might get you there. They could all be contained within your <a> anchor. I would also set display to inline-block for the <a> anchor link.

Here's a starting point:

HTML

<div class="article-list">
    <div class="article-box">
    <a href="example.com">
    <img class="article-image" src="example.jpeg" alt="" width="150" height="150"/>
    <span class="article-box-text"><span>Example statement</span></span>
    </a>
    </div>
</div>

CSS

.article-box
{
  display: flex;
  border: 1px solid transparent;
   box-shadow: rgba(50, 50, 50, 0.74902) 10px 5px 8px -2px;
}
.article-box:hover
{

  border: 1px solid transparent;
  box-shadow: rgba(50, 50, 50, 0.74902) 13px 8px 18px -2px;
}
.article-box a
{
    display: inline-block;
}
.article-image
{
  padding:3px;border:thick solid black;
  height: 250px;
  width:250px;
  display: inline-block;
  float:left;
}

.article-box-text
{
  display: block;
  margin: 20px;
  height: 250px;
  width:450px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  flex: 1;
}
.article-box-text span
{
margin: 5%;
  font-weight: bold;
  color: #000000;

}

https://jsfiddle.net/nLv418e2/

Upvotes: 0

Related Questions