IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

hover background-color ne remplit pas tout le champ.


Sujet :

Survol d'un élément en CSS (:hover)

  1. #1
    Membre à l'essai
    Femme Profil pro
    Inscrit en
    Décembre 2011
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2011
    Messages : 36
    Points : 20
    Points
    20
    Par défaut hover background-color ne remplit pas tout le champ.
    Bonjour,

    Je ne comprends pas pourquoi dans le code ci-après lorsque que je passe la souris sur l'un des menus la couleur ne change que sur la longeur du texte et non tout le container.

    Merci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
     
    <style>
    .menuTab{
    	background-color: white;
    }
    .menuTab li{
    	max-width: 5em;
    	background-color: Olive;
    	border: 2px solid #4a6a7c;
    	border-bottom: none;
    	border-radius: 0.4em 0.4em 0 0;
    	list-style-type: none;
    	margin:0;
    	padding:0;
    	padding-left: 0.3em;
    	display: inline-block;
    }
    .menuTab li a:hover{
    	background-color: PaleGreen;
    }
     
    body { background-color: grey;}
    </style>
    </head>
    <body>
     
    	<ul class="menuTab">
    		<li><a href="#">Rubrique 1</a></li>
    		<li><a href="#">Rubr 2</a></li>
    		<li><a href="#">Longue rubrique 3</a></li>
    		<li><a href="#">Rubrique et padding 4</a></li>
    	</ul>

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    .menuTab li a { display:block; }
    Dernière modification par Invité ; 05/05/2016 à 20h34.

  3. #3
    Membre à l'essai
    Femme Profil pro
    Inscrit en
    Décembre 2011
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2011
    Messages : 36
    Points : 20
    Points
    20
    Par défaut
    Merci,

    Cà ressemble à çà mais non, cela ne couvre pas tout "l'onglet".

  4. #4
    Invité
    Invité(e)
    Par défaut
    Ce sont les <a> qu'il faut styler en onglet.
    Pas les <li>.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    .menuTab {
      background-color: white;
    }
     
    .menuTab li {
      /*max-width: 6em;*/
      list-style-type: none;
      margin: 0;
      padding: 0;
      margin-left: 0.3em;
      display: inline-block;
    }
     
    .menuTab li a {
      display: block;
      background-color: Olive;
      border: 2px solid #4a6a7c;
      border-bottom: none;
      border-radius: 0.4em 0.4em 0 0;
      padding: 10px 10px 10px;
      margin-top: 10px;
      color: #fff;
      text-decoration: none;
      text-align: center;
    }
     
    .menuTab li a:hover {
      background-color: #CCCC3D;
      color: #4D4D00;
      padding: 15px 10px 10px;
      margin-top: 5px;
    }

    Variante
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .menuTab li a:hover {
      background-color: #CCCC3D;
      color: #4D4D00;
      padding: 14px 9px 10px;
      margin-top: 5px;
      border: 3px solid #4a6a7c;
      border-bottom: none;
    }
    Dernière modification par Invité ; 05/05/2016 à 21h08.

Discussions similaires

  1. Background-color ne remplit pas toute la page
    Par rvm31 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 28/07/2014, 20h00
  2. GtkCellRendererProgress ne remplit pas toute sa zone d'affichage
    Par xela dans le forum GTK+ avec C & C++
    Réponses: 0
    Dernier message: 11/02/2010, 23h28
  3. Background tableau: ne prend pas tout le tableau
    Par stefina87 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 28/01/2009, 18h20
  4. Mon JDesktopPane ne remplit pas toute ma JFrame
    Par Tijee dans le forum Agents de placement/Fenêtres
    Réponses: 7
    Dernier message: 16/01/2008, 04h18
  5. Background ne remplit pas toute la page
    Par brotelle dans le forum Balisage (X)HTML et validation W3C
    Réponses: 82
    Dernier message: 18/05/2006, 15h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo