28220 sujets

CSS et mise en forme, CSS3

Menu gauche qui float pas

Re...
Décidément c'est pas facile CSS ..entre tous les navigateurs qui interprètent comme ils veulent les styles ... ça mets mes nerfs à rude épreuve là ...
je cherche depuis une heure à faire un truc tout bête ...

une mise en page avec deux colones ...
un menu à gauche de 170 px et le reste à droite pour mon contenu ...

bon ben rien à faire ... IE ne veux pas m'appliquer mon float left Smiley decu
j'ai essayé un milliards de trucs mais j'y arrives pas ... J'ai pas encore compris la logique CSS je crois ... une fois de plus je vous demande votre aide Smiley cligne

voila un ex du html

<?session_start();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>espace client</title>

<link href="../conf/styles.css" rel="stylesheet" type="text/css" />
</head>

<body><!-- ++++++++conteneur global++++++++ -->
<div id="global">
	<div id="bandeau_haut">
		<img src="../images/mfgi.gif"  height="60" width="200" border="0" />
		<img src="../images/cfgstar.gif"  height="54" width="200" border="0" />
	</div>	
<!-- ++++++++menu en haut++++++++ -->				
<? include('../menu.php'); ?>
<!-- ++++++++contenu de la page++++++++ -->	
  
	<div id="menu_gauche">
		gfhfdh<br />
		teh<br />
		sethse<br />
		thse<br />
		thst<br />
	</div>	
	
		<div id="contenu">
				gfhfdh<br />
		teh<br />
		sethse<br />
		thse<br />
		thst<br />		
		</div><!-- fin de div id=contenu --> 	
	
</div><!-- fin de div id=global --> 
	</body>
</html>


et le css qui va avec



div#global {
position:absolute;
top:20;
width: 850px;  
height: auto;
background-color: #fff;
left: 50%; 
margin: 20px 0 0 -425px; 
text-align: justify;
}

div#bandeau_haut{
position: relative;
width: 850px;

height: 70px;
background-color: #fff;
}

div#menu { 
position: relative;
width: 850px; 
height: 17px; 
padding: 6px 10px;
background-color: #e7e6e6; 
}

div#contenu { 

margin: 10px 0 0 170px;
padding: 10px 10px 30px 10px;
width: 680px; 
background-color: #f0f0ef; 
}

div#menu_gauche {
float: left;
background-color: #662D2D;
width: 150px;

}


je suis perdu là Smiley decu
++
Modifié par NAS (11 Aug 2006 - 17:28)
bon j'ai compris que ça viens de mon bloc Global (j'ai suppr la div et ça le fait plus)...surement parce qu'il est centré ... mais alors là je sais pas quoi faire pour changer cette histoire ... car mon site doit être centré Smiley decu
j'y retourne
++
Salut.

Si tu veux centrer ton site, pourquoi est-ce que le #global est positionné en absolu ?

La marche à suivre recommandée est décrite dans la FAQ (je parle des marges automatiques). Les marges négatives font disparaître une partie du site si la taille de la fenêtre est insuffisante, c'est à éviter.

Ensuite, le flottant devrait se positionner convenablement.

Rem :
Les position: relative; que tu as mis un peu partout sont inutiles, tu peux les enlever. Il pourrait cependant être utile de le rajouter pour IE, pour éviter un bug. Mais comme ça ne concerne qu'IE, utilise les commentaires conditionnels.

Bon travail.

EDIT : J'allais oublier ! Si tu veux obtenir un coup de main, et éviter de te faire taper sur les doigts par les modos, je te suggère de changer le titre de ton sujet (faq), qui est, comment dire, inutile.
Modifié par Sopo (11 Aug 2006 - 17:09)
ok Smiley smile
merci à toi ...je ferai plus attention à l'avenir ...
C'est bizare j'adore programmer mais CSS j'ai du mal à piger le comment ça marche ... pourtant c'est pas si complexe que ça à première vue ...

mercii Smiley cligne
@++
Sujet clos
Aller à