High-Tech Santé Médecine Droit-Finances

Bien choisir

sa console de jeux

Rechercher : dans
Par :

Positionnement CSS et HTML 3 colonnes

Dernière réponse le 1 fév 2009 à 17:40:24 itch, le 28 jan 2008 à 16:11:28 
 Signaler ce message aux modérateurs

Bonjour,

J'ai vraiment trouvé un casse tête que je n'arrive pas à résoudre... Mon problème est simple : je veux obtenir dans ma page un bloc centré de 900px (#page), qui contient 3 blocs de largeurs fixes : un central #content de largeur 490px, et un à gauche #menugauche, un à droite #menu droite de 170px chacun.

ça paraît simple avec des float, mais ça ne l'est pas, puisque le div #page mesure du coup 0px de haut (ne contenant plus que des div flottant...). Comment faire ça proprement ??

voilà l'exemple en jpeg sur http://www.itch.fr/EXEMPLE.jpg

Voici le code css :


html, body{

margin: 0;

padding: 0;

text-align: center;

}



#page{

width: 900px;

margin: 4em auto;

}



#menugauche{

float: left;

margin: 110px 10px 0 0;

padding: 5px;

width: 170px;

text-align: right;

}



#content{

float: left;

width: 490px;

margin: 0;

padding: 15px;

text-align: justify;

}



#menudroite{

padding: 5px;

width: 170px;

text-align: left;

float: right;

}



et le html :



<html>

<body>

<div id="page">



<div id="menugauche">



</div>



<div id="content">



</div>



<div id="menudroite">



</div>



</div>

</body>

</html>



Merci d'avance

Configuration: Windows XP
Firefox 2.0.0.11

Meilleures réponses pour « positionnement CSS et HTML 3 colonnes » dans :
[CSS] Créer facilement des CSS VoirUn outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle. La version Lite est gratuite. www.topstyle4.com
Javascript - Centrer verticalement une page web VoirPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Posez votre question Répondre

1

Darkito, le 28 jan 2008 à 16:19:04

Bonjour,
Je ne vois pas ou est ton problème...
Pourquoi ne pas précisé une hauteur pour tes tests et une couleur de fond pour identifier tes div.
De plus, je pense que dans ton cas, il serait mieux de mettre float : left pour menu droite car IE n'est pas trop copain avec les float...

--
Tøƒ

   
Répondre à Darkito

2

itch, le 28 jan 2008 à 16:28:03

Pour ce qui est de fixer des hauteurs pour mes tests, c'est fait puisqu'il ont du contenu, leurs propriétés height s'en retrouvent ajustées automatiquement. Le but du jeu c'est que cette balise #page suive le mouvement... , le contenu de #content étant modifié suivant les pages du site, #page devra s'adapter à sa taille. Mais avec des propriétés float sur toutes les div contenues dans #page, ce dernier ne s'ajuste pas et mesure 0px de haut. Je vérifie tout avec le DOM inspector de Firefox, donc pas besoin s'y mettre des couleurs pour faire mes tests. Tous les tutos que j'ai trouvé sur le web qui explique des constructions de pages à partir de 3 colonnes le font avec des colonnes qui font toutes la largeur de la page, et qui ne nécessitent pas d'être encadrées par un div centré de largeur fixe...

   
Répondre à itch

3

Darkito, le 28 jan 2008 à 16:32:41

Peut-être qu'il faut que tu "fermes" ton float.

essaie d'ajouter la classe

.Clear{
clear:both;
}

et d'insérer une div vide <div class="Clear"></div> juste après ton menu droit.

As-tu tester sous IE pour l'histoire du float right ?

--
Tøƒ

   
Répondre à Darkito

4

 elburro, le 1 fév 2009 à 17:40:24

Centre est le bloc principale qui les contient tous aligner sur la gauche

div#centre {
width : 780px ;
float:left;
}

le bloc de gauche aligner a gauche

div#gauche {
float:left;
width : 150px;
margin-right:0px;
background: #FFF;
}
le bloc de droite a droite

div#nav {
float:right;
width : 25px;
margin-left: 5px;
background: #FFF;
}

et le contenu

div#cont1 {
background: #FFF;
}


Moi je place le cont1 après le bloc de droite dans mon Xhtml

   
Répondre à elburro
Posez votre question Répondre
Ils ont besoin de votre aide