[CSS] 3 div côte-à-côte + adapter la hauteur d'un div

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] 3 div côte-à-côte + adapter la hauteur d'un div

Big-Foot

hello,

Je cherche à mettre 3 div côte-à-côte :
un "collé" a droite de l'écran l'autre à guauche, et le dernier au millieu.

Comment faire ca, en les gardant à la même hauteur ?

Est ce qu'il est possible d'adapter la hauteur d'un div à celle d'un autre ? Pour que ca fasse comme un tableau : meme si un div est vide il prend la taille du plein à côté.

Publicité

urd-sama

waste of space

a mon avis il faut commencer par mettre les 3 div dans un div conteneur

gizmo

non, si c'est juste une question de background, il y a moyen de tricher, mais la hauteur d'un div ne peux pas être fonction de la hauteru d'un autre qui n'a pas une hauteur spécifiée explicitement.

EDIT: le non était en référence au message de Bigfoot

Message édité par gizmo le 16-12-2003 à 15:21:08

Big-Foot

Urd-sama a écrit :

a mon avis il faut commencer par mettre les 3 div dans un div conteneur

donc je fait ca :

Code :

<div>
<div class="spacer"></div>
<div class="g">
gauche
</div>
<div class="m">
millieu
</div>
<div class="d">
droite
</div>
<div class="spacer"></div>
</div>
div.spacer
{
clear: both;
}
div.g
{
float: left;
}
div.d
{
float: right;
}
div.m
{
float: center;
}

bien sur ca marche pas.
Je pense que mon div.spacer est faux et le float: center; je sais pas si ca existe...

urd-sama

waste of space

<A vérifier>
en fait il faut que ton div gauche soit flottant à droite, ainsi que ton div du milieu. le div de droite n'a pas besoin d'être flottant vu qu'il glissera sur celui du milieu
</A vérifier>

ps: et le div spacer après le div de droite seulement est suffisant

Message édité par urd-sama le 16-12-2003 à 15:38:54

Big-Foot

en m'aidant de ce que tu a dit urd-sama, j'ai changé ca :

Code :

div.m
{
float: left;
}

Ca fonctionne deja mieu mais c'est pas encore parfait. Je voudrais que le div du centre touche le div de gauche et celui de droite, qu'il est 100% de largeur en fait.

Message édité par Big-Foot le 16-12-2003 à 15:53:21

sibelius

Vous êtes sûr ?

<html>
<head>
<title></title>
<style type="text/css">
#global {
position: absolute;
width: 100%;
}
#gauche {
position: absolute;
width: 33%;
height: 200px;
left: 0;
background-color: blue;
}
#milieu {
float: left;
width: 34%;
height: 200px;
background-color: white;
}
#droit {
position: absolute;
width: 33%;
right: 0;
height: 200px;
background-color: red;
}
</style>
</head>

<body>
<div id="global">
<div id="gauche"></div>
<div id="milieu"></div>
<div id="droit"></div>
</div>
</body>
</html>

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Big-Foot

merci SIBELIUS, c'est très jolie
Mais je crois qu'il y a un probleme dans ta page : le div "milieu" est caché par un autre, si tu inscrit quelque chose dans ce div le texte n'apparait pas.
De plus quand je disais que je veut que le div du milieu "touche" celui de droite et de gauche, j'ai oublié de préciser que ceux-ci doivent avoir une largeur définie en px, donc impossible de jouer avec les %

au fait ca veut dire quoi " position: absolute; " ?

sibelius

Vous êtes sûr ?

Modifie le milieu et remplace par ça : #milieu {
position: absolute;
width: 34%;
left: 33%;
height: 200px;
background-color: white;
}

Pour le positionnement :
http://openweb.eu.org/articles/initiation_absolue/

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

sibelius

Vous êtes sûr ?

PS : j'ai mis des % mais rien ne t'empêche d'utiliser d'autres mesures

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com

Publicité

Big-Foot

:bounce: merci SIBELIUS j'ai enfin reussi ! en fait j'avais oublié de prendre en compte le "padding" de mes div... à cause de ca ils s'affichaient les un sur les autres.

j'ai encore un ptit probleme seulement sous IE (toujours ce ie ) :
la largeur de mes div gauche et droite étant définie en px, je n'ai pas pu indiquer de largeur au div du milieu. Sous Firebird c'est bon le div du milieu fait 100% de l'espace qui lui est déstiné, mais sous ie il prend la largeur de son contenu ce qui ne va pas du tout.

gm_superstar

Appelez-moi Super

http://www.pixy.cz/blogg/clanky/css-3col-layout/

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Big-Foot

merci ca a l'aire pas mal, mais j'arrive pas à comprendre une chose dans cette page : comment ca ce fait que les fonds des div de gauche et de droite suivent la taille globale ? c'est du JS ?
En refaisant une page similaire en local, j'arrive pas à faire en sorte que les fonds (ou les bordures) de mes div suivent la hauteur total.

gm_superstar

Appelez-moi Super

