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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS problème de roll over en couleur ....

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS problème de roll over en couleur ....

n°1850784
astro13
Posté le 13-02-2009 à 12:36:48  profilanswer
 

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+
 

mood
Publicité
Posté le 13-02-2009 à 12:36:48  profilanswer
 

n°1850793
fluminis
Posté le 13-02-2009 à 13:16:16  profilanswer
 

.lien1 a {
display:block;
...
}


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
n°1850801
macgawel
Posté le 13-02-2009 à 13:28:21  profilanswer
 

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 :
  1. #conteneur_menu a { font-size:11px;
  2.    text-decoration:none;
  3.    color: #000000;
  4.    font-weight:bold;
  5.    display:block;
  6. }


 
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 :
  1. <div id="conteneur_menu">  
  2.     <div id="bt_lien1">  
  3.         <div class="lien1">
  4.             <a href="">lien1 </a>
  5.         </div>  
  6.     </div>
  7. </div>

(au passage, si tu clique sur le bouton http://forum-images.hardware.fr/themes_static/images_forum/1/viewbbcode.giftu 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 !

n°1850840
astro13
Posté le 13-02-2009 à 14:35:01  profilanswer
 

A cool
 
merci pour les infos je vais bosser dessus
 
a+


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

  CSS problème de roll over en couleur ....

 

Sujets relatifs
Problème placement de boite en CSS[Resolu] Problème de synchronisation des données !
[ASM-Nasm] Problème de comparaison nombreProblè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 
Plus de sujets relatifs à : CSS problème de roll over en couleur ....


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