liens bloc css et images

Question

Compte tenu de cette 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> 

les résultats CSS suivants dans l'ensemble <div class="nation"> devenir un lien de bloc cliquable:

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

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

mais si je fais la seule addition suivante:

.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;} 

pour spécifier la hauteur de <div class="nation-image"> puis l'image (et seulement le image) n'est plus un lien, mais le reste de la div (marge autour de lui, h3 etc.) reste un lien de bloc.

Je suis confus.

Answer 1

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

votre struct HTML doit être someting comme ceci:

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

alors votre 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--*/ 
    } 

Answer 2

Je ne voudrais pas emballer des éléments de bloc avec des éléments en ligne comme des étiquettes d'ancrage. Mettre un appel à un emplacement changeant fonction droite dans l'image cliquable, ou même le faire en ligne, comme dans l'exemple suivant rudimentaire:

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

Puis juste flotter votre image comme bon vous semble.

Answer 3

C'est d'essayer html invalide:

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

Vous pouvez alors une classe générique pour tous les drapeaux. Et puis soyez spécifique pour #usa et appliquez le drapeau comme image de fond. En utilisant CSS, vous pouvez afficher le href en bloc et le rendre aussi grand que vous le souhaitez.

Answer 4

Utilisez plutôt votre div.nation comme a.nation. Ajoutez "display: block" pour l'affecter à la div parent entière.