[CSS] 3 div côte-à-côte + adapter la hauteur d'un div
3 div côte-à-côte + adapter la hauteur d'un div [CSS] - HTML/CSS - Programmation
Marsh Posté le 16-12-2003 à 15:20:04
a mon avis il faut commencer par mettre les 3 div dans un div conteneur
Marsh Posté le 16-12-2003 à 15:20:34
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
Marsh Posté le 16-12-2003 à 15:36:40
| Urd-sama a écrit : a mon avis il faut commencer par mettre les 3 div dans un div conteneur |
donc je fait ca :
Code :
|
bien sur ca marche pas.
Je pense que mon div.spacer est faux et le float: center; je sais pas si ca existe...
Marsh Posté le 16-12-2003 à 15:38:15
<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
Marsh Posté le 16-12-2003 à 15:51:37
en m'aidant de ce que tu a dit urd-sama, j'ai changé ca :
Code :
|
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
Marsh Posté le 16-12-2003 à 16:08:10
<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
Marsh Posté le 16-12-2003 à 16:29:00
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; " ?
Marsh Posté le 16-12-2003 à 16:35:01
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
Marsh Posté le 16-12-2003 à 16:35:38
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
Marsh Posté le 16-12-2003 à 18:01:01
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.
Marsh Posté le 16-12-2003 à 19:19:00
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
Marsh Posté le 16-12-2003 à 20:40:46
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.
Marsh Posté le 16-12-2003 à 20:50:13
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]](https://forum-images.hardware.fr/images/perso/spamafote.gif "[:spamafote]")
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 16-12-2003 à 21:25:43
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 )
Marsh Posté le 16-12-2003 à 21:27:11
| 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. |
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...
Marsh Posté le 16-12-2003 à 21:35:23
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
Marsh Posté le 16-12-2003 à 21:38:42
| Big-Foot a écrit : humm donc tableau.
|
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
Marsh Posté le 16-12-2003 à 21:54:33
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) ?
Marsh Posté le 16-12-2003 à 22:05:02
| Big-Foot a écrit : 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/ ? |
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+
Marsh Posté le 16-12-2003 à 22:20:30
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 ?
Marsh Posté le 16-12-2003 à 22:28:03
| Big-Foot a écrit : 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 ? |
Bah, comme c'est du bricolage, tu auras forcément des problèmes de toutes manières... D'où mon conseil...
Marsh Posté le 13-06-2004 à 19:41:30
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 
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 :
|
Code :
|
Et voila le tout sans tableau 
Message édité par Big-Foot le 13-06-2004 à 19:46:51
Marsh Posté le 13-06-2004 à 20:23:24
| Big-Foot a écrit : Rebonjour ! |
Ben en fait pas vraiment. C'est toujours le même truc que j'explique en dessus
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
Marsh Posté le 13-06-2004 à 21:41:41
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
Marsh Posté le 14-06-2004 à 10:30:55
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 !
Marsh Posté le 22-06-2004 à 01:41:44
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.
Marsh Posté le 22-06-2004 à 21:57:11
Comme ca?
Code :
|
Code :
|
Marsh Posté le 23-06-2004 à 00:19:40
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 
)
Marsh Posté le 23-06-2004 à 00:48:39
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/
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
Marsh Posté le 16-12-2003 à 15:13:25
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.