18041 sujets

Questions générales et questions de débutants

Menu Deroulant

Smiley smile Bonjours tout le monde Smiley smile

Je suis une petit nouveau sur ce site, et quand je recherche quelque choses, je me rend compte que je tombe encore et encore sur se site ou au moins sur le Forum, donc j'ai déjà résolu quelque un de mes soucis sans déposé ma patte, mais voila je bloque sérieusement sur une chose, qui va surement vous semblez simple, mais qui me rend dingue et nayant pas le temps de faire sa a plein temps voila je m'en remet à vous

Je me lance dans un petit "site" lentement mais surement.

Mon Blocage Voila j'ai ma "bannière" + mon "menu-déroulant"

upload/37632-SCREEN.JPG



Les deux s'associe à merveille Smiley murf mais le soucis c'es qu'il ne veulent tout les 2 pas se décollé du bord de Gauche et je voudrais qu'il soit centrer .... Smiley bawling

Voila mon Code HTML



a écrit :


<!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>ILOVE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="C:\Documents and Settings\XX\Bureau\ILOVE\ILOVE1.css" />
<script type="text/javascript" src="C:\Documents and Settings\XX\Bureau\ILOVE.js"></script>
<script type="text/javascript">
</script>
</head>



<Body>

<img src="C:\Documents and Settings\XX\Bureau\ILOVE\SHEMA\xxxxxxx.JPG" alt="ILOVEC" title="ILOVE" />


<ul id="menu">


<li>
<a href="#">accueil</a>
</li>

<li>
<a href="#">Photos</a>
<ul>
<li>
<a href="#">Photos</a>
<ul>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">catégorie 2</a></li>
<li><a href="#">catégorie 2</a></li>
<li><a href="#">catégorie 2</a></li>
<li><a href="#">catégorie 2</a></li>
</ul>

</li>
<li>
<a href="#">Vidéos</a>
</li>
</ul>
</li>

<li>
<a href="#">Tendance</a>
<ul>
<li><a href="#">Ten</a></li>
<li><a href="#">Dance</a></li>
</ul>
</li>

<li>
<a href="#">plus</a>
<ul>
<li><a href="#">nous contacter</a></li>
<li><a href="#">liens</a></li>
</ul>
</li>
<li>
<a href="#">membres</a>
<ul>
<li><a href="#">connexion</a></li>
<li><a href="#">inscription</a></li>
</script>
</ul>
</li>
</ul>

</body>




Et mon CSS.


a écrit :


head
{

}

body
#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;

}

#menu
{
font-weight : bold;
font-family : Franklin Gothic Medium;
font-size : 12px;

}

#menu a
{
display : block;
padding : 0;
background : #000;
color : black;
text-decoration : none;
width : 150px;
}

#menu li
{
float: left;
left: 700px;
border-right : 1px solid #fff;
}


html>body #menu li
{
border-right: 1px solid transparent ;

}

#menu li ul
{
position: absolute;
width: 150px;
left: -900em;
}


#menu li ul li /* Éléments de sous-listes */
{

border-top : 1px solid #fff;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent;
}

#menu li ul ul
{
margin : -22px 0 0 150px ;
border-left : 1px solid #fff ;
}


html>body #menu li ul ul
{
border-left : 1px solid transparent ;

}

#menu a:hover
{
color: #000;
background: #fff;
}

#menu li:hover ul ul, #menu li.sfhover ul ul

{
left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul

{
left: auto;
min-height: 0;
}

#menu a
{
display : block;
padding : 0;
background : #000;
color : black;
text-decoration : none;
width : 150px;
}

...

#menu li ul
{
position: absolute;
width: 150px;
visibility: hidden;
}

...


#menu li ul ul
{
margin : -22px 0 0 150px ;
border-left : 1px solid #fff ;
}

#menu a
{
display : block;
padding : 0px;
background : #C0C0C0;
color : black;
text-decoration : none;
width : 150px;
right: 700px;

}



#menu a:hover
{
color : #000;
background : #fff;
}





Je vous donne tout dans l'intégralité ...

Merci de votre patience Smiley biggrin
Modifié par Karloum (01 May 2011 - 01:59)
Dans ton CSS, rajoute 
#menu {display: block; margin: 0 auto}

Je pense que tu voudras aussi centrer ton #logo, dans ce cas même chose.

En fait, tu disposais des éléments de type block dans un contenant de type list, c'est de là que venait je pense ton problème.
Hello,

Juste une petite précision suite au message ci-dessus, ul est un élément de type bloc aussi (le "display : block" sur #menu est donc inutile). Le type « list » n'existe pas.

Pour répondre à la question, si ton document entier doit être centré, le mieux est d'utiliser un conteneur global (soit avec la balise <body>, soit avec une division) et d'utiliser, comme le propose Boudah Talenka, des marges automatiques (sans oublier de donner une largeur à ce conteneur).

edit : un exemple pour que ce soit plus clair :

<body>
    <div id="global">
       <img src="C:\Documents and Settings\XX\Bureau\ILOVE\SHEMA\xxxxxxx.JPG" alt="ILOVEC" />
       <ul id="menu">
          …
       </ul>
    </div>
</body>



#global {
width: …px ;
margin: 0 auto ;
}


edit2 : Quelques erreurs dans ton source xHTML (et CSS) :
- Avec un doctype strict, les balises doivent être écrites en minuscules (pas de majuscule à <body> par exemple) ;
- L'attribut title est inutile sur ton image ;
- <head> ne peut pas être mis en forme en css ;
- Plus important encore : tu as un problème dans l'ouverture et la fermeture de tes listes imbriquées (tu fermes plus de <ul> que tu n'en ouvre Smiley cligne ).
Modifié par audrasjb (01 May 2011 - 14:37)
Je voit de belle explication, ne pouvant être chez moi, je ne peut voir sa de suite mais je pense que vos 2 réponse vont très certainement m'aider, je vais regarder sa ce soir, et je vous tiendrais au courant. car il semblerais quand regardant vos message j'y voit nettement plus claire ...

Merci
Sujet clos
Aller à