28173 sujets

CSS et mise en forme, CSS3

[résolu]Positionnement flottants : 2 blocs à côté d'un grand

Salut !!


J'ai un problème avec le positionnement de mes blocs,
donc j'ai mon conteneur_global qui dedans contient un div avec le logo, un autre div ou je mettrais le menu, et un dernier div ou il y'aura le contenu.

Ce que je voudrais, c'est mettre le logo et le menu a droite, et le contenu a gauche, voila le schéma : www.studio20.info/struc.jpg

J'ai donc essayé float: left; mais ca ne fonctionne pas, je ne la met peut-être pas au bon endroit ou je ne sais pas...

Voila ce que ca donne du coté html :


<!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>
<link rel="stylesheet" type="text/css" href="styles.css"/>
		<title>Studio 20</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
	</head>
	<body>
    <div id="conteneur_global">
    <div id="logo">
    logo
    </div>
    <div id="contenu_left">
    <ul id="menu">
			<li><a href="http://www.studio20.info/index.html">ACCUEIL</a></li>
			<li><a href="http://www.studio20.info/artistes.html">ARTISTES</a></li>
			<li><a href="http://www.studio20.info/conception.html">CONCEPTION</a></li>
			<li><a href="http://www.studio20.info/id.html">IDENTITE</a></li>
			<li><a href="http://www.studio20.info/liens.html">LIENS</a></li>
		</ul>
    </div>
     <div id="contenu">
      Bonjour et bienvenue,
	</div>
    </div>
    </body>
</html>


le CSS :


body
{
	margin: 0px 0;
	padding: 0;
	text-align: center;
	font: 0.7em "Arial", arial, sans-serif;
	background: #561111;
}

div#conteneur_global
{
	position: relative;
	width: 800px;
	margin: 0 auto;
	background: #561111;
}

div#logo
{ 
	margin-top: 30px;
	width: 150px;
	height: 150px;
	background: #729c6b;
}
	
div#contenu_left
{
	margin-top: 30px;
	width: 150px;
	height: 300px;
	position: relative;
	background: #729c6b;
}

ul#menu
{
	width: 120px;
	height: 50px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul#menu li
{
	text-align: left;
	padding-left: 25px;
}


ul#menu li a
{
	line-height: 15px;
	font: 1em Arial;
	font-weight: bold;
	letter-spacing: 1px;
	color: #fff;
	display: block;
	text-decoration: none;
	margin: 0 5px;
}

ul#menu li a:hover
{
	color: #17502b;
}

div#contenu
{	
	width: 500px;
	padding: 0 30px 0 30px;
	text-align: right;
	margin-bottom: 30px;
	margin-top: 10px;
	background: #729c6b;
}



Ma question est : ou dois-je mettre la déclaration float ? est ce que je dois changer autre chose qui ne va pas dans le code ?

Merci !
Modifié par fixyou (02 Mar 2006 - 11:03)
Modérateur
salut,
div#logo

{ 
float:left;

}

	

div#contenu_left

{
float:left;
clear:left; /* pour le faire passer sous le logo et pas rester a coté */

}



div#contenu

{	
margin-left:150px; /* la largeur des elements en float a gauche */

}


Tu pouvais aussi bien, declaré une "zone gauche" en float:left; dans laquelle il te suffisait de mettre les elements que tu veut a gauche et ton autre zone "contenu" en marge gauche .
On trouve souvent 4 zone , l'entete, le menu , le contenu, le pied .
En les delimitant par 4 div des le depart, il est ensuite plus aisée de positionné globalement les contenus de ces zones.

a plus
Sujet clos
Aller à