28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Probleme de mise en page (DIV/CSS)

Bonjour.

Je prépare actuellement mon site internet. Malheureusement, j'ai un petit problème concernant la mise en page du site.
J'utilise 2 DIV, superposés l'un sur l'autre, le premier pour mon menu déroulant horizontal en javascript et le second pour l'affichage du contenu. Le problème est le suivant : a chaque fois que je clique sur mon menu et que celui ci se déroule, mon texte dans le second DIV se decale tout seul. J'ai essayé différentes modifications sur le CSS mais j'arrive toujours au même résultat.
Merci de me venir en aide Smiley bawling .
Modifié par kobasen (12 Jul 2007 - 13:38)
Bonjour,

Je pense que du code serai le bienvenu pour pouvoir t'aider.

Sinon as tu essaye avec un positionnement absolu ?
Bonjour et bienvenue sur Alsacaréations Smiley smile

Il serait bien que tu nous montres une page en ligne ou l'intégralité de ton code html et css pour que nous puissions te guider et t'aider.
Je viens de mettre le visuel à l'adresse suivante : mon site
Par contre je viens de voir que ca s'affichait mal sous IE.

CSS

body {
	margin: 0;
	padding: 0;
	background: white;
	font: 80% verdana, arial, sans-serif;
}

img {
	border: 0;
}

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

#menu {
	z-index: 100;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

#menu dl {
	float: left;
	width: 10em;
}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #d1d26b;
	border: none;	
	margin: 0px;
	height: 24px;
	width: 120px;
}

#menu dd {
	display: none;
	border: 0;
	width: 120px;
}

#menu li {
	text-align: left;
	text-indent: 5px;
	background: #d1d26b;
	width: 140px;
}

#menu li a, #menu dt a {
	color: #950f5a;
	text-decoration: none;
	display: block;
	height: 20px;
	border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: #d9757a;
}

div#entete {
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/entete.gif);
	background-repeat: no-repeat;
	width: 980px;
	height: 250px;
	padding: 0;
}
div#espace1 {
	float:left;
	margin-left: auto;
	margin-right: auto;
	width: 980px;
	height: 220px;
	background-color: #EEEEEE;
}

div#espace2 {
	float:left;
	margin-left: auto;
	margin-right: auto;
	width: 343px;
	height: 24px;
	background-color: #EEEEEE;
}

div#contenu {
	z-index: 1;
	margin-left: auto;
	margin-right: auto;
	width: 980px;
	height: 400px;
	background-color: #EEEEEE;
}

div#pieddepage {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
	height: 20px;
	text-align: center;
	font-weight: bold;
	color: #950F5A;
	background-color: #D1D26b;
}


index.php

 <!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" lang="en" xml:lang="en">
	<head>
		<title></title>
		<link rel="stylesheet" href="menu.css" type="text/css" />
		<script src="menu.js" type="text/javascript"></script>
	</head>
<body>
<?php
	include 'entete.php';
?>

	test test test test test test test test test test test test test test test test test test test test test test test <br />
	test test test test test test test test test test test test test test test test test test test test test test test <br />
	test test test test test test test test test test test test test test test test test test test test test test test <br />
	test test test test test test test test test test test test test test test test test test test test test test test <br />
	test test test test test test test test test test test test test test test test test test test test test test test <br />
	test test test test test test test test test test test test test test test test test test test test test test test <br />


entete.php

<div id="entete">
	<div id="espace1" onclick="location.href='index.php';" style="cursor: pointer;"></div>
	<div id="espace2"></div>
	<div id="menu">
		<dl>
			<dt onmouseover="javascript:montre('smenu1');">menu 1</dt>
				<dd id="smenu1">
					<ul>
						<li><a href="historique.php">historique</a></li>
						<li><a href="historique.php">sous menu 1.2</a></li>
						<li><a href="historique.php">sous menu 1.3</a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt onmouseover="javascript:montre('smenu2');">menu 2</dt>
				<dd id="smenu2">
					<ul>
						<li><a href="historique.php">sous menu 2.1</a></li>
						<li><a href="historique.php">sous menu 2.2</a></li>
						<li><a href="historique.php">sous menu 2.3</a></li>
						<li><a href="historique.php">sous menu 2.4</a></li>
						<li><a href="historique.php">sous menu 2.5</a></li>
					</ul>
				</dd>
		</dl>
		<dl>
			<dt onmouseover="javascript:montre('smenu3');">menu 3</dt>
				<dd id="smenu3">
					<ul>
						<li><a href="historique.php">sous menu 3.1</a></li>
						<li><a href="historique.php">sous menu 3.2</a></li>
						<li><a href="historique.php">sous menu 3.3</a></li>
					</ul>
				</dd>
		</dl>
		<dl>	
			<dt onmouseover="javascript:montre('smenu4');">menu 4</dt>
				<dd id="smenu4">
					<ul>
						<li><a href="historique.php">sous menu 4.1</a></li>
					</ul>
				</dd>
		</dl>
		<dl>	
			<dt onmouseover="javascript:montre();"><a href="historique.php">menu 5</a></dt>
		</dl>
	</div>
</div>
<div id="contenu">


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';}
}
//-->
Sujet clos
Aller à