CSS problème de roll over en couleur ....
CSS problème de roll over en couleur .... - HTML/CSS - Programmation
Marsh Posté le 13-02-2009 à 13:16:16
.lien1 a {
display:block;
...
}
---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Marsh Posté le 13-02-2009 à 13:28:21
Bonjour.
Il faut refléchir... Et connaître un peu les propriétés de ce qu'on utilise.
En l'occurence :
- ton "fond gris" s'applique à ton DIV bt_lien1
- Le rollover s'applique à ton lien.
Connaissance des propriétés :
Là, il faut comprendre la différence entre les éléments "block" et les éléments "inline".
Par défaut, la balise DIV définit un bloc. Sa longueur, si elle n'est pas déterminée dans le CSS, est le maximum possible.
Par défaut, la balise A définit un élément "inline". Sa longueur est donc exactement celle du texte qui est dedans.
=> Le lien est "plus petit" que le "bouton".
=> Solution : définir le lien comme un bloc.
Code :
|
Et puis c'est mon jour de bonté...
1. Il y a un </div> de trop.
Mon conseil : pense à faire un code bien indenté, tu t'y retrouveras mieux. Par exemple :
Code :
|
(au passage, si tu clique sur le bouton 
tu noteras que j'ai mis mon code dans une balise qui permet de le présenter)
2. N'utiliser les DIV qu'en dernier ressort.
C'est à dire, tant que tu peux trouver un balisage significatif, utilise-le. Les DIV (comme leur pendant "inline" les SPAN) ne doivent être utilisés que si on ne peut rien trouver d'autre.
En l'occurence, un menu n'est rien d'autre qu'une liste de liens.
=> Utilise une liste, et mets la en forme avec le CSS.
2. Moins on en fait, mieux c'est... Pourquoi utilises-tu autant de DIV ?
Un principe de base qui te sera très utile : A partir du moment où un DIV ne contient qu'un objet, c'est qu'il n'est pas nécessaire !
Sujets relatifs:
- Problème placement de boite en CSS
- [Resolu] Problème de synchronisation des données !
- [ASM-Nasm] Problème de comparaison nombre
- Problème avec If et Case dans VBA...
- Probleme sur Eclipse
- [PHP] Problème Array : test de valeurs negatives de suite
- [RESOLU] [PHP/MYSQL] Problème d'exécution de requete imbriqué
- probleme de control par gotoandstop sur une anim.swf
- probleme mise en page de mon site
Marsh Posté le 13-02-2009 à 12:36:48
Bonjour
Je souhaite réaliser un menu avec plusieurs boutons sur fond gris et lorsque l on passe la souris il y a un rollover de couleur différente sur chaque bouton. J ai reussi à mettre le code pour changer la couleur lors du rollover mais le probleme est que cette dernier ne depasse pas le texte.
Serait il possible de savoir comment faire pour que la couleur du rollover fasse la meme taille que mon fond gris ?
Voila mon code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Document sans nom</title>
<link href="hardware.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur_menu">
<div id="bt_lien1">
<div class="lien1">
<a href="">lien1 </a> </div>
</div>
</div>
</div>
</body>
</html>
et mon code css:
/* CSS Document */
#conteneur_menu {
width: 900px;
height: 14px;
background-color:#FFCCCC;
position: absolute;
top: 94px;
left: 0px;
}
#conteneur_menu a { font-size:11px;
text-decoration:none;
color: #000000;
font-weight:bold;
}
#bt_lien1 {
width:100px;
height:14px;
position:absolute;
top:0px;
left:0px;
text-align:center;
border-right: 4px solid #FFFFFF;
background-color:#CCCCCC;
}
#bt_lien1 a:hover {
background-color:#FFFFCC;
color:#000000;
}
J ai determiné un id pour le bouton et j ai pensé que mettre une class au bouton aurai permis d agir sur le rollover unique de ce dernier.
Voila je tourne en rond donc du coup si quelqun a un conseil ca serai cool.
Bonne journée
a+