site en floatant, comment faire ?

27 janv. 2009, 01:29

Bonjour,
j'essaie de centrer un site en floatant mais à chaque fois que je place un bloc fils en floatant ils sort du cadre.
http://www.6tnline.com/test/site2/test.html
Coment utiliser le positionnement floatant dans un conteneur ?

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Insert title here</title>
<style type="text/css">
*{margin:0; padding: 0; }
img{margin: 0; }
ul{list-style:none;}
#conteneur{
position:relative;
margin-left:auto; 
margin-right:auto; 
border: 4px black solid; 
width:970px; 
display: block;}

#menuGauche{ position: relative; left: 20px; top: 15px; width: 200px; border: 1px #000 solid;}
#menuGauche, ul, li{ margin: 10px;}

#contenuPage{position: relative; left: 240px; top: 15px;}


</style>
</head>
<body>
<div id="conteneur">
	<div id="menuGauche">
		<ul>
			<li><a href="">sdfghfg</a></li>
			<li><a href="">sdfghfg</a></li>
			<li><a href="">sdfghfg</a></li>
			<li><a href="">sdfghfg</a></li>
			<li><a href="">sdfghfg</a></li>
		</ul>
	</div>
	<div id="contenuPage">
		<img alt="logo" src="img/Mortimer_03.png" />
		<div id=texte>
			<h1>Titre</h1>
			<p>texteyexye</p>
		</div>
	</div>
</div>
</body>
</html>

22 févr. 2009, 13:57

Bonjour !

pour ton conteneur moi je fais comme ça :

Code : Tout sélectionner

#conteneur
{ 
position: relative; 
margin: 0 auto; 
border: 4px black solid; 
width: 970px; 
}

#menuGauche
{
float: left;
with: 200px;
}

#content
{
margin-left: 205px;
}

c'est un exemple je sais pas si j'ai bien compris ce que tu veux faire

22 févr. 2009, 15:24

donc le conteneur avec une position relative, une largeur et la marge auto pour la largeur, le tout obligatoire ou partiellement ?
le bloc de droite peux être flotant ?

22 févr. 2009, 15:38

et bien avec ça ton conteneur est direct centré ça t'evite de le faire en position absolut genre:

Code : Tout sélectionner

#conteneur
{
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}

pour l'exemple en position relative il faut que tu met dans le body

Code : Tout sélectionner

body
{
text-align: center;
}
et dans le conteneur
text-align: left;

car c'est pour les anciens navigateurs si mes souvenirs son bon et donc t'es sur que c'est toujours centré

tu pourrais par exemple faire

Code : Tout sélectionner

#conteneur
{
position: relative;
margin: 0 auto;
border: 4px black solid;
width: 970px;
}

#menuGauche
{
float: left;
with: 150px;
}


#menuRight
{
float: right;
width: 150px;
}
#content
{
margin: 0 155px 0 155px;
}

la c'est un exemple pour 3 colones par exemple

mais tu peux faire un panel a gauche en floatant et le content à droite en floatant aussi

et généralement pour ce genre de squelette que j'utilise c'est valid W3C

site en floatant, comment faire ?

Qui est en ligne