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 :

Changer image au survol dans un menu


Sujet :

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

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2003
    Messages
    408
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Mai 2003
    Messages : 408
    Par défaut Changer image au survol dans un menu
    Bonjour,

    Je suis en train de refaire le site de ma société et je bloque avec un hover sur le menu bouton "accueil"
    le menu est arrondi au deux extrémités et au survol de la gauche je n'arrive pas a avoir l'arrondi le survol est carré

    cf : http://v4.apvl.com/template.html

    pourtant dans mon CSS j'ai bien redefini un paramètre...
    voici le code CSS
    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
     
    #menu {
    	list-style:none;
    	width:990px;
    	margin:auto;
    	height:30px;
    	padding:0px;
    	-webkit-border-bottom-right-radius: 10px;
    	-webkit-border-bottom-left-radius: 10px;
    	-moz-border-radius-bottomright: 10px;
    	-moz-border-radius-bottomleft: 10px;
    	border-bottom-right-radius: 10px;
    	border-bottom-left-radius: 10px;
    	background: #E3000B;
    	background-image:url(../images/design/menu/menu-rouge.png);
    }
     
    #menu li {
    	float:left;
    	display:block;
    	text-align:center;
    	position:relative;
    	padding: 7px 0px 0px 0px;
    	border:none;
    	height:30px;
    	width:110px;
    }
     
    #menu li:hover {
    	padding: 7px 0px 0px 0px;
    	background-image:url(../images/design/menu/menu-gris.png);
    	background-repeat:repeat-x;
    }
     
     
     
    #accueil:hover {
    	padding: 7px 0px 0px 0px;
    	background-image:url(../images/design/menu/menu-gris.png);
    	background-repeat:repeat-x;
    	-webkit-border-bottom-left-radius: 10px;
    	-moz-border-radius-bottomleft: 10px;
    	border-bottom-left-radius: 10px;
    }
     
    #menu li a {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px; 
    	color: #fff;
    	display:block;
    	text-decoration:none;
    	padding:0;
    	margin:0;
    }
     
    #menu li:hover a {
    	color:#fff;
    }
     
    .dropdown_1column{
    	margin:6px 0 0 0;
    	float:left;
    	position:absolute;
    	left:-999em; /* Hides the drop down */
    	text-align:left;
    	padding:0px 5px 5px 5px;
    	background:#6e6e6e;
    	-moz-border-radius: 0px 0px 10px 10px;
    	-webkit-border-radius: 0px 0px 10px 10px;
    	border-radius: 0px 0px 10px 10px;
    	width: 210px;
    }
     
     
    #menu li:hover .dropdown_1column {
    	left:0px;
    	top:auto;
    }
     
     
    #menu .menu_right {
    	float:right;
    	margin-right:0px;
    }
    #menu li .align_right {
    	-moz-border-radius: 0px 0px 10px 10px;
        -webkit-border-radius: 0px 0px 10px 10px;
        border-radius: 0px 0px 10px 10px;
    }
     
    #menu li:hover .align_right {
    	left:auto;
    	right:0px;
    	top:auto;
    }
     
    #menu ul li {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	text-align:left;
    }
     
     
    #menu li ul {
    	list-style:none;
    	padding:0;
    	margin:10px 0 0px 10px;
    }
    #menu li ul li {
    	font-size:12px;
    	position:relative;
    	padding:0;
    	margin:0;
    	float:none;
    	text-align:left;
    	width:180px;
    }
    #menu li ul li:hover {
    	border:none;
    	padding:0;
    	margin:0;
    	background:none;
    }
    #menu li ul li a:hover {
    	color:#000000;
    }
    et l'HTML
    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
     
     <ul id="menu">
    		<li id="accueil"><a href="#">Accueil</a></li>
               <li ><a href="#" >La société</a>
                 <div class="dropdown_1column">
                        <ul>
                            <li><a href="#">Nos domaines d'intervention</a></li>
                            <li><a href="#">Nos références</a></li>
                            <li><a href="#">Notre équipe</a></li>
                            <li><a href="#">Plan d'accès</a></li>
                        </ul>   
                 </div>
               </li>    
                <li ><a href="#" >APVL &amp; Vous</a>
                  <div class="dropdown_1column">
                        <ul>
                            <li><a href="#">Actualités</a></li>
                            <li><a href="#">Rendez-vous</a></li>
                            <li><a href="#">Liens</a></li>
                        </ul>   
                  </div>
               </li>    
                <li ><a href="#" >Dosimétrie</a>
                  <div class="dropdown_1column">
                        <ul>
                            <li><a href="#">Dosimétrie opérationnelle</a></li>
                            <li><a href="#">Dosimétrie passive</a></li>
                            <li><a href="#">Textes officiels</a></li>
                        </ul>   
                  </div>
               </li>    
                <li ><a href="#" >Radioprotection</a>
                  <div class="dropdown_1column">
                        <ul>
                            <li><a href="#">Radioprotection</a></li>
                            <li><a href="#">Textes officiels</a></li>
                        </ul>   
                  </div>
               </li>    
                <li ><a href="#" >Services</a>
                  <div class="dropdown_1column">
                        <ul>
                            <li><a href="#">Maintenance / Vérification</a></li>
                            <li><a href="#">Installation / Mise en service</a></li>
                            <li><a href="#">Formation</a></li>
                        </ul>   
                  </div>
        </li>    
                <li ><a href="#" >Catalogue</a>
                  <div class="dropdown_1column">
                        <ul>
                            <li><a href="#">Connectez-vous</a></li>
                            <li><a href="#">Inscrivez-vous</a></li>
                        </ul>   
                  </div>
        </li>    
          <li ><a href="#" >Occasions</a>
                  <div class="dropdown_1column">
                        <ul>
                            <li><a href="#">Connectez-vous</a></li>
                            <li><a href="#">Inscrivez-vous</a></li>
                        </ul>   
                  </div>
        </li>    
          <li ><a href="#" >Contact</a>
                  <div class="dropdown_1column align_right">
                        <ul>
                            <li><a href="#">Contactez-nous</a></li>
                            <li><a href="#">Implantation commerciale</a></li>
                        </ul>   
                  </div>
        </li>    
    </ul>
    Merci d'avance pour votre aide

    Ludo

  2. #2
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Bonjour,

    Il serait préférable d'appliquer le border-radius sur l'élément <li> pour éviter le problème.

    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
    33
    34
    35
    36
    #menu {
    	list-style:none;
    	width:990px;
    	margin:auto;
    	height:30px;
    	padding:0;		
    } 
    #menu li {
    	float:left;	
    	text-align:center;
    	position:relative;
    	padding: 7px 0 0 0;	
    	height:23px;
    	width:110px;	
    	background:url(../images/design/menu/menu-rouge.png) repeat-x;
    } 
    #menu li:hover {	
    	background:url(../images/design/menu/menu-gris.png) repeat-x;
    } 
    #menu li:first-child {	
    	-webkit-border-bottom-left-radius: 10px;
    	-moz-border-radius-bottomleft: 10px;
    	border-bottom-left-radius: 10px;	
    }
    #menu li:last-child {	
    	-webkit-border-bottom-right-radius: 10px;
    	-moz-border-radius-bottomright: 10px;
    	border-bottom-right-radius: 10px;	
    } 
    /* Sur le dernier onglet on enlève l'arrondi au survol à cause du sous-menu qui apparaît */
    #menu li:last-child:hover {
    	-webkit-border-bottom-right-radius: 0px;
    	-moz-border-radius-bottomright: 0px;
    	border-bottom-right-radius: 0px;	
    }
    /* --- */

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2003
    Messages
    408
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Mai 2003
    Messages : 408
    Par défaut
    merci beaucoup cela fonctionne très bien

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. image au survol d'un menu
    Par jaymiles dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 14/06/2012, 09h55
  2. changer image d'un li quand clic dans un menu
    Par niro75 dans le forum jQuery
    Réponses: 2
    Dernier message: 03/05/2010, 13h34
  3. Image mal positionnée dans le menu
    Par cedric/copy dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 12/02/2009, 16h12
  4. Changer image de bg dans css
    Par Tail dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/09/2008, 13h38
  5. code HTML pour mettre une image en background dans un menu
    Par Link14 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 16/10/2005, 12h11

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