Probleme avec mon menu deroulant !!

Résolu/Fermé

Dest Messages postés 4 Date d'inscription mardi 8 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008 - 8 janv. 2008 à 22:10
Dest Messages postés 4 Date d'inscription mardi 8 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008 - 8 janv. 2008 à 22:24

Bonjour,
je viens demandé un p'tit peu d'aide a notre grande communauté avant de m'arraché tous les cheuveux kil me reste !!
afin de faire mon site j'ai realiser cette petite page en html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Conforming XHTML 1.1 Template</title>
<style type="text/css">

body {

margin: 0px;
height: 100%
}

div#haut {
position: absolute;
top: 0%;
left: 15%;
width: 70%;
height: 18.5%;
background-color: silver;
}

div#gauche {
position: absolute;
top: 0%;
left: 0%;
width: 15%;
height: 140.4%;
background-color: #000000;
}

div#pdroite {
position: absolute;
top: 0%;
left: 85%;
width: 15%;
height: 140.4%;
background-color: #FF0000;
overflow: auto;
}

</style>
</head>

<body>

<div id="haut">banniere haut</a><br></div>
<div id="gauche">Frame de gauche</div>
<div id="pdroite">Frame droite</div>
</body>

</html>

<HTML>
<BODY>

<SPAN style="position: absolute;
top: 20.4%;
left: 15%;
width: 70%;
height: 120%;
background-color: #0000ff;">

</SPAN>

<SPAN style="
position: absolute;
top: 16.5%;
left: 15%;
width: 50%
height:60%;">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>hmm</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design_menu.css" />

</head>
<body>
<p></p>
</body>
</html>
<ul id="menu">

<li>
<a href="a.html" >Accueil</a>
</li>

<li>
<a href="b.html" >Membres</a>
<ul>
<li><a href="a.html" >connexion</a></li>
<li><a href="b.html" >inscription</a></li>
</ul>
</li>

<li>
<a href="a.html" >Forum</a>
<ul>
<li><a href="c.html" >xxx</a></li>
<li><a href="a.html" >xxx</a></li>
</ul>
</li>
<li>
<a href="a.html">xxx</a>
<ul>
<li><a href="z.html" >xxx</a></li>
<li><a href="b.html" >xxx</a></li>
<li><a href="c.html" >xxx</a></li>
</ul>
</li>
<li>
<a href="a.html" >xxx</a>
<ul>
<li><a href="a.html" >xxx</a></li>
<li><a href="a.html" >xxx</a></li>
</ul>
</li>
<li>
<a href="a.html" >medias</a>
<ul>
<li><a href="a.html" >Photos</a></li>
<li><a href="a.html" >Videos</a></li>
</ul>
</li>
<li>
<a href="a.html" >Contacts</a>

</li>

</html>
</SPAN>
</BODY>
</HTML>

puis ce petit code en .css :

/* CSS Document */

#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 145%; /* on défini une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial c'est plus beau ^^ */
font-size : 80%; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #000; /* couleur de fond */
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 125.5px; /* largeur */
}

#menu li /* Elements des listes */
{
float : left;
/* pour ie qui ne reconnaît pas "transparent" */
border-right : 1px solid #000000; /* on met une bordure blanche à droite de chaque élément */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid ; /* on met une bordure à droite de chaque élément... ajouter transparent apres solid pr l'effacer ! */
}

#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
width: 125.5px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoi loin du champ de vision */
}

#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul
{
margin : -22px 0 0 125.5px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}

/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #ff0000; /* On passe le texte en noir ... */
background: #000000; /* ... et au contraire, le fond en rouge */
}

oui mais voila, sur firefox ca marche quand la fenetre est en grand mais pas en petit.. et n'en parlons pas sur IE...
Si quelqu'un pouvait m'aider, Merci d'avance :$

A voir également:

Probleme avec mon menu deroulant !!
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires

4 réponses

Réponse 1 / 4

el gringo
8 janv. 2008 à 22:13

au secours : explique-moi pourquoi tu as plusieurs balise <html>, <head> ou <body> ??? sagit-il de plusieurs pages ou d'une seule ?

Réponse 2 / 4

Dest Messages postés 4 Date d'inscription mardi 8 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
8 janv. 2008 à 22:15

nan nan s'est la meme pasge... mais vu qu'html n'est pas difficile, jme suis pas pris la tete, jai inclus du html dans du html sur a meme page :/

Réponse 3 / 4

el gringo
8 janv. 2008 à 22:23

ouark ouais ben là abandonne tout et recommence avec des bases plus solides !
tu ne peux pas inclure plusieurs balises HTML dans une seule page. mais pour plus de détail, consulte les tutos sur internet, yen a une bonne chiée.
ensuite, le CSS c'est pas que pour faire joli. Pourquoi t'as du CSS embarqué (balises <style>), du CSS externe (ton .css) et ça :
"
<SPAN style="position: absolute;
top: 20.4%;
left: 15%;
width: 70%;
height: 120%;
background-color: #0000ff;">
" ???

tu te complique la vie, et en meme temps, pas assez.
va donc voir les tutos du net (je me répète...), et en plus ils t'expliquent comment faire des menus déroulants.

Exemple de squelette de base html :

<html>
<head>
<title>Titre de page</title>

</head>
<body>
Ta page
</body>
</html>

ET C'EST TOUT !!
Ton site n'est pas aux normes, il est meme pas normal ! alors pourquoi mettre ça : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ' ?

amicalement

Réponse 4 / 4

Dest Messages postés 4 Date d'inscription mardi 8 janvier 2008 Statut Membre Dernière intervention 11 décembre 2008
8 janv. 2008 à 22:24

Hmm a vrai dire jme demene pour faire un ptit site, j'y connais presque rien..
Merci du conseil, je vais tt refaire...
Amicalement :)

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer liste déroulante

supprimer une liste déroulante