Bon alors mon problème...
Je travaille en ce moment sur un portfolio sur internet, et pour cela, arrive un moment où j'ai besoin d'avoir des images me servant de liens.
J'ai donc utilisé une structure <ul><li><a>, afin d'avoir des liens bien organisés, et stylisables...
J'ai rajouté des "borders" à chaque <a> afin d'avoir des liens un peu stylisés, mais autant sur IE ces borders vont bien entourer l'image comme je veux, autant sous FF, la hauteur de l'encadrement est beaucoup plus petite que l'image qu'elle contient :
IE:
FF:
J'ai essayé de bricoler en insérant un "font-size" comme attribut, afin de forcer la hauteur de la cellule, mais il apparait alors un décalage entre la border du bas etl'image..
bref , je m'en sors pas, et j'esperais que qql1 pourrait me donner un coup de main, merci!
Le code CSS :
Code :
- ul#thumb
- {
- margin-top:1px;
- padding:0px;
- }
- #thumb li
- {
- display:inline;
- list-style-type:none;
- margin-left:5px;
- margin-right:5px;
- padding:0px;
- width:62px;
- height:62px;
- }
- #thumb a
- {
- display:inline;
- border:0px;
- width:62px;
- height:62px;
- overflow:auto;
- }
- #thumb a:link,#thumb a:visited
- {
- width:62px;
- height:62px;
- border:1px solid black;
- border-right:3px solid black;
- }
- #thumb a:hover
- {
- width:62px;
- height:62px;
- border:1px solid #FF0000;
- border-right:3px solid #FF0000;
- }
|
(la hauteur de l'image que j'insère est 62px)
(Chaque ligne d'image est gérée par un <ul> différent de celles qui l'entourent)
Le code HTML:
Code :
- <div>
- <ul id="thumb">
- <li><a href="x"><img src="Photos/1mini.jpg" border="0"></a></li>
- <li><a href="x"><img src="Photos/4mini.jpg" border="0"></a></li>
- <li><a href="x"><img src="Photos/5mini.jpg" border="0"></a></li>
- </ul>
- </div>
|
Message édité par Aquineas2 le 02-07-2006 à 18:26:02