28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Div cliquable décalé avec la balise <br>

Bonjour à tous,

Au menu du jour, une <div> cliquable grâce à display:block ; height:100% ; width:100% en CSS. A la base tout va bien, l'ensemble de la div est cliquable mais dès que je veux centrer le texte de la balise <a>, ca descend aussi la zone cliquable...


<div id="homestaging9t" class="link">
<br /><br /><br />
<a href="index.html">
Accueil
</a>
</div>




#homestaging9t {
position:absolute;
left:490px;
top:330px;
width:240px;
height:160px;
}

.link a {
display:block;
width:100%;
height:100%;
}


Biensur, dès que le retire les "<br /><br /><br />", tout est ok. Avez vous une astuce?
Modifié par pika28 (15 Oct 2009 - 20:04)
Si je joue sur le padding, ca modifie la hauteur de la boite, je suis obliger de tricher sur la hauteur du bloc dans ces cas la.

En gros, si je mets un padding-top de 60px, il faut que je passe mon bloc de 160 à 100px de hauteur.

Est gênant d'un point de vue validation?
Je comprends pas bien le problème, ton bloc fait de toute manière une certaine hauteur, prenant en compte 3 sauts de ligne + la ligne du lien. Si tu remplace tes 3 sauts de lignes dans le code html par du padding en CSS, avec la bonne valeur, ça ne doit en rien augmenter la hauteur de ton bloc.

Parallèlement, je te conseillerai de faire en sorte de ne pas fixer de hauteur en unité fixe, car en cas d'agrandissement du texte, il peut y avoir perte d'information du fait qu'elle se trouve sous la hauteur autorisée de la boite. Smiley cligne
a écrit :
Est gênant d'un point de vue validation?


Je dirais que non car tant que ton code est sémantiquement correct la validation le sera aussi.
Cependant, je pense que ça peut être gênant pour l'accessibilité et la comptabilité entre navigateurs, à voir...

EDIT : On est bien synchro Mikachu Smiley lol .
Modifié par jQz (14 Oct 2009 - 15:24)
Ok je testerais sous tous les navaigateurs de toute manière.

J'ai pas bien compris non plus le coup de la hauteur fixe. vu l'architecture un speciale du site, je suis obligé d'avoir des bloc de 240px X 160px.

EDIT : Effectivement, le code n'est pas compatible avec tous les navigateurs. donc je ne peux pas centrer le texte verticalement Smiley confus
Modifié par pika28 (14 Oct 2009 - 15:51)
UP...

Une autre idée pour faire un div cliquable avec le texte centré verticalement? Il reste la solution des GIF mais ça alourdi le site si je dois mettre 2 gif en plus par lien.
Bonsoir, problème résolu, il suffisait de rajouter un espace inssecable avant les <br /> et le tour est joué.

<div id="homestaging9t" class="link"> 
<br /><br /><br /> 
<a href="index.html"> 
Accueil 
</a> 
</div>
Sujet clos
Aller à