18073 sujets

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

[Resolu] Menu horizontal sur toute la longueur de mon bloc

Bonjour,

J'ai suivi le livre + les tutos en ligne : j'ai opté pour un menu horizontal déroulant ; cependant, ce dernier n'occupe pas tout l'espace de mon bloc. Mon menu est à gauche. Ma page ici

Faut-il que j'incorpore ce menu de 5 boutons dans un div ? Mais ca fait des div pour rien et ce ne sont pas les bonnes manières !! Smiley biggrin

D'autre part, mon site est calé à gauche, je voudrais qu'il soit centré. Ceci est dû à : position: absolute; ; si je l'enlève mon menu ne fonctionne plus mais il est centré.

Dans l'attente, Bien à vous.

Smiley bawling personne voit comment je peux faire ???
Modifié par manu73 (23 Aug 2005 - 05:08)
Bonjour,

Suite à vos reponses, je me suis cassé la tête Smiley biggol pour finalement trouver et donner le resultat suivant.
Sur Firefox, mon menu dépasse à droite, sur IE : c'est parfait.

Voici mon code css : 
/* CSS Document */

body {
margin: 0px;
padding: 0px;
background-color: #e3effb;
color: black;
font: 80% verdana, arial, sans-serif;
}

#site {
position: absolute;
margin-right: auto;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
width: 800px;
top: 3px;
left: 3px;
z-index: 1;
color: #000;
background-color: red;
border: 0; 
}

#header {
height: 100px;
background: #97C05F url(banniere.jpg) top left no-repeat;
}

#header img {
float: right;
margin: 5px 5px 0 0;
}


#header h1 {
text-indent: -5000px;
margin: 0;
line-height: 0;
}

#header p {
margin: 55px 0 0 290px;
font-weight: bold;
color: white;
font-size: 1.1em;
}

#menuhaut {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0.1em 0.5em 0.1em 0;
list-style-type: none;
background-color: #010c6e;
color: white;
text-align: right;
}

#menuhaut li {
display: inline;
}

#menuhaut a {
color: white;
text-decoration: none;
}

#menuhaut a:hover {
text-decoration: none;
color: #00CC00
}

/* Menus deroulants */

<style type="text/css" media="screen">

dl, dt, dd, ul, li {
margin-top: 0px;
padding: 0px;
list-style-type: none;
}
#menu {
position: absolute;  /*placement du menu, à modifier selon vos besoins */
top: 110px;
z-index:10;
margin-left: auto;
margin-right: auto;
width: 800px; /* largeur obligatoire pour être centré */
}

#menu dl {
float: left;
width: 20%;
right: 0px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #849da1;
border: 1px solid gray;
margin: 0px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #9aa53e;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}

-->
</style>


et voici mon code Xhtml :
<body>
<div id="site">
<div id="header">
  <!--<img src="montagne.png" alt="montagne illustrative" />-->
  <h1>Anglefort, le village qui construit son avenir</h1>
<p>Le village qui construit son avenir</p>
</div>

<!-- Menu d'accès rapide -->
<ul id="menuhaut">
	<li><a href="index.php" accesskey="1">Retour à l'accueil</a> | </li>
	<li><a href="Contact.html" accesskey="2">Contact</a> | </li>
	<li><a href="securise.html" accesskey="3">Espace privé</a></li>
</ul>

<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="index.php" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 1.1</a></li>
				<li><a href="#">Sous-Menu 1.2</a></li>
				<li><a href="#">Sous-Menu 1.3</a></li>
				<li><a href="#">Sous-Menu 1.4</a></li>
				<li><a href="#">Sous-Menu 1.5</a></li>
				<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.2</a></li>
				<li><a href="#">Sous-Menu 4.3</a></li>

			</ul>
			</dd>
	</dl>
</div>
<p>Lorem.......Nullam sollicitudin nibh eget dui. Phasellus pulvinar rutrum ipsum.</p>
</div>
</body>

Modifié par manu73 (19 Aug 2005 - 17:39)
Bonjour,

Tu as 2 "body" dans ta feuille de style :

/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #e3effb;
color: black;
font-size: 80%;
font-family: "Bitstream Vera Sans", Verdana, Arial, Helvetica, Serif;
}

....

/* Menus deroulants */

<style type="text/css" media="screen">
<!-- 
body {
margin: 0px;
padding: 0px;
font: 80% verdana, arial, sans-serif;
}


Et je ne pense pas que :

<style type="text/css" media="screen">
<!-- -->

doit se trouver dans ta feuille de style.

Ensuite pour centrer ton site sur la page, regarde sur les modèles de gabarit en css d'alsa, plusieurs sont dans ce cas.

Pour ton menu décalé sous firefox, surement une histoire de margin ou padding je pense.

En espérant t'avoir aider.
Le second body s'occupe de mon menu horizontal déroulant.

Pour les margin - padding, j'essaie dans tous les sens, en vain... Je continue et j'édite si je trouve.
Smiley cligne
Ok, je vous remercie, j'ai enlevé mon second body, je l'ai centré ; ce qui fonctionne mais j'ai d'autres soucis qui sont survenus.

J'edite mon code css plus haut de la derniere mise à jour.
a écrit :

Et je ne pense pas que :

<style type="text/css" media="screen">
<!-- -->

doit se trouver dans ta feuille de style.


Je pense que tes nouveaux problèmes (apparition des puces dans les listes, mauvais emplacement du menu sous i.e ?) viennent de là.
Je te remercie, ça fonctionne, reste maintenant à remplir la totalité de mon menu déroulant...
Sujet clos
Aller à