CODEWITHSUNDEEP
htmlcss
Marc Ster
Marc Ster

Reputation: 2316

Link not working on div and image

I want to put a link over an image and over a div but it does not seem to work

<h2 style="font-size:25px;"> Unser Testsieger </h2>
<div style="width:50%; float:left;">
    <a style="display:block;cursor:pointer;" href="http://google.de">
        <img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76">
    </a>
    <a style="color:#fff;cursor:pointer;display:block;" href="http://google.de">
        <div style="cursor:pointer;width:220px; padding:15px; text-align:center; background-color:#FF9900;font-size:20px;margin-top:20px;">
            Bei Amazon kaufen
        </div>
    </a>
</div>

<div style="width:50%; float:right;margin-top:100px;font-size:18px;"
    <ul>
        <li style="color:green;font-size:22px;list-style-type:none;"> TOP Qualität </li>
        <li> BIO geprüft</li>
        <li> 500mg Kurkuma pro Kapsel </li>
        <li> Verbesserte Wirkung durch Piperin </li>
        <li>Lactosefrei, Fructosefrei, Glutenfrei</li>
    </ul>
</div>

Upvotes: 0

Views: 73

Answers (5)

Hardik Panchal
Hardik Panchal

Reputation: 1

<div>
    <a href="http://google.de">
        <div style="width:250px;max-height:250px;">

            <img style="width: 100%; display: inline-block;" alt="Brackets" src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" data-lazy-loaded="true">
    </a>
</div>

I hope this helps you...

Upvotes: 0

Asons
Asons

Reputation: 87303

Your markup is missing some close tags etc., so if you always format your markup with indentation, it will be easier to detect such mistakes.

May I also suggest you start using external CSS instead of inline (updated your sample with external CSS). The benefit is amongst other, easier-to-read-markup (which will make it easier to spot markup mistakes), make styles reusable and easier maintenance.

.h2 {
  font-size:25px;
}
.left {
  width:50%;
  float:left;
}
.left-inner {
  width:220px;
  padding:15px;
  text-align:center;
  background-color:#FF9900;
  font-size:20px;
  margin-top:20px;
}
.links {
  color:#fff;
  display:block;
}
.right {
  width:50%;
  float:right;
  margin-top:100px;
  font-size:18px;"
}
.li {
  color:green;
  font-size:22px;
  list-style-type:none;
}
<h2 class="h2"> Unser Testsieger </h2>
<div class="left">
  <a class="links" href="http://google.de">
    <img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76">
  </a>
  <a class="links" href="http://google.de">
    <div class="left-inner"> Bei Amazon kaufen </div>
  </a>
</div>
<div class="right">
  <ul>
    <li class="li"> TOP Qualität </li>
    <li> BIO geprüft</li>
    <li> 500mg Kurkuma pro Kapsel </li>
    <li> Verbesserte Wirkung durch Piperin </li>
    <li>Lactosefrei, Fructosefrei, Glutenfrei</li>
  </ul>
</div>

Upvotes: 1

subbu1191
subbu1191

Reputation: 1

your HTML is not proper.Few markups are missing.the Dom wouldnt have been constructed as u expected

try the below pice of code`

<h2 style="font-size:25px;"> Unser Testsieger </h2>
<div style="width:100%">
  <div style="width:50%; float:left;">
  <a style="display:block;cursor:pointer;" href="google.com">

  <img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76" /> 
  </a>

  <a style="color:#fff;cursor:pointer;display:block;" href="google.com"> <p style="cursor:pointer;width:220px; padding:15px; text-align:center; background-color:#FF9900;font-size:20px;margin-top:20px;"> Bei Amazon kaufen </p> </a>
</div>

<div style="width:50%; float:right;margin-top:100px;font-size:18px;">
  <ul>
    <li style="color:green;font-size:22px;list-style-type:none;"> TOP Qualität </li>
    <li> BIO geprüft</li>
    <li> 500mg Kurkuma pro Kapsel </li>
    <li> Verbesserte Wirkung durch Piperin </li>
    <li>Lactosefrei, Fructosefrei, Glutenfrei</li>
  </ul>
</div>
<div style="clear:both"></div>
</div>

`

Upvotes: 0

Mustafa K&#220;&#199;&#220;K
Mustafa K&#220;&#199;&#220;K

Reputation: 107

   <h2 style="font-size:25px;"> Unser Testsieger </h2>
<div style="width:50%; float:left;">
<a style="display:block;cursor:pointer;" href="http://google.de">

<img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76" /> </a>

<a style="color:#fff;cursor:pointer;display:block;" href="http://google.de"> <div style="cursor:pointer;width:220px; padding:15px; text-align:center; background-color:#FF9900;font-size:20px;margin-top:20px;"> Bei Amazon kaufen </div> </a>
</div>

<div style="width:50%; float:right;margin-top:100px;font-size:18px;">
<ul>
<li style="color:green;font-size:22px;list-style-type:none;"> TOP Qualität </li>
<li> BIO geprüft</li>
<li> 500mg Kurkuma pro Kapsel </li>
<li> Verbesserte Wirkung durch Piperin </li>
<li>Lactosefrei, Fructosefrei, Glutenfrei</li>
</ul>
</div>

Upvotes: 1

Byteshifter
Byteshifter

Reputation: 126

You have unclosed tags. It should be like this:

<h2 style="font-size:25px;"> Unser Testsieger </h2>
<div style="width:50%; float:left;">

<a style="display:block;cursor:pointer;" href="http://google.de">

<img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Kurkuma-Kapseln-229x300.png" alt="Kurkuma Kapseln" width="229" height="300" class="alignnone size-medium wp-image-76" /> </a>

<a style="color:#fff;cursor:pointer;display:block;" href="http://google.de"> <div style="cursor:pointer;width:220px; padding:15px; text-align:center; background-color:#FF9900;font-size:20px;margin-top:20px;"> Bei Amazon kaufen </div> </a>
</div>

<div style="width:50%; float:right;margin-top:100px;font-size:18px;">

<ul>
<li style="color:green;font-size:22px;list-style-type:none;"> TOP Qualität </li>
<li> BIO geprüft</li>
<li> 500mg Kurkuma pro Kapsel </li>
<li> Verbesserte Wirkung durch Piperin </li>
<li>Lactosefrei, Fructosefrei, Glutenfrei</li>
</ul>
</div>

Here's an example: https://jsfiddle.net/692L90st/

Also remember that you can't put 'div' tag into 'a', because 'div' is block tag and 'a' is inline. If you'll put block tag inside of inline tag it wouldn't be a valid html markup which may cause unexpected behavior.

Upvotes: 1

Related Questions