Non pas de JS. Le truc c'est que les fonds colorés (le rouge et le bleu) sont fait à partir des 2 divs principaux (main1 et main2) et c'est eux qui donnent l'impression de hauteur égale entre les colonnes, alors que les vrais DIV conteneurs (left, middle, right) ne sont pas de la même hauteur.

Bon c'est effectivement du gros bricolage. Les DIV et le positionnement ne sont pas adaptés pour ça, autant faire un tableau si tu veux des colonnes de hauteurs égales [:spamafote]

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Big-Foot

Pour une fois je voulais faire quelque chose de très très propre... A ce que je vois les div n'iront pas vraiment, mais est ce que je peu vraiment utiliser un tableau ici (apres tout le mal qu'on en dit j'ai peur )

Hermes le Messager

Breton Quiétiste

gm_superstar a écrit :

Non pas de JS. Le truc c'est que les fonds colorés (le rouge et le bleu) sont fait à partir des 2 divs principaux (main1 et main2) et c'est eux qui donnent l'impression de hauteur égale entre les colonnes, alors que les vrais DIV conteneurs (left, middle, right) ne sont pas de la même hauteur.

Bon c'est effectivement du gros bricolage. Les DIV et le positionnement ne sont pas adaptés pour ça, autant faire un tableau si tu veux des colonnes de hauteurs égales [:spamafote]

Voilà oui... Du gros bricolage...

Moi non plus, je n'ai pas encore trouvé de solution REELLEMENT satisfaisante pour ce cas de figure. Si en plus on veut rajouter un pied de page TOUJOURS en bas de la fenêtre du nav. on est dans la merde. Après, oui, ya toujours des possibilités : des hacks, des ruses etc...

Pour moi, ça reste quand même plus simple de faire un tableau de 100% de large et de haut avec 3 colonnes et deux lignes. La colonne de gauche avec une taille fixe, celle de droite aussi et celle du milieu en auto, avec en plus une seconde ligne avec une taille fixe aussi pour le pied de page. Ainsi, j'utilise une seule figure, pas de hack, pas de ruse etc...

Il faut se rendre à l'évidence, à l'heure actuelle, tout faire avec des divs, c'est très bien pour l'expérimentation perso, et pour apprendre à se servir des divs, mais si on veut une page qui passe sur IE 5+, Mozilla 1+, Opera 6+ etc... Les moyens à mettre en oeuvre sont trop important pour un truc aussi dérisoire.

Vivement que les CSS2 soient enfin prise en compte correctement par tous les navigateurs récents, pour qu'on puisse réellement se débarasser des tables...

Big-Foot

humm donc tableau.

Citation :

Vivement que les CSS2 soient enfin prise en compte correctement par tous les navigateurs récents, pour qu'on puisse réellement se débarasser des tables...

Il existe donc une solution en css2 ?
Quelles sont les navigateurs qui gèrent bien les css2 ? moz ?

Message édité par Big-Foot le 16-12-2003 à 21:36:13

Hermes le Messager

Breton Quiétiste

Big-Foot a écrit :

humm donc tableau.

Citation :

Vivement que les CSS2 soient enfin prise en compte correctement par tous les navigateurs récents, pour qu'on puisse réellement se débarasser des tables...

Il existe donc une solution en css2 ?
Quelles sont les navigateurs qui gèrent bien les css ? moz ?

Voilà oui ... En gros, si tu fais un site pour mozilla tout seul, c'est bon.

Pour ton problème, moi je te recommande un unique tableau avec toutes les propriétés dans les CSS évidemment pour assurer la validité.

Evidemment, c'est sémantiquement et philosophiquement incorrect, mais en même temps :

- ça valide.
- ça passe avec tous les nav, y compris en mode texte.
- ça garde l'organisation générale.
- c'est cross-browser.

Les divs, c'est sémantiquement correct, mais c'est pas crossbrowser.

Bref, tout dépend aussi du public que tu vises. Si c'est un public de webmasters spécialistes, pourquoi pas des divs pour montrer ce que tu as dans le ventre.

Si c'est pour tout le monde, tu auras des ennuis.

Message édité par Hermes le Messager le 16-12-2003 à 21:39:13

Big-Foot

disont que j'opte pour la solution "spécialistes", la bonne méthode dans ce cas sera celle de http://www.pixy.cz/blogg/clanky/css-3col-layout/ ?
Où est ce qu'il y a quelque chose de tout propre en css2 (même si sa passe pas sur tous les navigateurs pour l'instant) ?

Hermes le Messager

Breton Quiétiste

Big-Foot a écrit :

Effectivement, cette méthode a l'air de fonctionner. Et NON, il n'y a rien de TOUT propre en CSS2 qui passe ne serait-ce que sous IE 6, Moz 1+, et opera 7+

Big-Foot

j'ai l'impression que cette méthode http://www.pixy.cz/blogg/clanky/css-3col-layout/ ne fonctione que si les arrières plans des div droite et gauche sont des images, et par consequant quand les div n'on pas de bordures. Est-ce vraiment le cas ?

