|
|
|
Auteur
|
Message
|
1
|
|
|
|
|
|
si tu mets un height 100% ça sous-entend que tu lui laisses le choix de s'adapter en hauteur
donc tu ne peux pas lui demander en même temps d'avoir une hauteur déterminée
tu as répondu à ta question dans la ligne : "cela dépend de leur contenu",
cela veut dire que le % s'adapte à son contenu !
donc si tu veux la même hauteur il faut forcément passer en px
ou alors il faut compenser manuellement avec des <br /> ou des <p></p>
tu as aussi le paramètre min-height: qui peut peut etre résoudre ton problème
tu imposes aux 2 div une hauteur minimale en px, quel que soit le contenu
mais dans ce cas cela ne sert à rien de lui mettre une height 100% !
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
Merci Polov de ton intervention, je me sentais un peu seul 
En ce qui concerne la compensation "manuelle", c'est ce que je fais actuellement mais bon, ce n'est pas propre 
Pour la hauteur en px, je ne peux à aucun moment le savoir.
En fait, j'ai un template dans dream pour une charte, dans un col non modifiable par l'intégrateur je veux placer un PNG en bas de page et cela, quelque soit la hauteur de la DIV de contenu.
D'où le min height que je ne peux non plus déterminer mais au cas de trop grande quantité de contenu je me retrouverai encore coincé par cette hauteur.
Je me demande s'il ne faut pas faire un script qui lirait la hauteur et l'attribuerait à une DIV
|
|
|
|
|
"...un col non modifiable par l'intégrateur" : est-ce que ça veut dire que tu ne peux modifier le code de la page ?
une image en bas de page : dans ce cas ça veut dire que la page fera toujours toute la hauteur, j'avais compris que tu voulais juste 2 colonnes de hauteur egales mais variable en fonction du contenu,
en fait tu veux 2 colonnes (ou 2 div) qui remplissent toute la hauteur de la page quel que soit le contenu !?
dans ce cas ce qu'il doit te manquer c'est simplement un margin:auto
c'est lui qui va faire fonctionner le height:100%
autre solution : placer l'image dans une div et attribuer à cette div une position en bas de page
normalement avec un margin-bottom:0
ou bottom:0
la div devrait venir se coller au bas de la colonne
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
je viens de tester et en fait dans tous les cas le height:100% ne fonctionne pas
la div ne remplira jamais la totalité de la hauteur de l'écran
ce qu'il faut comprendre c'est que tu as une div vide (colonne), tu la rempli de texte, si tu veux que la colonne face toute la hauteur soit tu lui mets un min-height de 700px par exemple (en réference à 1024x768)
donc dans ce cas elle fera toujours au minimum 700px de haut quelque soit le contenu
soit tu mets une image de fond en background de 700px de haut
donc c'est toi qui détermine la hauteur de la page dès le départ
ensuite le contenu vient remplir plus ou moins la hauteur
maintenant pour l'image cela n'a rien à voir avec le contenu de la colonne
si tu veux qu'une image vienne se coller en bas de la div, il suffit de lui ajouter un bottom:0
et si tu veux que ce soit le navigateur qui serve de rebord, dans ce cas il faut mettre la div en position:absolute, avec un margin-bottom:0 ou bottom:0
mais là elle va superposer ce qui est en dessous, donc faut rien mettre dessous
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
poum a écrit :
Imaginez deux DIV imbriquées.
On ne connait pas leur taille (cela dépend de leur contenu).
Comment faire pour que la DIV intérieure ait la même hauteur que celle qui la contient ? 
En gros, comment simuler un HEIGHT à 100% (qui évidement ne fonctionne pas)
Pour l'exemple on peut imaginer une DIV avec une largeur de 400px, une seconde imbriquée en FLOATLEFT avec une largeur de 100px.
A ces côtés, du texte de longueur inconnue déterminerait la hauteur de la première DIV.
Bonsoir,
Peut-être un thème de réflexion (en anglais) à http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-(...)
et un exemple (toujours en anglais, mais le code reste le code...) à http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
Pas eu le temps d'analyser en détail  .
|
|
|
|
|
 Polov & Telliak
