18073 sujets

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

Probleme de tableau

Bonjour a tous,
Alors j 'ai un petit probleme. J'essaye de faire une page comprenant une banniere, en dessous un menu et en dessous un bloc contenu. Hors quand ma souris passe sur le menu celui s ouvre mais ne veut pas chevaucher le bloc contenu: Sous IE6 il decale le bloc contenu vers le bas et sous Firefox il décale les lignes du bloc contenu. La je suis un peu perdu. Si quelqu un aurait une solution ce serait tres gentils de me la faire connaitre^^
Feuille css 
/*---------------------------------------------------*/
/*----------- le style général de la page -----------*/
/*---------------------------------------------------*/
body {
    margin: 0;
	font-family: verdana, arial, sans-serif;
	font-size: 75%;
	text-align:center;
	background: white;
	
	}
/*---------------------------------------------------*/
/*------- le style global qui centre la page --------*/
/*---------------------------------------------------*/
#global {
	width: 934px;
	margin-right:auto;
	margin-left:auto;
	margin-top:10px;
	padding:0px;
	text-align:left;
	font: 100% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none
	}

#leblocheader {

background-image:url('img/ban.jpg');
width:934px;
border: 1px solid #111111;	
height: 224px;
	}


#leblocmenu {

bottom: 2;
left: 0;
width: 100%;
height: 20px ;
border: 0px solid #111111;		
}

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

#lebloccontenu {

	border: 1px solid #111111;
	margin-top:5px;
	margin-left:auto;
	margin-right:auto;
	width: 934px;
	height: auto; /* cette ligne indique la hauteur du bloc contenu */
	
}

#leblocpied{

	height:30px;
	width:934px;
	margin-top:5px;
	border: 1px solid #000000;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:10px;
	float:bottom;
	}

a {
	color: 	blue;
	text-decoration: none;
	}
a:hover {
	/*text-decoration:overline underline;*/
	color: 	red;
	border-bottom: 5px solid #bbc;
	}

Feuille index
<html>
<head>
<title>titre</title>
<link rel="stylesheet" href="style.css" type="text/css">

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

</head>

<body>
<div id="global">
	<div id="leblocheader">
	</div>
	

	<div id="leblocmenu">
		<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>

	<div id="lebloccontenu">
		<div id="texte">
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	Ici tous les textes et photos <br>
	
		</div>
	</div>
	
	<div id="leblocpied">
	signature etc
	</div>
</div>
</body></html>


Hop voili voilou désolé pour le pavé^^ et merci d'avance a ceux qui auront le courage de lire ceci^^
Modifié par asa (08 Feb 2006 - 15:35)
Salut, Smiley smile

ça vient d'une histoire de z-index que tu n'as pas mis dans ton code :
Tuto Asla a écrit :
Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.


Le tuto complet à lire içi Smiley biggrin

Smiley cligne
Merci beaucoup de vos réponses, je vais voir ca des demain matin Smiley smile
sinon absolute position j avais essayer mais ca me mettais mes div pas du tou ou je voulais. Par exemple le menu etait colle en bas de la feuille Smiley sweatdrop
Sujet clos
Aller à