FORUM Tom's Hardware » Programmation » HTML / Javascript » petit probleme de CSS
 

petit probleme de CSS

Il y a 427 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici
Ajouter une réponse



 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : petit probleme de CSS
 
Plus d'informations

Voila le problème:
J'ai mis une image qui sert de lien. Jusque là rien d'étrange.
Mais le probleme c'est qu'une bande de la couleur du lien apparait en bas de l'image.
En fait la zone de lien depasse de l'image et c'est génant. (j'utilise firefox)
Voyez vous meme ici (j'ai mis l'image seule et pares l'image dans un lien)

Voici mon code CSS

body{background-color:#8f1818; font-size:8pt; font-family:Verdana,sans-serif; color:white;}
a{margin:0px;padding:0px;}
a:visited{background-color:white;color:white;text-decoration:none;font-weight:bold;}
a:active{background-color:white;color:white;font-weight:bold;}
a:link{background-color:white;color:white;text-decoration:none;font-weight:bold;}
a:hover{background-color:white;color:#d7d7d7;font-weight:bold;}
img{border-style:none;}



Voila si quelqu'un a la solution...

Inside my own Second Life

Première chose : quand tu postes du code, utilise la balise [code] prévue à cet effet : bouton http://img.presence-pc.com/forum/icones/message/c.gif ;)..

Ensuite, pense toujours à aérer un minimum ton code, c'est toujours plus facile à lire, surtout pour toi.. Quelques espaces de séparation et des tabulations pour indiquer les arborescences au sein des groupes d'objets (exemple : l'objet "fils" en retrait par rapport à l'objet "parent", que ce soit dans les CSS comme dans le code (X)HTML ; si tu peux, évidemment ;))..

Et c'est inutile de redéfinir des règles qui, en CSS, sont héritables et héritées d'objet parent en objet enfant.. Ce n'est toutefois pas toujours vrai, selon les cas..

Apparemment, ton image n'est pas correctement définie : je ne vois pas la définition de ses dimensions dans ta CSS (les attributs de dimensions devienne inutiles dans le code HTML).. Sinon, il y a une erreur dans ta définition de bordure d'image : c'est 'border', et pas 'border-style'..

Code :
  1. body {background-color: #8f1818; font-size: 8pt; font-family: Verdana, sans-serif; color: white; }
  2. a { margin: 0px; padding: 0px; background-color: white; color: white; text-decoration: none; font-weight: bold; }
  3.     a:hover { color: #d7d7d7; } // ici, comme pour n'importe quel objet, la pseudo-classe de survol hérite normalement des propriétés de l'objet parent <a> (à vérifier tout de même)
  4. img { border: none; width: 100px; height: 50px; } // j'ai ajouté des tailles totalement arbitraires, mais c'est pour l'exemple



Pour l'image, tu peux ajouter la règle 'display: block' dans le cas où ton image est "indépendante" dans la page.. Sinon, elle est considérée par défaut comme 'display: inline' (objet "en ligne", notamment lorsqu'on insère une image dans le texte d'un paragraphe)..

Sinon, si ça ne fonctionne pas, il faudra qu'en plus des règles CSS tu postes aussi l'extrait de code HTML concernant ton lien ;)..

:jap:


Message édité par Johan_et_P irlouit le 02-07-2006 à 19:58:34

---------------
Retrouvez moi sur mon blog : http://www.nicolasullern.net/leblog/
Et aussi sur :
http://www.linkedin.com/in/nicolasullern
http://www.viadeo.com/fr/profile/nicolas.ullern
http://www.copaing.net/johanpirlouit/
Plus d'informations

Merci bien. :D
J'ai suivi ton conseil pour l'héritage.
Pour l'image j'ai mis vertical-align:bottom


Aller à :
Ajouter une réponse
  FORUM Tom's Hardware » Programmation » HTML / Javascript » petit probleme de CSS
 

Annonces Google
Publicité