Une image bien encadrée dans un <a>[résolu]

Une image bien encadrée dans un <a>[résolu] - HTML/CSS - Programmation

Marsh Posté le 02-07-2006 à 13:45:43    

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:
http://www.aquineascollection.com/vhdwebpack/vhd/aquineas/IE.jpg
 
FF:
http://www.aquineascollection.com/vhdwebpack/vhd/aquineas/FF.jpg
 
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 :
  1. ul#thumb
  2. {
  3. margin-top:1px;
  4. padding:0px;
  5. }
  6. #thumb li
  7. {
  8. display:inline;
  9. list-style-type:none;
  10. margin-left:5px;
  11. margin-right:5px;
  12. padding:0px;
  13. width:62px;
  14. height:62px;
  15. }
  16. #thumb a
  17. {
  18. display:inline;
  19. border:0px;
  20. width:62px;
  21. height:62px;
  22. overflow:auto;
  23. }
  24. #thumb a:link,#thumb a:visited
  25. {
  26. width:62px;
  27. height:62px;
  28. border:1px solid black;
  29. border-right:3px solid black;
  30. }
  31. #thumb a:hover
  32. {
  33. width:62px;
  34. height:62px;
  35. border:1px solid #FF0000;
  36. border-right:3px solid #FF0000;
  37. }


 
(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 :
  1. <div>
  2.    <ul id="thumb">
  3.        <li><a href="x"><img src="Photos/1mini.jpg" border="0"></a></li>
  4.        <li><a href="x"><img src="Photos/4mini.jpg" border="0"></a></li>
  5.        <li><a href="x"><img src="Photos/5mini.jpg" border="0"></a></li>
  6.    </ul>
  7. </div>


Message édité par Aquineas2 le 02-07-2006 à 18:26:02
Reply

Marsh Posté le 02-07-2006 à 13:45:43   

Reply

Marsh Posté le 02-07-2006 à 13:56:51    

Les liens des screenshots ne sont pas bons ?
Je ne peux pas les afficher.

Reply

Marsh Posté le 02-07-2006 à 13:58:08    

hmm..ils marchent chez moi pourtant...j'ai l'impression qu'ils sont bons...


Message édité par Aquineas2 le 02-07-2006 à 14:04:27
Reply

Marsh Posté le 02-07-2006 à 16:40:28    

Personne n'a d'idée? est ce la méthode qui est mauvaise? Je ne peux pas vraiment passer par un background-image car les cases son générées par un script php en fonction de la section photo visitée...

Reply

Marsh Posté le 02-07-2006 à 17:14:50    


Code :
  1. #thumb a, #thumb a img
  2. {
  3. display:block;
  4. border:0px;
  5. width:62px;
  6. height:62px;
  7. }


 
je promets rien mais y a de l idee

Reply

Marsh Posté le 02-07-2006 à 17:47:28    

j'avais essayé un truc de ce genre, mais l'attriut "block" vient contreidre mon atribut "display:inline" précédent, et du coup j'ai plus l'affiche voulu :(
Quoi qu'il en soit je vais opter  pour une solution qui fera intervenir un <div> flottant... je perd un peu en esthétique vu que je perd le "hover" sous IE, mais tant pis!
Merci pour ton aide  :jap:

Reply

Marsh Posté le 02-07-2006 à 18:09:20    

Aquineas2 a écrit :

Personne n'a d'idée? est ce la méthode qui est mauvaise? Je ne peux pas vraiment passer par un background-image car les cases son générées par un script php en fonction de la section photo visitée...


Rien ne t'empeche d'ecrire ton background-image malgre tout !
 

  • un background-image: url(mafoto.php?foto_id=tartampion);

avec génération de la bonne image dans le script mafoto.php.
 
ou
 

  • une feuille de style POUR ce background-image.

style.php : avec un header('text/css'); et définition du bon background image avec les structures de controle classique de PHP.
 
a { background-image: url ('[...] <?php if patati patata ... ?>[...]'); }

Reply

Marsh Posté le 02-07-2006 à 18:15:16    

sinon en general je prefere un lien que du code
on peut pas faire beaucoup d essais ou alors mettre sur le disque ...  
avec un lien on peut faire plein de tests en ligne
parce que je vois pas ou intervient le conflit si tes <li> gardent leur style inline

Reply

Marsh Posté le 02-07-2006 à 18:25:42    

hmm oki, la prochaine fois je mets un lien direct ;)
Afbilou : ta solution me semble interessante... Je la garde de côté pour l'instant dans la mesure où je pense avoir trouvé un compromis dans l'immédiat,mais je pense que j'y reviendrai plus tard! Meci beaucoup pour cette idée!

Reply

Marsh Posté le 02-07-2006 à 19:01:02    

as tu mis un doctype sur ta page ?

Reply

Marsh Posté le 02-07-2006 à 19:01:02   

Reply

Marsh Posté le 02-07-2006 à 20:11:30    

vi j'ai un doctype html...tu penses qu'il faudrait que je le change?

Reply

Marsh Posté le 02-07-2006 à 20:45:02    

Non c'était surtout pour te signaler que le doctype c'est très important dans une page

Reply

Marsh Posté le 03-07-2006 à 08:30:07    

okiche , merci du conseil  :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed