28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Problème positionnement calques OK IE ... KO FF

Bonjour à tous,

Avant de poster, j'ai fait pas mal de recherches, malheureusement sans trouver de réponse à ma problème.

Sur IE, le positionnement des calques se passe sans problèmes, alors que sous FF, un calque "mange" l'autre, sans que je sache pourquoi

Source CSS :


body{

	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #dcdcdc;

}

div#conteneur{

	width : 80%;
	margin : 0 auto;
	text-align : left;
	border : 2px solid #696969;
	background : #fff;

}

div#contenu{

	width : 70%;
	position : relative;
	background: red;
	height: 200px;

}

div#contenu h2{

	float : none;
	position : relative;
	padding-left : 25px ;
	line-height : 25px ;
	font-size : 1.4em ;
	color : #9b2 ;
	border-bottom: 1px solid #9b2 ;

}

h1#header{

	height: 258px ;

}

p#footer{

	margin-top : 20 px;
	padding-right : 10px;
	line-height : 30px;
	text-align : center;
	color : #8a0;
	border-top : 1px solid #9b2;
	
}

pre{

	overflow: auto ;

}

* html pre{

	width: 636px ;

}

dl, dt, dd, ul, li {

	margin: 0 ;
	padding: 0;
	list-style-type: none;

}

#menu {

	width: 25%;
	margin: 2px 10px;
	float : left;

}

#menu dt {

	cursor: pointer;
	margin: 2px 0;
	height: 20px;
	line-height: 20px;
	text-align: left;
	font-weight: bold;
	border: 1px solid gray;
	background: #ccc;

}

#menu dd {

	border: 1px solid gray;

}

#menu li {

	margin-left: 10px;
	text-align: left;
	background: #fff;

}

#menu li a, #menu dt a {

	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
	margin-left : 10px;

}

#menu li a:hover, #menu dt a:hover {

	background: #eee;

}


Source HMTL :


<!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" xml:lang="fr">

<head>

	<title>Site Test SHEC</title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<meta http-equiv="Content-Language" content="fr" />

	<link rel="StyleSheet" type="text/css" href="shec.css"/>

	<script type="text/javascript" src="shec.js"></script>

</head>

<body onload="montre()">

	<div id="conteneur">

		<h1 id="header">
			<a href="index.html" title="Site Test SHEC">
				<span>SHEC</span>
			</a>
		</h1>
			
		<dl id ="menu">

			<dt onclick="javascript:montre();"><a href="#">Accueil</a></dt>

			<dt onclick="javascript:montre('smenu2');"><a href="#">Présentation</a></dt>

			<dd id="smenu2"> 
				<ul>
					<li><a href="#">Fiche signalétique</a></li>
					<li><a href="#">Savoir faire</a></li>
					<li><a href="#">Références / Réalisations</a></li>
					<li><a href="#">Contacts</a></li>
					<li><a href="#">Fiche contact</a></li>
					<li><a href="#">Services internes</a></li>
				</ul>
			</dd>

			<dt onclick="javascript:montre('smenu3');"><a href="#">Services</a></dt>

			<dd id="smenu3"> 
				<ul>
					<li><a href="#">Accès libre</a></li>
					<li><a href="#">Assistance</a></li>
				</ul>
			</dd>

			<dt onclick="javascript:montre();"><a href="#">Plan du site</a></dt>

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

			<h2>Un titre</h2>
			
			    <p> 
					Elitr fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, 
			      at velit aliquip denique cum. His ex altera definitionem, in sumo eloquentiam 
			      pro, nec ut posse reformidans. Nonumy aliquando vim at, in alterum torquatos 
			      consetetur vel. Viris habemus dolores nam ea, utinam option eu per, cu duo 
			      vidit modus deterruisset. Cum te diam persecuti. Iudico partiendo concludaturque 
			      pro ex, no quas natum volumus est, vis et dicunt scripta. Te ius feugiat 
			      euripidis reprehendunt, vocent aliquip nonummy per ea, te duis graeci conceptam 
			      nam. No nullam habemus vel, te est autem verterem detraxit, eu minimum propriae 
			      ius. Mel diam quidam te, at cum stet convenire expetenda, cum senserit democritum 
			      te. Ad elit ancillae neglegentur his, et eam placerat conceptam, justo quaerendum 
			      sed te. Vel tamquam nominavi torquatos ad, te option phaedrum pro, elit 
			      aliquip corrumpit in ius. Eum volumus pericula cu. Per lorem saepe timeam 
			      te, cum ludus inciderint ut. Mucius rationibus eloquentiam nec eu, virtute 
			      accusata assuev erit an pri, ei mea tempor bonorum equidem. Qui idque molestiae 
				  mnesarchum ex. 
				</p>
		</div>

		<p id="footer">S.H.E.C. tous droits réservés</p>

	</div>

</body>

</html>


Erreurs de marge ? de largeur ?

Par avance, merci.
Modifié par washo (22 May 2006 - 09:16)
Bonjour,
a écrit :
Erreurs de marge ? de largeur ?
De positionnement. "position: relative" n'est pas ce qu'il faut :
div#contenu{
	width : 70%;
	[#orange]float: right;[/#]
	background: red;
}


Au passage, note que j'ai viré le "height: 200px;" qui te pose problème sous navigateur conforme. (IE l'interprète à tord comme une hauteur minimale et l'agrandit si besoin, si le contenu le demande. Un navigateur conforme gardera la hauteur à 200px alors que ton contenu déborde en bas.)


Chose curieuse, ton contenu et ton menu se retrouve plus ou moins sur le footer.
La barre verte qui délimite l'entête du menu et du contenu est celle associée au paragraphe du footer... c'est pas gênant en soi, mais c'est pas courant.
Modifié par Smiley neko (16 May 2006 - 11:38)
Merci beaucoup pour votre réactivité et la qualité de votre réponse. Je pensais avoir saisi le positionnement des calques mais apparemment nan.

J'ai donc acheté le livre de Raphael, que je suis en train de dévorer Smiley cligne

Merci encore pour le temps passer à nous répondre
Sujet clos
Aller à