Probléme placement collone droite css
Résolu
speedylol
Messages postés
228
Date d'inscription
mercredi 1 septembre 2004
Statut
Membre
Dernière intervention
27 novembre 2013
-
28 juil. 2006 à 12:24
cs_oga Messages postés 5 Date d'inscription jeudi 6 mai 2004 Statut Membre Dernière intervention 28 juillet 2006 - 28 juil. 2006 à 17:02
cs_oga Messages postés 5 Date d'inscription jeudi 6 mai 2004 Statut Membre Dernière intervention 28 juillet 2006 - 28 juil. 2006 à 17:02
A voir également:
- Probléme placement collone droite css
- Exemple de page d'accueil html et css ✓ - Forum Graphisme/design
- Exemple page d'authentification html css - Conseils pratiques -PHP
- Code ascii fleche droite - Forum C / C++ / C++.NET
- Code source HTML ✓ - Forum PHP
- Droite de henry - Forum Visual Basic 6
1 réponse
cs_oga
Messages postés
5
Date d'inscription
jeudi 6 mai 2004
Statut
Membre
Dernière intervention
28 juillet 2006
28 juil. 2006 à 17:02
28 juil. 2006 à 17:02
Bonjour,
il manquait une ligne :
float: left;
dans la définition de la classe "droite" !
J'ai modifié ton code pour pouvoir le visualiser en interne chez moi et pour le rendre un peu plus "propre" et léger au niveau CSS, meme si je ne suis pas encore un "senior" (je ne me suis pas trop occupé du HTML qui n'est pas normalisé non plus, et il y avait un div en trop !).
Globalement, évite d'utiliser des majuscules !
Je t'ai mis mes commentaires dans le code.
Voici le résultat, tu n'as plus qu'a remplacer la couleur du fond par tes url(image) dans les propriétés background :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
/* Partie conteneur du site */
body {
padding: 0;
margin: 0;
background: #fdd;
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
}
.conteneur {
width: 800px; /* La somme des largeurs des composants contenus (gauche, centre et droite) doit ètre inférieure ou égale à cette valeur */
margin: 20px auto;
background: #999;
}
/* Partie en-tête du site */
.header {
width:800px;
height:102px;
background: #aaf;
}
.flash {
width:800px;
height:46px;
background: #fff;
}
/* Partie principal du site */
.centre {
float: left;
margin: 0 2px;
width: 496px; /* 500px - 2*2px de marges */
background: #faa;
}
/* Partie menu de gauche */
.gauche {
float: left;
width: 150px;
min-height: 500px;
background: #afa;
}
/* Partie menu de droite */
.droite {
float: left;
width: 150px;
min-height: 500px;
background: #afa;
}
/* Partie pied du site */
.pied {
clear: both;
width: 800px;
height: 26px;
text-align: right;
background: #aaf;
}
</style>
</head>
<!-- Div qui permet de contenir le site -->
<!-- Div qui permet de contenir toute l'en-tête et le menu horizontal par onglets -->
FLASH
<!-- Div qui permet de contenir le menu de gauche et divers modules -->
gauche
<!-- Div qui permet de contenir page principal et les principaux modules -->
centre
<!-- Div qui permet de contenir le menu de droite -->
droite
<!-- Div qui permet de contenir le pied de page et le second menu horizontal -->
</html>
Voilà, j'espere que ca t'aidera . Moi je parts en vacances ce soir au soleil
Bonne chance.
Oga
il manquait une ligne :
float: left;
dans la définition de la classe "droite" !
J'ai modifié ton code pour pouvoir le visualiser en interne chez moi et pour le rendre un peu plus "propre" et léger au niveau CSS, meme si je ne suis pas encore un "senior" (je ne me suis pas trop occupé du HTML qui n'est pas normalisé non plus, et il y avait un div en trop !).
Globalement, évite d'utiliser des majuscules !
Je t'ai mis mes commentaires dans le code.
Voici le résultat, tu n'as plus qu'a remplacer la couleur du fond par tes url(image) dans les propriétés background :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
/* Partie conteneur du site */
body {
padding: 0;
margin: 0;
background: #fdd;
font: 0.8em Verdana, Arial, Helvetica, sans-serif;
}
.conteneur {
width: 800px; /* La somme des largeurs des composants contenus (gauche, centre et droite) doit ètre inférieure ou égale à cette valeur */
margin: 20px auto;
background: #999;
}
/* Partie en-tête du site */
.header {
width:800px;
height:102px;
background: #aaf;
}
.flash {
width:800px;
height:46px;
background: #fff;
}
/* Partie principal du site */
.centre {
float: left;
margin: 0 2px;
width: 496px; /* 500px - 2*2px de marges */
background: #faa;
}
/* Partie menu de gauche */
.gauche {
float: left;
width: 150px;
min-height: 500px;
background: #afa;
}
/* Partie menu de droite */
.droite {
float: left;
width: 150px;
min-height: 500px;
background: #afa;
}
/* Partie pied du site */
.pied {
clear: both;
width: 800px;
height: 26px;
text-align: right;
background: #aaf;
}
</style>
</head>
<!-- Div qui permet de contenir le site -->
<!-- Div qui permet de contenir toute l'en-tête et le menu horizontal par onglets -->
FLASH
<!-- Div qui permet de contenir le menu de gauche et divers modules -->
gauche
<!-- Div qui permet de contenir page principal et les principaux modules -->
centre
<!-- Div qui permet de contenir le menu de droite -->
droite
<!-- Div qui permet de contenir le pied de page et le second menu horizontal -->
</html>
Voilà, j'espere que ca t'aidera . Moi je parts en vacances ce soir au soleil
Bonne chance.
Oga
