css block links and images

Question

Given this html:

<div class="nation">
    <a href="library.php?type=nation&amp;id=America">
        <div class="nation-image">
            <img src="nations/America.png" alt="snip" />
        </div>
        <h3>America</h3>
    </a>
</div>

the following CSS results in the entire <div class="nation"> becoming a clickable block link:

.nation {float: left; text-align: center; width: 189px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

but if I make the following single addition:

.nation {float: left; text-align: center; width: 189px;}

    .nation-image {height: 138px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

to specify the height of <div class="nation-image"> then the image (and only the image) is no longer a link, but the rest of the div (margin around it, h3 etc) remain a block link...

/I am teh confussd :-?

Answer 1

I wouldn't wrap block elements with inline elements like anchor tags. Put a call to a location-changing function right into clickable image, or even do it inline, as in the following rudimentary example:

<img src="nations/America.png" alt="snip" 
   onclick="javascript:location.href='library.php?type=nation&amp;id=America'" />

Then just float your image however you like.

Answer 2

This is invalid html try:

<div class="nation">
     <h3><a href="library.php?type=nation&amp;id=America" class="nation-flag" id="usa">
       America
    </a></h3>
</div>

You can then have a generic class for all flags. And then be specific for #usa and apply the flag as a background image. Using CSS you can display the href as a block and make it as big as you want.

Answer 3

Use your div.nation as a.nation instead. Add "display: block" to it to make it affect the entire parent div.

Answer 4

DEMO: http://jsbin.com/uyupu/2

your HTML struct must be someting like this:

<div class="nation">
<a href="#">
    <img src="your.jpg" alt="Daim Graffiti" id="usa" />
    <span class="nation-flag">America</span>
</a>
</div>

then your CSS:

    .nation {
      margin: 0;
      overflow: hidden;
      float: left;
      position: relative;
    }
    .nation a {
      text-decoration: none;
      float: left;
    }
    .nation a:hover {
      cursor: pointer;
    }

    .nation a img {
      float: left;
      margin: 0;
      border: none;
      padding: 10px;
      background: #fff;
      border: 1px solid #ddd;

/* note that you don't really need to set the Height 
but the width so the image auto scaling fine!*/

      width:200px
    }

    .nation a .nation-flag {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-size: 1.2em;
      color: #fff;
      background: #000;
      padding: 5px 10px;
      filter:alpha(opacity=65);
      opacity:.65;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
    /*--IE 8 Transparency--*/
    }