l'exemple donné par Telliak montre bien le problème.
Sur le second, les 5 cols le montrent bien.
Je n'ai pas non plus décortiqué la chose (trop nul en anglais), j'espère simplement que ce width à 100% de l'écran n'est pas obligatoire.
Cela étant, j'ai comme l'impression que ce Mathieu James Taylor à fait un joli salto arrière suivi d'un triple saut avant pour arriver à ces fins 
|
|
|
|
|
merci
mais cette méthode est beaucoup trop complexe
elle utilise la position:relative
en plus c'est indigeste à lire (et à mettre en place), il imbrique des div dans d'autres div en position:relative et il règle tout ça avec des pourcentage % !
pour faire 5 colonnes il se retrouve avec 5 conteneurs plus les 5 div, ce qui en fait 10 en tout
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
La meilleure démonstration se trouve en fin de compte ici
Pour bien voir la solution, il faut réduire la taille du navigateur, descendre en bas de page pour voir le bas des colonne de droite (colorées) puis de modifier la taille en hauteur du navigateur. Le bas de page reste toujours en bas 
|
|
|
|
|
il y a beaucoup plus simple
poum : pourquoi veux-tu que 2 colonnes (div) fassent la même hauteur alors quelle sont vide ?
par exemple : tu as une colonne avec du texte, il suffit de mettre un background dans la div conteneur (une couleur) et pas dans la div qui est dedans, comme ça tu ne verra même pas la hauteur de la div (elle sera comme transparente, puisqu'elle n'a pas de background
ce que tu verra c'est la div conteneur qui sera en couleur
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
polov a écrit :
merci
mais cette méthode est beaucoup trop complexe
elle utilise la position:relative
Elle montre en tout cas mon problème
Tu vois une manière de faire "plus simple" ?
je suis preneur tu sais
|
|
|
|
|
polov a écrit :
ce que tu verra c'est la div conteneur qui sera en couleur
tu veux dire qu'on ne peux rien y mettre (une image par exemple) ?
Argh, si c'est ça me revoilà au point de départ 
|
|
|
|
|
mauvais exemple : il me semble que cela ne parle que de largeur et pas de hauteur (le dessin est trompeur) car on ne voit nulle part le paramètre height
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
non je ne parle pas du contenu : du texte, des images, ce que tu veux
je parle simplement que si tu as une div "conteneur" et que tu lui met une hauteur fixe en px par exemple, ensuite tu lui met un background de couleur
lorsque tu vas ajouter une div dedans, si tu ne met pas de background à cette div, tu ne saura pas quelle hauteur elle fait
tu ne verra que le contenu qui la remplie
donc pourquoi vouloir que 2 div est la même hauteur ?
on ne rempli pas une page avec du vide
si tu met suffisamment de contenu dans ta page, sa hauteur sera au moins égale à la hauteur du navigateur et même plus
donc tu n'a pas à te soucier de la hauteur de la div
c'est pour ça que l'attribut height ne fonctionne pas en %
tu peux imposer une certaine hauteur à une div en px mais le but c'est de t'aligner sur le navigateur ou plutot sur la résolution de l'écran
il te suffit donc de mettre par exemple height:700px pour les 2 div
après tu modifies en fonction du header et du bas de page
autre question pour quoi tes 2 div que tu veux mettre de même hauteur sont imbriquées l'une dans l'autre ?
logiquement on fait 2 div de même hauteur et on leur met un float:left à toutes les 2, comme ça elles se retrouve cote à cote
non ?
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
|
|
dans cette image je ne vois pas "2 div (colonnes) de même hauteur"
ici la solution simple c'est de ne pas s'occuper de la hauteur, ni de celle du conteneur ni de celles des div
les colonnes prendront la hauteur de leurs contenus (texte ou image) *
si tu veux une hauteur fixe tu met le conteneur en px
par contre si tu veux à tout prix que le conteneur remplisse la page en hauteur (celle du navigateur) il faut utiliser la méthode (complexe) des position:relative
pour la div en bas à gauche : il suffit comme je te l'ai dis, de faire une div (qui contiendra l'image) avec un bottom:0 et tu place cette div dans la div "ici pas grand chose"
donc ça te fera :
<div "pas grand chose"><div "de l'image">image</div></div>
la div "de l'image" est en bottom:0
donc elle vient se coller en bas de la div "pas grand chose"
sinon pour un systeme complet avec du relatif, il me semble que c'est expliqué ici (je n'ai pas tout relu)
http://www.alsacreations.com/tuto/lire/564-Design-XHTML-CSS-complet-avec-2-co(...)
- - -
* la logique c'est que c'est le contenu qui remplit la page, ça m'étonnerai que tu n'ai rien à dire ou à montrer, donc si tu écris suffisament de bla bla pour que ça dépasse 770 px de haut tu obtiens obligatoirement un "remplissage" de l'écran (celui de 1024x768)
ceux qui ont un écran plus haut verront la bordure (background)
si une de tes pages est moins remplie que les autres tu met un min:height
ou une image de fond qui fasse une certaine hauteur (par exemple 770px) !
si tu ne veux qu'une couleur (blanc ou autre) tu fais une image de couleur !
-->Message édité par polov le 12/02/2009 21:40:19<--
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
j'ai essayé avec Bottom:0
l'idée me paraissait très bonne mais je dois pétouiller quelque part car ça ne marche pas.
vais refaire d'autres tests
|
|
|
|
|
ok si tu veux me donner ton code, en MP
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
Bonsoir,
Le canard est-il toujours vivant ?
|
|
|
|
|
|
|
moi j'veux bien, mais jamais le soir (le café) 
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
 une petite infusion alors
