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 :

Menu déroulant qui se décale avec IE 7


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2012
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2012
    Messages : 73
    Par défaut Menu déroulant qui se décale avec IE 7
    Bonjour,

    Le menu déroulant se décale seulement avec IE 7
    Et il y a une sorte de padding qui ne se voit qu'avec IE 7

    Voici le code css et 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
    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
    127
    128
    129
    130
    131
    132
     
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    	background: #111 url(http://www.web-astronomie.fr/images/bg.png) repeat;
    	background-attachment: fixed;
    	cursor: default;
    	font-family: Tahoma;
    	font-size: 13px;
    }
    #nav {
    	list-style-type: none;
    	height: 120px;
    	width: 600px;
    	margin: 0 auto;
    	z-index: 90;
    }
    #nav li {
    	float: left;
    	margin-left: 5px;
    }
    #nav li a.first-link {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-left.png) no-repeat left top;
    	padding-left: 20px;
    	position: relative;
    	float: left;
    	z-index: 100;
    }
    #nav li a.first-link span {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-right.png) no-repeat right top;
    	padding: 0px 20px 0px 0px;
    	cursor: pointer;
    	line-height: 45px;
    	height: 46px;
    	color: #fff;
    	float: left;
    }
    #nav li a.first-link:hover {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-left-hover.png) no-repeat left top;
    }
    #nav li a.first-link:hover span {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-right-hover.png) no-repeat right top;
    }
    #nav li ul {
    	list-style-type: none;
    	position: absolute;
    	padding: 60px 0 10px;
    	margin: auto;
    	width: 182px;
    	float: left;
    	display: none;
    	z-index: 95;
    }
    *+html #nav li ul {
    	list-style-type: none;
    	position: absolute;
    	padding: 60px 0 10px;
    	margin: 0 auto;
    	width: 182px;
    	float: left;
    	display: none;
    	z-index: 95;
    }
    #nav li:hover ul {
    	display: block;
    }
    #nav .first {
    	background-image: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-1.png);
    	background-repeat: no-repeat;
    	height: 15px;
    	margin: 0px;
    }
    #nav .secondary {
    	background-image: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-2.png);
    	background-repeat: repeat-y;
    	height: 100%;
    }
    #nav .last {
    	background-image: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-3.png);
    	background-repeat: no-repeat;
    	height: 7px;
    }
    #nav ul li {
    	float: none;
    }
    </style>
    </head>
    <body>
     
    <ul id="nav">
    <li>
    	<a href="index.php" class="first-link"><span>Accueil</span></a>
    </li>
    <li>
    	<a href="index.php" class="first-link"><span>Communauté</span></a>
    	<ul>
    		<div class="first"></div>
    		<div class="secondary">
     
    		</div>
    		<div class="last"></div>
    	</ul>
    </li>
    <li>
    	<a href="index.php" class="first-link"><span>Mon compte</span></a>
    	<ul>
    		<div class="first"></div>
    		<div class="secondary">
     
    		</div>
    		<div class="last"></div>
    	</ul>
    </li>
    <li>
    	<a href="index.php" class="first-link"><span>Articles</span></a>
    </li>
    <li>
    	<a href="index.php" class="first-link"><span>Support</span></a>
    	<ul>
    		<div class="first"></div>
    		<div class="secondary">
     
    		</div>
    		<div class="last"></div>
    	</ul>
    </li>
    </ul>
     
    </body>
    </html>
    Vous pouvez tester ce code chez vous
    Merci d'avances pour vos réponses

  2. #2
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2012
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2012
    Messages : 73
    Par défaut Résolu
    Problème résolu.

    Il fallait ajouter :

    à #nav li ul.

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

Discussions similaires

  1. Réponses: 5
    Dernier message: 29/03/2013, 17h20
  2. Menu déroulant qui décale le contenu
    Par apt dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/05/2011, 19h02
  3. menu déroulant qui ne fontionne pas avec IE7 et 8.
    Par cireultra dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/05/2009, 14h25
  4. [HTML 4.0] Menu déroulant qui va pas avec IE
    Par jlb59 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 27/02/2009, 00h43
  5. menu déroulant qui s'active pas avec firefox
    Par Herveg dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 27/11/2008, 13h29

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