Faire un lien sur une div

[vitalizo]

Bonsoir,

ça a l'air tellement con que je parie que c'est tout simple mais je bloque.
Je fais une div de 142*45 avec un fond vert. A l'interieur, un texte.
Je veux que le background de cette div passe en rouge quand on passe la souris dessus.

  <div class="infos"> 
    <div class="box"> 
    <a href="<?php echo $var1 ?>" target="blank" rel="nofollow"><?php echo $var2 ?></a>
    </div>           
    <img src="../images/news/<?php echo $var3 ?>.png" width="140px">
    </div>

.box {width:142px;height:45px;margin: 5px 5px 0 0;}
.box a {width:142px;height:45px;background-color:#efd129;;margin: 5px 5px 0 0;}
.box a:hover {width:142px;height:45px;background-color:#ecd551;;margin: 5px 5px 0 0;}

Avec ceci, le rectangle de ma div ne fait pas 142*45 mais colle aux dimensions du texte. Ce que je ne veux pas.

Une idée ?

 

[milkiway]

display:block

 

[vitalizo]

Quand je disais que c'était con... lol

Merci

 

[SpeedAirMan]

... quel rapport avec le lien dont tu parles dans le titre ?

Et moi qui ouvrait ce topic en me disant : "tiens, j'ai peut être une solution pour cette personne avec un onclick...".
Et pis ben non...

Pour info, tu n'as pas besoin de spécifier la hauteur de ton div .box (il s'ajustera automatiquement au contenu qui se trouve à l'intérieur).

Autre chose : tu spécifies la largeur et la hauteur de ton div, même chose pour l'élément a à l'intérieur de celui ci - les 2 valeurs sont identiques (largeur div = largeur a, hauteur div = hauteur a), sauf que, tu spécifies également une marge pour l'élément a... et là, ça risque d'avoir un rendu différent selon les navigateurs : certains verront le div devenir plus grand, d'autres verront le a (lien) devenir plus petit (je parle du a{margin: 5px 5px 0 0;}.)

Au passage, tu as une erreur dans ton CSS : 2 fois un point virgule à 2 reprises sur l'élément a.

 

[Blount]

Pourquoi ne pas mettre le « hover » sur le DIV :

.box {
    width: 142px;
    height: 45px;
    margin: 5px 5px 0 0;
    background-color: #efd129;
}
.box:hover {
    background-color: #ecd551;
}

Tu peux donc enlever les styles sur la balise « a ».

Conseil, indente ton code de cette manière. Tout sur une seule ligne, ça risque de vite devenir merdique à maintenir.