Probleme float:left

Question

Alviss

12 Jan 2008 à 00:47

Bonjour a tous Smiley cligne

Je fais appel a vous pour un probleme que je n'arrive pas a résoudre, pourtant ce n'est pas faute d'avoir tout essayer Smiley langue

Voila je suis actuellement sur la création d'un site en HTML + CSS, etant assez debutant dans ce domaine.
J'ai appris les notions du CSS grâce au site du zero.
J'ai donc utiliser les balises <div> pour les "cadres".
J'ai reussi à créer la banniere + le sous-menu assez facilement mais c'est apres que sa se complique.
J'aimerais avoir 2 menu a gauche superposé + mon centre au milieu (logique Smiley rolleyes

) cependant je suis obliger de créer pour cela un menu qui sera placé derriere les 2 menus a gauche qui me permettera de pouvoir placer mon centre à coté des 2 menus grace à la balise float:left; dans le CSS. Sans cette balise mon centre sera automatiquement placé dessous mes menus.

Le probleme est là, je ne veus pas que mon site soit placé tout à gauche mais soit centré ! Smiley bawling

Je ne sais pas si vous me comprenez Smiley sweatdrop

mais vous comprendrez mieu en voyant par vous meme Smiley cligne

Je precise mon site est encore à l'etat de test donc ne vous inquietez pas si les cadres sont de toutes les couleurs.

Voila mon code HTML + le CSS et un screen du resultat.

HTML :

<!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">
<link rel="stylesheet" type="text/css" href="style1.css">
<title>Test</title>
</head>
<body>



<center>
<div id="banniere">Ceci est le bandeau</div>
<div id="menu_haut">Menu haut</div>

<div id="menu_bas3">

<div id="menu_bas2">menu_bas2</div>
<div id="menu_bas1">menu_bas1</div>
	
</div>

<div id="contenu">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne
	</div>

	</center>
</body>
</html>

CSS:

div {
	text-align:center;
	}
div#banniere {
	width:890px;
	height:160px;
	background-color:#0DD0CC;
	}
div#menu {
	float:left;
	width:200px;
	height:400px;
	background-color:#FF6699;
	
	}
div#menu_haut {
	width:890px;
	height:50px;
	background-color:#66CC33;
	}
	
div#menu_bas1 {
	width:100px;
	height:200px;
	background-color:#C099CC;
	}
	
div#menu_bas2 {
	width:100px;
	height:200px;
	background-color:#0C99CC;
	}

div#menu_bas3 {
	
	float:left;
	width:100px;
	height:400px;
	background-color:#CC99CC;
	}
	

	
div#contenu {
	float:center;
	width:500px;
	height:400px;
	background-color:#FFCC00;
	}

div#pied_page {
	clear:both;
	width:600px;
	height:50px;
	background-color:#33FF99;
	}

Apercu :

http://img185.imageshack.us/img185/6549/001lv5.png

Voila se que je souhaiterais avoir (modifier sous photoshop) :

http://img503.imageshack.us/img503/9926/002sl3.png

Si vous avez peut etre une facon differente de cree la structure d'un site

Voila sur ce @+ et merci Smiley biggrin

Modifié par Alviss (12 Jan 2008 - 00:49)

seb67110

12 Jan 2008 à 11:34

Bonjour,

Juste une petite remarque pour ton css : l'attribut float:center n'existe pas

div#contenu {

	[b]float:center;[/b]

	width:500px;

	height:400px;

	background-color:#FFCC00;

	}

pour centrer voir : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

Et après tu peux utiliser les "marging" pour mettre en place tes deux menus de gauche je pense.

Bonne chance !
Modifié par seb67110 (12 Jan 2008 - 11:35)

seb67110

12 Jan 2008 à 12:23

Voilà je pense c'est ce que tu cherchais (il faut regarder sous firefox)mais sous ie ça ne marche pas... et je vois pas dsl:

<!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">

<link rel="stylesheet" type="text/css" href="style1.css">

<title>Test</title>

<style type="text/css">
<!--

html, body{
height:100%;
width:100%;
margin:0;
padding:0;
}

