High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

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 :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beau, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
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...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe 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