28220 sujets

CSS et mise en forme, CSS3

Bonjour tous le monde!

à partir de ce tuto
http://css.alsacreations.com/modelesmenus/hd1.htm

je souhaite determiner le positionnement du menu par rapport à la gauche de la page en determinant left: 150px;.
sous ie ca marche
sous firefox le menu reste collé sur la gauche de la page

comment faire
merci bien
Modifié par zoumzoum (22 Jul 2005 - 16:50)
Chez moi ça marche très bien sous firefox ...

#menu {
position: absolute;
top: 0;
left: 30px;
z-index:100;
}
Bonjour,

Bah... #menu {left:150px;} marche très bien dans Firefox comme dans IE Smiley cligne

(puisque dans la page d'exemple, #menu est en position absolue)

<edit>Mais au fait, peut-être as-tu justement supprimé ce positionnement ? Smiley cligne </>
Modifié par Laurent Denis (22 Jul 2005 - 15:43)
merci pour vos reponses

mon menu ne se positionne tjrs pas (mozilla firefox v5) avec un left: 150px;
les titres du menu sont des titres extrait de spip v 1.8.1

comprend pas

voici mon code

<!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" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
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>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels css.alsacreations.com */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 230;
z-index:100;
width: 100%; /* précision pour Opera */
}
#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;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</style>
</head>

<body>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	<BOUCLE_menu(RUBRIQUES) {racine} {par titre}>	
	<dl>			
		<dt onmouseover="javascript:montre('#DESCRIPTIF');"><a href="#URL_RUBRIQUE">#TITRE</a></dt>
			<dd id="#DESCRIPTIF" onmouseover="javascript:montre('#DESCRIPTIF');" onmouseout="javascript:montre('');">
				<ul>
					<BOUCLE_sous_menu(RUBRIQUES) {id_parent} {par titre}>
					<li><a href="#URL_RUBRIQUE">#TITRE</a></li>
					</BOUCLE_sous_menu>	
					
				</ul>

			</dd>
	</dl>
</BOUCLE_menu>		
</div>
</body>
</html>
Ah, ça ira mieux en n'oubliant pas l'unité :

#menu {
position: absolute;
top: 0;
left: 230[b]px[/b];
...
}


<edit>(On ne peut l'omettre que pour la valeur 0)</>
Modifié par Laurent Denis (22 Jul 2005 - 16:31)
en fait

pour ie y'a pas besoin de donner l'unite
mais pour firefox il faut bien le preciser sinon ca ne marche pas
:)
zoumzoum a écrit :
en fait

pour ie y'a pas besoin de donner l'unite
mais pour firefox il faut bien le preciser sinon ca ne marche pas
:)


C'est un bon exemple du problème de fond posé par les navigateurs "tolérants" du type IE : comme il rectifie l'erreur en adoptant une unité par défaut (px) au lieu d'ignorer la ligne comme il devrait le faire... on se met à prendre de mauvaises habitudes. Les pages avec cette erreur se multiplient... A terme, les navigateurs plus stricts doivent émuler l'erreur d'IE, au moins en mode Quirks...

Un navigateur comme IE finit par coûter une certaine somme aux autres navigateurs, aux développeurs, etc... Smiley cligne