Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1453 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1398784
Aquineas2
Damoiseau
Posté le 02-07-2006 à 13:45:43  profilanswer
 

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
mood
Publicité
Posté le 02-07-2006 à 13:45:43  profilanswer
 

n°1398788
afbilou
pouet your life
Posté le 02-07-2006 à 13:56:51  profilanswer
 

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

n°1398789
Aquineas2
Damoiseau
Posté le 02-07-2006 à 13:58:08  profilanswer
 

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
n°1398848
Aquineas2
Damoiseau
Posté le 02-07-2006 à 16:40:28  profilanswer
 

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

n°1398855
mIRROR
Chevreuillobolchévik
Posté le 02-07-2006 à 17:14:50  profilanswer
 


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

n°1398861
Aquineas2
Damoiseau
Posté le 02-07-2006 à 17:47:28  profilanswer
 

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:

n°1398865
afbilou
pouet your life
Posté le 02-07-2006 à 18:09:20  profilanswer
 

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 ... ?>[...]'); }

n°1398867
mIRROR
Chevreuillobolchévik
Posté le 02-07-2006 à 18:15:16  profilanswer
 

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

n°1398873
Aquineas2
Damoiseau
Posté le 02-07-2006 à 18:25:42  profilanswer
 

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!

n°1398876
gatsu35
Blablaté par Harko
Posté le 02-07-2006 à 19:01:02  profilanswer
 

as tu mis un doctype sur ta page ?

mood
Publicité
Posté le 02-07-2006 à 19:01:02  profilanswer
 

n°1398897
Aquineas2
Damoiseau
Posté le 02-07-2006 à 20:11:30  profilanswer
 

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

n°1398912
gatsu35
Blablaté par Harko
Posté le 02-07-2006 à 20:45:02  profilanswer
 

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

n°1399132
Aquineas2
Damoiseau
Posté le 03-07-2006 à 08:30:07  profilanswer
 

okiche , merci du conseil  :)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[Résolu] Compléter les champs d'un PDF existant[résolu] Compteur de "place" dans classement
[résolu] plusieurs variables dans la condition if ?[résolu] interdire F5 d'une page pour éviter l'envoi de données
[C] "correspondance" possible entre FILE * et socket ? [résolu][résolu] affichage sur une requête
Image aléatoire[résolu] count pour classement ??
Résolu [XML JDOM] création de balise commentaire[résolu] SELECT défaillant ...
Plus de sujets relatifs à : Une image bien encadrée dans un <a>[résolu]


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR