28173 sujets

CSS et mise en forme, CSS3

Problème de positionnement css

Bonjour à tous!

Débutant dans le css, je cherche à créer une mise en page de trois lignes et trois colonnes en pleine largeur.

Concrétement, la première ligne occupe toute la largeur de page pour l'entête et la bannière du site.

Elle est séparée par une <div> de un pixel qui sert de séparation. Jusque là, je n'ai pas trop de problème.

Ensuite la deuxième ligne se divise en trois colonnes dont:
- la première colonne pour le menu gauche de 140px de large et qui descend jusqu'au pied de page.
- la troisième colonne pour le menu droit de 140px de large et qui descend elle aussi jusqu'au peid de page.
- la deuxième qui se cale entre les deux mais sa largeur varie en fonction de la taille de la fenêtre du navigateur.

Enfin, une nouvelle ligne de séparation comme la première avant le pied de page qui couvre lui aussi la largeur de la page.

A noter que les marges entre le contenu et les bords de la fenêtre du navigateur doivent rester à 0px.

Je vous joins le code HTML de ma page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bonjour</title>
<style type="text/css">
</style>
/* Code d'attache css-html */
<style type="text/css" media="screen">
<!--
@import url("sitestyle2.css");
-->
</style>
</head>

<body>
<div id="conteneur">
	<div id="entete">
  	</div>
	<div id="separation">
	</div>
	<div id="menug">
	</div>
	<div id="menud">
	</div>
	<div id="pagec">
	</div>
	<div id="separation">
	</div>
	<div id="piedpage">
	<p></p>
	</div>
</div>
</body>
</html>


Voici le code css:

/* CSS Document */
/* Propriétés génériques */
body {
	margin: 0px;
	padding: 0px;
}
/* Propriétés des calques */
#conteneur {
background-image: url(Starfield_Fond.jpg);
	background-repeat: repeat;
}
#entete {
	height: 115px;
margin-left: 0px;
margin-right:0px;
	background-color:#000000;
}
#separation {
height: 1px;
background-color:#ffd700;
}
#menug {
width:140px;
background-color:#ff00FF;
float:left;
}
#menud {
width:140px;
float:right;
background-color:#FFFF00;
}
#pagec {
background-color:#00FF00;
margin-left: 140px;
margin-right: 140px;
}
#piedpage {
background-color:#0000FF;
clear:both;
}


Que dois-je faire pour que les codes générent la mise en page précédemment expliquée s'il vous plaît? Je suis désespéré! Smiley bawling
D'avance merci!
Modifié par Axos (24 Apr 2007 - 13:23)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

pour commencer, créer un div separation n'est pas nécessaire
#entete { border-bottom: 1px solid #ffd700; }


pour les 3 colonnes, il faut les mettre dans un div #middle

le dhtml complet pour ta mise en page

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="conteneur">
	
	<div id="entete"></div>
	
	<div id="middle">
	
		<div id="menug"></div>
		<div id="pagec"></div>
		<div id="menud"></div>
		<div style="clear: both;"></div>
		
	</div>
		
	<div id="piedpage"></div>
	
</div>

</body>
</html>


la css complete pour ta mise en page

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

#conteneur {
	background-image: url(Starfield_Fond.jpg);
	background-repeat: repeat;
}

#entete {
	height: 115px;
	margin-left: 0px;
	margin-right:0px;
	background-color:#000000;
}

#middle {
	width: 100%;
	height: 100%;
}

#menug {
	width:140px;
	background-color:#ff00FF;
	float:left;
	height: 100%;
}

#menud {
	width:140px;
	float:right;
	height: 100%;
	background-color:#FFFF00;
}

#pagec {
	float: left;
	background-color:#00FF00;
	margin-left: 140px;
	margin-right: 140px;
}

#piedpage {
	height: 50px;
	background-color:#0000FF;
}


Arretez moi si je suis dans le faux ^^
Merci pour ta réponse!

Mais quel est le rôle du <div middle> s'il te plaît? Je ne comprends pas très bien son utilité au regard des paramètres que tu y définis...
Modifié par Axos (24 Apr 2007 - 15:04)
Sujet clos
Aller à