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

HTML Discussion :

Menu deroulant


Sujet :

HTML

  1. #1
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations forums :
    Inscription : Octobre 2013
    Messages : 5
    Par défaut Menu deroulant
    Bonjour à tous,
    Je suis en train de m'exercer à créer un site et en voulant créer un menu je me suis retrouvé confronté à un problème...
    Je vous transmet les images pour que vous compreniez mieux :

    image 1 :
    image 2 :

    Sur la premiere image on voit que le menu deroulant s'affiche normalement mais quand je change de page, le meme menu est applati (image 2)..
    Est ce que quelqu'un saurais d'où peut venir ce problème ?

    Merci d'avance

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui, c'est un problème très courant : ça vient du code.

    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations forums :
    Inscription : Octobre 2013
    Messages : 5
    Par défaut
    Merci pour ta réponse

    Le code est le même pour les 2 pages c'est ca que je ne comprend pas..

  4. #4
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Par défaut
    Par définition, si deux pages ayant le même code ne sont pas identiques, c'est que ce n'est pas le même code !

    T'aurais quand même pu être un peu plus précis Bovino, parce que "ça vient du code" c'est large comme un râteau.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  5. #5
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations forums :
    Inscription : Octobre 2013
    Messages : 5
    Par défaut
    J'ai beau regardé je ne vois pas de différences..
    Personne n'a la solution ?

  6. #6
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Bonjour,

    pouvez-vous poster votre code HTML et CSS s'il vous plait.

  7. #7
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations forums :
    Inscription : Octobre 2013
    Messages : 5
    Par défaut
    page correcte:

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Biscuiterie</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<meta name="description" content="Biscuiterie" />
    	<meta name="keywords" content="biscuiterie artisanale" />
    	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    	<div id="header">
    		<div id="logo">
    		<a href="index.html" title="Lien index">
    			<img src="HD/Logo2.png" alt="Mon Logo" />
    		</a>	
    		</div>
    		<div id="h1">
    		<h4>Biscuiterie Artisanale </h4>
    		<h1>Biscuiterie</h1>
    		</div>
    		<div>
    			<ul id="menu">
    				<li><a href="index.html">Accueil</a></li>
    				<li><a href="#">Nos produits</a>
    					<ul class="sousMenu">
    						<li><a href="page1.html">Catégorie 1</a></li>
    						<li><a href="page2.html">Catégorie 2</a></li>
    						<li><a href="page3.html">Catégorie 3</a></li>
    						<li><a href="page4.html">Catégorie 4</a></li>
    						<li><a href="page5.html">Catégorie 5</a></li>
    						<li><a href="page6.html">Catégorie 6</a></li>
    					</ul>
    				</li>
    				<li><a href="#">Capitales</a>
    					<ul class="sousMenu">
    						<li><a href="#">Paris</a></li>
    						<li><a href="#">Londre</a></li>
    					</ul>
    				</li>
    				<li><a href="#">Prénoms</a>
    					<ul class="sousMenu">
    						<li><a href="#">Emilie</a></li>
    						<li><a href="#">Pierre</a></li>
    						<li><a href="#">Lionel</a></li>
    						<li><a href="#">Virginie</a></li>
    						<li><a href="#">Sebastien</a></li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    	</div>
    </head>
    <body>
    	<div id="categories">
    		<div id="categoriea">
    			<a href="page1.html" title="Lien vers page1">
    				<img src="HD/catégorie 1.jpg" id="categoriea"/>
    			</a>	
    			<a href="page2.html" title="Lien vers page2">
    				<img src="HD/catégorie 2.jpg" id="categorieb"/>
    			</a>
    			<a href="page3.html" title="Lien vers page3">
    				<img src="HD/catégorie 3.jpg" id="categoriec"/>
    			</a>
    			<a href="page4.html" title="Lien vers page4">
    				<img src="HD/catégorie 4.jpg" id="categoriea"/>
    			</a>
    			<a href="page5.html" title="Lien vers page5">
    				<img src="HD/catégorie 2.jpg" id="categorieb"/>
    			</a>
    			<a href="page6.html" title="Lien vers page6">
    				<img src="HD/catégorie 3.jpg" id="categoriec"/>
    			</a>
    		</div>
    	</div>
    	<div id="content">
    	</div>
    	<div id="footer">
    	</div>
    </body>
    </html>
    Page non correcte :

    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
    <html>
    <head>
    	<title>Biscuiterie</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<meta name="description" content="Biscuiterie" />
    	<meta name="keywords" content="biscuiterie artisanale" />
    	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    	<div id="header">
    		<div id="logo">
    		<a href="index.html" title="Lien index">
    			<img src="HD/Logo2.png" alt="Mon Logo" />
    		</a>	
    		</div>
    		<div id="h1">
    		<h4>Biscuiterie Artisanale </h4>
    		<h1>Biscuiterie</h1>
    		</div>
    		<div>
    			<ul id="menu">
    				<li><a href="index.html">Accueil</a></li>
    				<li><a href="#">Nos produits</a>
    					<ul class="sousMenu">
    						<li><a href="page1.html">Catégorie 1</a></li>
    						<li><a href="page2.html">Catégorie 2</a></li>
    						<li><a href="page3.html">Catégorie 3</a></li>
    						<li><a href="page4.html">Catégorie 4</a></li>
    						<li><a href="page5.html">Catégorie 5</a></li>
    						<li><a href="page6.html">Catégorie 6</a></li>
    					</ul>
    				</li>
    				<li><a href="#">Capitales</a>
    					<ul class="sousMenu">
    						<li><a href="#">Paris</a></li>
    						<li><a href="#">Londre</a></li>
    					</ul>
    				</li>
    				<li><a href="#">Prénoms</a>
    					<ul class="sousMenu">
    						<li><a href="#">Emilie</a></li>
    						<li><a href="#">Pierre</a></li>
    						<li><a href="#">Lionel</a></li>
    						<li><a href="#">Virginie</a></li>
    						<li><a href="#">Sebastien</a></li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    	</div>
    </head>
    <body>
    	<div id="content">
    		<h1 id="titre1">Page 1</h1>
    		<p>Lorem Elsass ipsum commodo vulputate Morbi rossbolla yeuh. pellentesque munster sed adipiscing libero. sed eleifend hopla dui knepfle ftomi! 
    	rucksack non semper id, morbi leverwurscht hopla amet, Carola Strasbourg knack gravida tristique Christkindelsmärik ornare Salu*bissame ac mollis 
    	baeckeoffe Wurschtsalad sagittis Miss*Dahlias kuglopf amet tellus porta libero, dignissim Mauris wie ornare et lotto-owe sit leo bredele wurscht 
    	ullamcorper suspendisse in, Richard*Schirmeck Kabinetpapier lacus hop gal non consectetur vielmols, réchime kougelhopf Spätzle gewurztraminer 
    	Oberschaeffolsheim aliquam schnaps flammekueche schneck quam, placerat s'guelt eget risus, libero, messti*de*Bischheim kartoffelsalad Gal. 
    	dolor Verdammi Pellentesque Oberschaeffolsheim hopla Coopé*de*Truchtersheim condimentum picon*bière rhoncus bissame elementum geïz senectus 
    	météor DNA, turpis, salu Salut*bisamme schpeck quam. mänele merci*vielmols id ac varius und Pfourtz*! Racing. sit sit Heineken hopla tchao*
    	bissame jetz*gehts*los nüdle ante ch'ai nullam tellus amet Huguette hoplageiss Chulien chambon leo auctor, blottkopf, elit turpis mamsell geht's 
    	Hans Yo*dû. purus Chulia*Roberstau habitant Gal*! barapli so . </p>		
    	</div>
    	<div id="footer">
    	</div>
    </body>
    </html>
    Code CSS :

    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
    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
    * { margin: 0; padding: 0; }
     
    html { background-color: #FFFFCC; }
    a {text-decoration: none; }
    #header {
    height: 282px;
    width: 100%;
    background-image: url('../HD/Banniere.jpg');
    background-repeat: no-repeat;  
    background-size: cover; 
    }
     
    #logo { float: right; margin-top: 27px; margin-right: 50px; }
    #h1{ float: left; margin-top: 100px; font-size: 50px; margin-left: 140px; color: white; font-family: Giddyup Std; text-shadow: #FF0000 1px 1px 1px; }
    #categoriea { margin-top: 50px; margin-left: 87px; }
    #categorieb { margin-top: 50px; margin-left: 50px; }
    #categoriec { margin-top: 50px; margin-left: 50px; }
    #titre1 { margin-top: 50px; margin-left: 50px; font-family: Giddyup Std; font-size: 35px; }
     
    p {
    	font-family: Arial;
    	text-align : justify;
    	color : blue;
    	font-size: 15px;
    	letter-spacing: 2px;
    	margin-left: 100px;
    	margin-top: 100px;
    	margin-bottom: 100px;
    	margin-right: 100px;
    	border: solid 1px red;
    	padding: 20px 20px 20px 20px;
    	position: absolute;
    }
     
    #menu{
        background: #b60002;  
        width: 100%;
    	float: left;
        height: 28px;
        list-style-type: none;
    	position: relative;
    }
    #menu li{
        float: left;
        text-align:center;
        width: 150px;
        margin: 0;
        padding: 0;
        border: 0;
     
    }
    #menu li a:link, #menu li a:visited{
        display: block;
        height: 1%;
        color: #FFF;
        background: #b60002;
        margin: 0;
        padding: 4px 8px;
        border-right: 1px solid #fff;
        text-decoration: none;
    }
    #menu li a:hover {background-color: #F2462E;}
    #menu li a:active {background-color: #5F879D;}
    #menu .sousMenu{
        display: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        border: 0;
    }
    #menu .sousMenu li{
        float: none;
        margin: 0;
        padding: 0;
        border: 0;
        width: 149px;
        border-top: 1px solid white;
     
    }
    #menu .sousMenu li a:link, #menu .sousMenu li a:visited{
        display: block;
        color: #FFF;
        margin: 0;
        border: 0;
        text-decoration: none;
    }
    #menu .sousMenu li a:hover{
        background-image: none;
        background-color: #F2462E;
    }
    #menu li:hover > .sousMenu {display: block;}

  8. #8
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Il n'y a pas de doctype sur la 2ème page ?
    De plus ta fermeture de </head> et ouverture de <body> sont mal placés (sur les deux pages).
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  9. #9
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Octobre 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations forums :
    Inscription : Octobre 2013
    Messages : 5
    Par défaut
    Merci beaucoup pour vos réponses, tout cela était à cause de l'absence du doctype (Merci Candygirl ! )

    Le problème est donc résolu !

  10. #10
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    T'aurais quand même pu être un peu plus précis Bovino, parce que "ça vient du code" c'est large comme un râteau.
    Bah... c'était ironique et voulait dire en filigrane que sans le code, il est difficile de donner un diagnostic.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  11. #11
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Bah... c'était ironique et voulait dire en filigrane que sans le code, il est difficile de donner un diagnostic.
    Moi aussi j'étais ironique
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  12. #12
    Membre confirmé

    Homme Profil pro
    Informatique en tant qu'autodidacte passionné
    Inscrit en
    Mars 2009
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Informatique en tant qu'autodidacte passionné
    Secteur : Santé

    Informations forums :
    Inscription : Mars 2009
    Messages : 189
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par cpam123 Voir le message
    Merci beaucoup pour vos réponses, tout cela était à cause de l'absence du doctype (Merci Candygirl ! )

    Le problème est donc résolu !
    Bonjour

    Comment fais-tu pour animer ton menu, au survol de la souris ?

  13. #13
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 495
    Billets dans le blog
    1
    Par défaut
    J'ajouterais que mettre le code html du menu dans le head, c'est pas top...

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

Discussions similaires

  1. Probleme menu deroulant et frames
    Par rippoz dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 24/03/2005, 12h08
  2. [CSS-Javascript] Menu déroulant
    Par JeromeR dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 21/10/2004, 18h07
  3. [VBA-E] Barre d'outils et menu déroulants
    Par Tcmat dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 17/08/2004, 22h51
  4. [LG]Menu déroulant sous Pascal
    Par Apprenti Sorcier dans le forum Langage
    Réponses: 8
    Dernier message: 26/03/2004, 14h29

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