Problème position menu et taille fenêtre

Hi all !

J'ai construit un menu depuis les gabarits de menu proposé par alsacréations.

Quand la fenêtre est en plein écran, le menu est correct mais quand il est réduit, il suit la réduction mais en se décalant.

Regardez les screen:

Plein écran:


Ecran réduit :


Ecran réduit, menu développé:


Donc j'ai mis une position absolute pour éviter que le menu décale le contenu, je pense qu'il doit me manqué une propriété mais je ne trouve pas laquelle

Merci pour vos réponses !

Salut, tu peux mettre du code ou un lien? Là tes photos, c'est moche et on comprend pas des masses...

salut,

donc voila le code du menu :

.menu {
	top: 20px;
	left: 30px;
	position:absolute;
	z-index:100;
	width: 100%; /* précision pour Opera */
}

.menu dl {
	float: left;
	width: 11em;
}

.menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	color: #fff;
	background: #EB6E00;
	border: 1px solid #FC9;
	margin: 11px;
}

.menu dd {
	display: none;
	border: 1px solid #EB6E00;
	margin-top: 2px;
	width: 10em;

}

.menu li {
	text-align: center;
	background: #FC9;
}

.menu li a{
	background-color:inherit;
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

.menu dt a {
background-color: inherit;
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

.menu li a:hover{
background: #eee;
}

.menu dt a:hover {
background: #eee;

En bref Quand on es en fenetre "agrandie" bah le menu est correct, sinon il est décalé.
Le but est qu'il reste en une ligne et à l'intérieur du rectangle blanc , qu'il soit comme en fenêtre "agrandie" et cela quel que soit la taille de la fenêtre.

Je veux bien, mais le css sans HTML, c'est comme le camembert sans pain...

lol attend :

<div class="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="../index.php" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><a href="#">Serveurs</a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="../list_serv.php">Liste des serveurs</a></li>
					<li><a href="../search_serv.php">Recherche</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><a href="#">Switch</a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="../list_switch.php">Liste des switch</a></li>
					<li><a href="../search_switch.php">Recherche</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><a href="#">Documentation</a></dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="../plans.php">Plans</a></li>
					<li><a href="../schemas.php">Schémas</a></li>
					<li><a href="../documentation.php">Documents divers</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');"><a href="#">Contacts</a></dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="../admin_reseau.php">Administrateurs Réseaux</a></li>
					<li><a href="../consultants.php">Consultants</a></li>
				</ul>
			</dd>
		</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');"><a href="#">Administration</a></dt>
			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
				<ul>
				<?php
				if($statut != "admin" and $statut != "user"){
					echo"<li><a href='../login.php'> Se connecter</a></li>";}
				else{
					echo"<li><a href='../deconnect.php'> Se déconnecter</a></li>";}
				if($statut == "admin"){
					echo"<li><a href='../admin/menu.php'>Menu d'admin.</a></li>";}
				elseif($statut == "user"){
					echo"<li><a href='../user/menu.php'>Menu d'admin.</a></li>";}	
				?>
				</ul>
			</dd>
		</dl>
	</div>

mais bon chui pas sur que ca servent pour mon problème

En fait, tu parle des liens qui passe les uns sous les autres?

LoL, non

Je voudrais que mon menu ( les pti rectangle orange ) ne bouge pas lorsque la fenêtre est réduite, c'est tout

Oui, c'est ce que je disais, ils passent les un sous les autres ce qui est normal, vu que ce sont des flottants. Vire le position absolute qui ne sert à rien, et ajoute

height: [i]c'est toi qui voit[/i];
overflow: hidden;

à ta classe menu

A+
Modifié par coccimaster (08 Aug 2006 - 17:17)

le "position: absolute" sert à quelque chose , il permet au menu de ne pas influer sur le contenu situé en dessous, sans ce type de position a chaque menu développé, le contenu se décale ou pas selon la taille des sous menu lol.

Et j'ai tout de même essayé ta solution , mais ça ne fonctionne pas, au contraire, le menu décale tout le contenu, et lorsque l'on réduit la fenêtre, le menu bouge et se décale ( ce n'est plus une seule ligne mais plusieurs, comme dans les screen pris auparavant.)

D'autres idées ?

Ps: je continue à chercher de mon cêté !

Heeeeeeeelp meeeeeeee

En fait, je viens de réessayer ton code. Le overflow fonctionne sans soucis, tout du moins sous FF. Je ne comprends pas pourquoi il y a décalage, si tu fixe une hauteur. En position absolute de surcroit, ton menu sort du flux. Il ne peux pas influer sur le reste. Donne un lien pour visualiser le problème parce que avec juste ce code là, il n'y a pas de problème.
Modifié par coccimaster (09 Aug 2006 - 16:36)

Re,

Je ne peux pas donné d'url, je travaille en local avec easyphp.

J'ai donc mis une hauteur et enlevé le position absolute, et là quand je réduit la fenêtre, le menu ne se décale plus mais il ne réduit pas non plus, c'est à dire que j'ai les choix du menu qui sont visible selon la taille de la fenêtre. Si je réduit la fenêtre je peu avoir les 3 premiers choix visible et le reste invisible, si je continue a réduire , j'ai seulement les 2 premier, si j'agrandi g les 4 . De plus je ne vois plus les sous menus(voir les screen)

Fenêtre réduite avec sous menu dévelopé :


Dans le cercle noir, le menu, dans le rouge le sous menu invisible. A noter qu'il ya normalement 6 choix dans le menu.

Fenêtre encore plus réduite:


Le choix "documentation" a disparu, les sous menu sont tjr invisibles.

alors la je déprime

Heeeelp meeeee !
Modifié par mLk (09 Aug 2006 - 18:03)

Quelqu'un a une idée ?

T'as déjà essayé en mettant un width en pixel pour le menu? S'il est fixe ca devrait passer?

bah j'ai essayé , mais ca fonctionne pas, en réduisant la fenêtre le menu ne se réduit pas mais sort du cadre blanc.

Je voudrais en fet que quelque soit la taille de la fenêtre tout ce qui se trouve dans le cadre blanc reste dedan et se réduise selon la taille du cadre.

voir le premier message avec le 1er apercu

Dans ca cas, il faut donner des largeurs relatives en % à la largeur du body, mais même avec ça, ton texte va sortir de son cadre...

Comment faire pour qu'il y reste alors ?

lui demander gentiment

...

Quelqu'un d'autre a une idée ?