div#conteneur{
width:890px;
height:auto;
margin-left:auto;
margin-right:auto;
}

div#banniere {
width:890px;
height:160px;
background-color:#0DD0CC;
}
	

div#menu {
float:left;
width:200px;
height:400px;
background-color:#FF6699;
}

div#menu_haut {
width:890px;
height:50px;
background-color:#66CC33;
}

div#menu_bas1 {
width:100px;
height:200px;
background-color:#C099CC;
}

div#menu_bas2 {
width:100px;
height:200px;
background-color:#0C99CC;
}

div#menu_bas3 {
float:left;
width:100px;
height:400px;
background-color:#CC99CC;
margin-left:95px; /*j'ai trouvé cette valeur en faisant quelques calculs*/

	}

	



	

div#contenu {


	width:500px;

	height:400px;

	background-color:#FFCC00;
	margin-left:auto;
	margin-right:auto;

	}



div#pied_page {

	clear:both;

	width:600px;

	height:50px;

	background-color:#33FF99;

	}
-->
</style></head>

<body>







<div id="conteneur">

<div id="banniere">Ceci est le bandeau</div>

<div id="menu_haut">Menu haut</div>



<div id="menu_bas3">



<div id="menu_bas2">menu_bas2</div>

<div id="menu_bas1">menu_bas1</div>

	

</div>



<div id="contenu">

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas faucibus nunc. Morbi quis ne

	</div>

</div>



</body>

</html>

Peut être quelqu'un voit le problème... IE centre le contenu en fonction du menu et pas en fonction du conteneur...

@+
Modifié par seb67110 (12 Jan 2008 - 13:15)

Benjamin D.C.

12 Jan 2008 à 13:15

Alviss a écrit :
je suis actuellement sur la création d'un site en HTML + CSS, etant assez debutant dans ce domaine.
J'ai appris les notions du CSS grâce au site du zero.

Dans ce cas, le modèle visuel que tu présentes n'est pas particulièrement adapté. Tu gagnerais à attaquer des mises en page plus simples pour commencer. Une piste rapide, néanmoins, sur base de positons:


[#black][b]HTML[/b][/#]


<div id="wrap">
	
	<div id="firstNav">Premier menu</div>
	
	<div id="secondNav">Deuxième menu</div>
	
	<div id="content">Contenu principal</div>
	
</div>



[#black][b]CSS[/b][/#]


#wrap {width:500px; position:relative;}
		
#firstNav,#secondNav {height:50%; width:150px; position:absolute;}
		
#secondNav {top:50%;}
		
#content {padding-left:150px;}

Attention toutefois au fait que ton contenu principal devra impérativement être plus long que la hauteur occupée par les menus, ou en tout cas prévoir une hauteur minimale (min-height) adaptée, spécifiée en em par exemple.

serval92

14 Jan 2008 à 13:38

Je pense avoir la solution :

le CSS :

body {
margin:0;
padding:0;
}
#main {
position:relative;
width:890px;
margin:0 auto;
}
#bandeau {
height:160px;
background-color:red;
}
#menu {
height:50px;
background-color:purple;
}
#menubas1 {
position:absolute;
top:210px;
height:200px;
width:100px;
margin-left:145px;
background-color:yellow;
}
#contenu {
position:relative;
margin-left:245px;
width:500px;
height:400px;
background-color:orange;
}
#menubas2 {
position:absolute;
top:410px;
left:145px;
height:200px;
width:100px;
background-color:green;
}
#pieddepage {
position:relative;
width:600px;
height:50px;
background-color:blue;
margin-left:145px;
}

Le code HTML :

<body>
<div id="main">
<div id="bandeau">Bandeau</div>
<ul id="menu">Menu</ul>
<ul id="menubas1">Menu bas 1</ul>
<div id="contenu">Contenu</div>
<ul id="menubas2">Menu bas 2</ul>
<p id="pieddepage">Pied de page</p>
</div>
</body>
Modifié par serval92 (15 Jan 2008 - 12:52)

Sujet clos

CSS et mise en forme, CSS3

Probleme float:left