Hermes le Messager

Breton Quiétiste

Big-Foot a écrit :

Bah, comme c'est du bricolage, tu auras forcément des problèmes de toutes manières... D'où mon conseil...

Big-Foot

ouai... finalement peut-être un tableau pour l'instant

Big-Foot

Rebonjour !

J'ai repris ce truc il y a quelques jours, et j'ai réussi :
Les div de gauche et de droite s'adaptent à la hauteur de celui du milieu :sol:

D'apres mes test ca marche bien sous mozilla et aussi IE :
http://www.delta-zone.com/3div/
(sorry c'est un peu fashy ^^)

Et voila le code :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="main.css" title="Default" media="screen" />
</head>
<body>
<div id="center">
<div id="menu_left">menu left</div>
<div id="menu_right">menu right</div>
<div id="blank">
centercentercentercentercentercentercentercentercentercentercentercentercenter
centercentercentercentercentercentercentercentercentercentercentercentercenter
centercentercentercentercentercentercentercentercentercentercentercentercenter
</div>
<div class="spacer"></div>
</div>
</body>
</html>

Code :

div
{
margin: 0;
padding: 0;
background-color: transparent;
}
div.spacer
{
clear: both;
}
body
{
background-color: #FFFFFF;
color: #000000;
margin: 0;
padding: 0;
border: 0;
}
div#center
{
width: 100%;
background-color: #F0FF0f;
}
div#menu_left
{
height: 300px;
width: 140px;
float:left;
}
div#menu_right
{
height: 300px;
width: 140px;
float:right;
}
div#blank
{
margin: 0 140px 0 140px;
background-color: #FFFFFF;
}

Et voila le tout sans tableau

Message édité par Big-Foot le 13-06-2004 à 19:46:51

gm_superstar

Appelez-moi Super

Big-Foot a écrit :

Rebonjour !

J'ai repris ce truc il y a quelques jours, et j'ai réussi :
Les div de gauche et de droite s'adaptent à la hauteur de celui du milieu :sol:

Ben en fait pas vraiment. C'est toujours le même truc que j'explique en dessus [:spamafote]
Les colonnes en gauche et de droite et de droite ont en réalité les dimensions que tu leur a données (300 px de haut) mais elles semblent avoir la hauteur du DIV central car elles sont transparentes.

Si tu as besoin d'avoir des bordures à tes colonnes alors ça marchera plus

Message édité par gm_superstar le 13-06-2004 à 20:23:51

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Big-Foot

ben justement pour les bordures, j'y travaille :
http://www.delta-zone.com/borders/

ca passe pas sous IE pour le moment, si vous avez des idées...

Message édité par Big-Foot le 13-06-2004 à 21:41:54

T509

$job->GetJob(now)

Il y a là aussi :
http://www.alsacreations.com/articles/modeles/

---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !

Big-Foot

merci T509, malheureusement ton système ne regle pas à première vue mon problèmes de bordures

Voila ce qui se passe

Sous mozilla c'est ok :

Mais sous ie ca donne ça :

C'est vraiment un casse tête... Vous avez pas une idée ? Parce que là je pense que j'y suis presque c'est dommage.

sombresonge

Comme ca?

Code :

<div id="Page" class="Page">
<div id="Gauche" class="Gauche">G</div>
<div id="Centre" class="Centre">
<p>Centre</p>
<p>
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu
</p>
</div>
<div id="Droite" class="Droite">D</div>
</div>

Code :

.Gauche {
height: 100%;
width: 20%;
background-color: #66CCFF;
float: left;
border: 5px solid #FF0000;
}
.Droite {
height: 100%;
width: 20%;
float: left;
background-color: #00CCFF;
border: 5px solid #33FF00;
}
.Centre {
height: 100%;
width: 60%;
background-color: #CCCCCC;
float: left;
border: 5px solid #FFFF00;
}
.Page {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
height: 25%;
width: 100%;
}

Je@nb

Kindly give dime

Moi aussi j'aurais préféré avoir une hauteur fixe, pour l'instant c le seul problème que j'ai. Mais sinon c assez bien construit je trouve :
http://blog.jeanb-net.com (ne pas faire attention o contenu )

T509

$job->GetJob(now)

pour une hauteur fixe, il y a une astuce décrite ici :
http://www.alistapart.com/articles/fauxcolumns/ ou ici :
http://www.alistapart.com/articles/negativemargins/

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] 3 div côte-à-côte + adapter la hauteur d'un div

Sujets relatifs
[CSS] Plus de scrollbar?	[CSS] un div qui "colle" au bas de la fenetre?
obtenir la hauteur d'un div en js ( ou autre ??)	[HTML / CSS] problèmes avec SPAN vide
[CSS] question sur <span>	Problem de dimension de tableau en CSS
[CSS] padding	[CSS] positionnement - IE vs le reste du monde
[CSS] hauteur max de div
Plus de sujets relatifs à : [CSS] 3 div côte-à-côte + adapter la hauteur d'un div

Page générée en 0.096 secondes