18073 sujets

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

(resolu)Probleme pour centrer un menu

Bonjour mod52 et bienvenue sur le forum Alsacréations Smiley lol

Je déplace ton sujet dans le salon approprié Smiley cligne
merci pour ta reponse, mais je dois avoir raté quelque chose,
le menu est au centre, mais il decale le div contenu
j'ai beau essaye de mettre lediv contenu apres mon menu
ça ne change rien??

je suis en train de lire tous les tutorials les uns derriere les autres
mais de l'aide me ferait du bien

merci d'avance


<style type="text/css">
<!-- 
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
background-color: #96C8E2;
width: 100%;
height: 10%;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
margin-left: auto;
     margin-right: auto;
     width:22.0cm; /* largeur obligatoire pour être centré */
[b]
=============
  [eek]  la largeur est obligatoire, mais que va t il se passer en fonction des ecrans pour les utilisateurs????
=============
[/b] 
	 text-align: center;
}
#menu dl {

float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff; 
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#contenu {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
background-color:#96C8E2;
}

-->
</style>

et 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
include "head.php";
?>
<body>
<div id="header">logo à placer</div>
<?php include "menu.php";?>


<div id="contenu">
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />
	contenu<br />

</div>
</body>
</html>

Modifié par mod52 (09 Jun 2005 - 16:29)
Heu ! Je me sens coupable !
Smiley cligne

Ca serait bien d'avoir le code html du menu car dans ton post, il est dans un include si je suis bien ...

D'autre part, tu as fixé la taille en cm ... Pas top à l'écran le cm, on parle plutôt en pixel (px) ou mieux : en %

Allez courage, tu vas y arriver !
Modifié par Vero (09 Jun 2005 - 17:10)
voici le fichier menu

en fait, pour la taille je ne sais pas combien le menu mesure en pixel.
de plus je ne sais pas si il ya un moyen de calculer le with en fonction des parametres menu, de façon à ce que si on ajoute un lien ca recalcule le with automatiquement
la je viens d'essayer avec 70% mais le probleme reste le même
@+
merci Smiley cligne 

<div  id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<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">
				<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">

				<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">
				<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>



le fichier javascript

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Modifié par mod52 (09 Jun 2005 - 17:22)
Sujet clos
Aller à