|
|
|
|
|
poum a écrit :
rien compris au canard mais au cas où ...
Ah, c'est une vieille histoire de Robert Lamoureux dont le père tente en vain de trucider un canard. Bref, c'est le symbole d'une histoire qui n'est pas terminée... http://www.greatsong.net/PAROLES-ROBERT-LAMOUREUX,LA-CHASSE-AU-CANARD,1008573(...)
|
|
|
|
|
mdr, je ne connaissais pas, je bien rigolé sur ce coup
Or donc, il est toujours vivant, je lui donne des navets en attendant les chasseurs
-->Message édité par poum le 17/02/2009 23:59:24<--
|
|
|
|
|
poum a écrit :
Or donc, il est toujours vivant, je lui donne des navets en attendant les chasseurs
Bon, je ne sais plus très bien où en est...
Faire deux colonnes ayant pour hauteur celle de la plus haute, j'ai trouvé une solution à base de -32767px (ou moins...) qui fonctionne avec FF, Safari, Opera, Chrome et presque avec IE6 (pb avec le footer, mais c'est sûrement réparable). Yapuka faire un copier/coller pour voir
En revanche, mettre l'image en bas dans la colonne gauche, je sèche.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Faire descendre deux colonnes au même niveau</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.625em;
}
#header { background: LightSeaGreen ; }
div#container { overflow: hidden; background: OliveDrab ; }
div.col {
float:left; width: 50%;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#footer { clear: both; float: right; background: MediumSeaGreen ;
width: 100%; margin:0; padding:0; height: 16px; }
h1 { font-size: 2em; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Deux colonnes de hauteur auto-fixée, à base de -32767px</h1>
</div>
<div class="col" style='background: lightgreen; '>
<p style="font-weight: bold;">Colonne 1</p>
<br/>Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.
<p style='text-align: center; font-weight: bold; '>--- Fin colonne 1---</p>
</div>
<div class="col" style='background: YellowGreen; '>
<p style=" font-weight: bold;">Colonne 2</p>
<br/>Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.
<br/>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.
<p style='text-align: center; font-weight: bold; '>--- Fin colonne 2---</p>
</div>
<div id="footer">
<p style="text-align: right; font-size: 1em; margin: 0 10px 0 0; padding: 0;">⊕ 18 février 2009 ⊕</p>
</div>
</div>
</body>
</html>
|
|
|
|
|
c'est marrant ça fonctionne ce 32767px !
en tout cas sous Firefox - mais pas sous IE 7
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
je viens de décortiquer ce ... heuuu comment dire ? ce code
C'est assez fou, je ne comprends toujours pas
tout vient de :
padding-bottom: xx px;
margin-bottom: -xx px;
l'un compensant l'autre.
Tu sors ça d'où Telliak ? faut être tordu pour trouver un truc pareil. le pire est que ça fonctionne
Il est aussi vrai que sous le contenu des colonne, hormis le fond rien ne peut être affiché. Ce qui entre-nous est logique
Donc, pas d'image sauf en forçant la main avec des /br (en ajoutant du contenu)
Donc, retour à la case départ
|
|
|
|
|
ça doit etre une différence infinitésimale entre la traduction du padding et du margin par le navigateur
ça semble fonctionner avec ça aussi
padding-bottom: 300px;
margin-bottom: -300px;
sauf peut etre sur une page très haute, faut tester
en fait le footer fonctionne très bien !
c'est parce que dedans le code il y a un caractère qui n'est pas ANSI ou UTF
⊕
il suffit de le supprimer
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
poum a écrit :
Tu sors ça d'où Telliak ? faut être tordu pour trouver un truc pareil. le pire est que ça fonctionne
Bonsoir,
Eh, je sors ça du web. En fait la valeur de 32767 n'a aucune importance, il faut seulement qu'elle soit supérieure à la hauteur de la colonne la plus haute et identique pour padding et margin.
Il n'y a aucune magie, ni différence infinitésimale, il suffit de savoir ce que définit la norme et donc comment fonctionnent les navigateurs, et là je ne vous expliquerai pas...
C'est du même style que left: 50%; margin-left: -400px; width: 800px; pour centrer une page quelle que soit la définition de l'écran.
|
|
|
|
|
|
|
poum a écrit :
et dire que pour mon problème je pourrais tout simplement utiliser un tableau à deux colonnes
des fois c'est à se demander s'il ne faut pas ressortir les vielles bonnes méthodes
Ouais, il ne faut pas le dire, mais cela fait un sacré bout de temps que je cherchais à avoir deux colonnes d'égale hauteur et, lassé, j'ai mis un chti tableau de deux colonnes : quel confort !
Ceci dit cela ne règlerait pas ton histoire d'image à mettre en bas, si ?
Le pb, c'est que chercher les solutions techniques c'est bien beau, mais pendant ce temps-là le contenu n'avance pas .
|
|
|
|
|
très concrètement pour mon site ça été des BR pour faire du faux contenu.
mais, je tenais à trouver une solution propre car je suis persuadé qu'elle existe mais comment
|
|
Weapon... I have it ALL !!!
|
|
|
Salut,
Mouais, plein de blahblah pour rien !
Quand tu veux réaligner une boite avec les autres, tu dois faire un :
<div class="spacer"></div> (je te laisse tester ou il faut le mettre pour ton cas)
Et dans le css, tu mets ceci :
.spacer{clear:both;}
C'est pas plus compliquer que ça !
a+
|
|
|
|
|
?
vais continuer un peu les bal bla inutiles car ClearBoth ne va pas arranger mon "problème".
Ca arrête un flux mais n'aligne rien par rapport à quoi que ce soit.
Ou alors, un détail m'échappe, tu peux être plus précis car je ne vois pas.
-->Message édité par poum le 27/02/2009 10:21:54<--
|
|
|
|
|
une solution :
pour ton image si tu veux quelle se colle tout en bas
tu l'a mets en position:absolute
soit le style avec l'image
<img style="position:absolute; bottom:0;" src="image.jpg" alt="" width="100" height="100">
soit le style avec la div
<div style="position:absolute; bottom:0;"><img src="image.jpg" alt="" width="100" height="100"></div>
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
|
|
polov a écrit :
une solution :
pour ton image si tu veux quelle se colle tout en bas
Ca tombe bien
Aujourd'hui même j'ai eu (encore) ce soucis.
Je ferais des tests lundi
|
|
|
|
|
webjfr a écrit :
Salut,
 Mouais, plein de blahblah pour rien !
...
C'est pas plus compliquer que ça !
a+
Euh... toujours se méfier des appréciations trop rapides
|
|
|
|
|
polov a écrit :
une solution :
pour ton image si tu veux quelle se colle tout en bas
tu l'a mets en position:absolute
<img style="position:absolute; bottom:0;" src="image.jpg" alt="" width="100" height="100">
Re,
Pas mal
|
|
|
|
|
Or donc, un WE plus tard
J'ai fais des tests.
Le coup pour les DIVs, ça a marché nickel (ça, ont avait déjà testé)
en revanche, sur une DIV avec ces margin et paddind exotique, le "style" de Polov n'a décalé l'image qu'en partie sans pour autant la coller en bas de la DIV.
Comme d'hab' et à mon grand regret, j'ai mis quelques <BR /> sur la tête pour la faire descendre (j'en suis pas fière je l'avoue)
Snif
|
|
|
|
|
|
...le "style" de Polov n'a décalé l'image qu'en partie sans pour autant la coller en bas de la DIV.
c'est qu'il faut peut etre ajouter un margin:0 à la div aussi
ou un padding:0
tout dépend comment est configurée la div qui doit contenir l'image
-------
Mon site Photoshoplus , plus de 3000 tutoriels pour Photoshop + des milliers de ressources gratuites !
Nouveau : + de 35 000 formes (brushes) à télécharger!
|
|
|
1
|
faudra que je le test et note celui là. 
