Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP 3 colonnes de même taille sans casser les autres caractéristiques

3 colonnes de même taille sans casser les autres caractéristiques

18 réponses
Avatar
Yohan N. Leder
Bonjour,

Je tente de construire un site au design fluide, comme beaucoup, et me
heurte à un problème. Voici les caractéristiques que le site doit
remplir :

1) Ni bordure ni ascenseur si le site se trouve dans une iframe ou un
<object>
2) Layout 3 colonnes avec celle du milieu qui s'adapte automatiquement
en largeur
3) Largeur minimum afin que les éléments du header restent organisés
horizontalement
4) Que les colonnes les plus courtes s'adaptent automatiquement à la
longueur de la plus longue

J'ai résolu les trois premiers points, mais ne réussis pas concernant le
dernier, malgré la lecture de plusieurs voies possibles, dont la
technique des fausses colonnes containers et celle du height:100% sur
les div.

J'ai mis ici une page test de ce que j'ai pour l'instant :
http://yohannl.tripod.com/3col/index.htm (merci d'ignorer les bannières
publicitaires en haut et en bas qui sont dues à cet hébergeur gratuit
que je n'utilise que pour faire quelques tests)

Avez-vous une idée pour ce point #4 qui fonctionnerait sans casser les
points #1, #2 et #3 résolus ?
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Yohan N. Leder
In article <47eab857$0$859$,
says...
J'ai fini par le faire, je t'envoie les scripts de tripod balancés dans
le body :
<http://cjoint.com/?dAuUqxI2NK>
(comment veux-tu démontrer quoi que ce soit dans ces conditions)




Bon, j'ai un peu avancé avec technique du height:100% et finalement
ouvert un autre compte chez des gens qui sans pub : parce que je
souconne que le code résultant après ton nettoyage n'ai rien à voir avec
le mien originel.

Alors, voilo, c'est là : http://yleder.freehostia.com/3cols/

A ce stade, la longueur des colonnes de gauches et droites (pas fait
pour le centre car fond blanc de toute façon) s'allonges bien jusqu'en
bas de page (j'ai mis un fond rouge pour visualiser ça). Le problème est
que maintenant, elles s'allongent trop (surement car le height:100%
prend comme référence la hauteur de l'aire cliente du navigateur).

Donc, question : comment faiore qu'elles s'allonge, mais juste ce qu'il
faut pour rejoindre la longueur de celle qui a le contenu le plus long,
pas plus ?
Avatar
Yohan N. Leder
In article <47eaed4e$0$23393$,
says...

Et comme il y a toujours des visiteurs en rtc, ils le sentent bien.




Ha, ça je sais bien, j'ai des clients à l'étranger en 56K que je prend
en contrôle à distance :-(
Avatar
SAM
Yohan N. Leder a écrit :

Bon, j'ai un peu avancé avec technique du height:100% et finalement
ouvert un autre compte chez des gens qui sans pub : parce que je
souconne que le code résultant après ton nettoyage n'ai rien à voir avec
le mien originel.



J'ai juste auto-fermé les balises qu'il fallait (si je n'en ai pas
oubliée(s)) et mis des P où mon soft les réclamait, mais il est
peut-être un peu pointilleux à ce sujet (m'étonnerait mais qui sait ?)
J'ai aussi mis le footer à sa place
Ha! et aussi supprimé le html { blabla }


Alors, voilo, c'est là : http://yleder.freehostia.com/3cols/



Heu ... pas au top, hein ?
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like XHTML 1.0 Transitional

Essaie d'être en relation entre doctype et code.
(balises auto-fermantes semblent requises)

Et puis pourquoi le XHTML ?
Qui est essssstrémement contraignant.

Revoir quand IE passe en quirksmode
(savoir si c'est un atout ou une plaie ?)

En tous cas ce n'est pas le fichier revu que j'avais donné :-(
line 48 column 1 - Avertissement: missing </div>


A ce stade, la longueur des colonnes de gauches et droites (pas fait
pour le centre car fond blanc de toute façon) s'allonges bien jusqu'en
bas de page (j'ai mis un fond rouge pour visualiser ça).



Nan j'ai pô ça ... !
y a rien qui s'allonge si ce n'est le blanc

Le problème est



Le problème est qu'il manque une balise div de fermeture

que maintenant, elles s'allongent trop (surement car le height:100%
prend comme référence la hauteur de l'aire cliente du navigateur).



Avec un logiciel respectueux le % s'applique relativement au 1er
conteneur rencontré qui soit positionné.
(si j'ai bien compris les recommandations css.2).
C'est ce qu'a l'air de faire Fx.
Pour IE ... de ttes façons ses réactions me restent un mystère très
obscur ... :-(
Normalement, le content je l'avais mis en relative.

Le pavé du milieu est ce qu'il y a de plus normal (avec marges de chaque
coté pour laisser la place aux 2 colonnes.
C'est lui qui, en s'allongeant allonge le conteneur.
De le mettre à height: 100% n'a donc pas de sens, car le régle à la
taille de son conteneur parent, hors ce dernier est élastique ...!

Reste à traiter les 2 colonnes pour qu'elles puissent aussi bloquer,
régler, le conteneur.
Avec : overflow: auto; height: 100%
elles s'allongent avec le conteneur
et en hauteur réduite : hop! ascenseurs.

Enfin ... ça c'est pour Firefox et autres non-IE ...

Donc, question : comment faiore qu'elles s'allonge, mais juste ce qu'il
faut pour rejoindre la longueur de celle qui a le contenu le plus long,
pas plus ?



J'en sais rien vu que je n'ai pas vu d'allongement.

Et puis il n'y a aucune indentation dans le fichier ... pas fastoche de
voir où sont les imbrications de divs.

Néanmoins je vois que tu as remis le 'footer' dans le 'content'
pourquoi ?
Alors que le 'header' n'y est pas.


--
sm
Avatar
Laurent vilday
SAM a écrit :
Yohan N. Leder a écrit :

Alors, voilo, c'est là : http://yleder.freehostia.com/3cols/



Heu ... pas au top, hein ?
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like XHTML 1.0 Transitional



Tiens, ça sent le déjà vu.

Essaie d'être en relation entre doctype et code.
(balises auto-fermantes semblent requises)

Et puis pourquoi le XHTML ?
Qui est essssstrémement contraignant.



Et surtout, je le dirais jamais assez, inutile pour la majorité des
utilisations qui en sont faites sur le web "public". En attendant HTML5,
il faut s'en remettre à HTML4.01 Strict pour les fous et HTML4.01
Transitional pour les autres :p

Revoir quand IE passe en quirksmode
(savoir si c'est un atout ou une plaie ?)



LOL. Trop de trolls possible en une phrase :)

A ce stade, la longueur des colonnes de gauches et droites (pas fait
pour le centre car fond blanc de toute façon) s'allonges bien jusqu'en
bas de page (j'ai mis un fond rouge pour visualiser ça).



Nan j'ai pô ça ... !
y a rien qui s'allonge si ce n'est le blanc



Pareil. D'un autre côté aujourd'hui mon navigateur est environ en
1400x800, c'est pas prévu. Mais en 1280x1024 comme préconisé sur le
document, ça s'allon

Le problème est



Le problème est qu'il manque une balise div de fermeture

que maintenant, elles s'allongent trop (surement car le height:100%
prend comme référence la hauteur de l'aire cliente du navigateur).



Avec un logiciel respectueux le % s'applique relativement au 1er
conteneur rencontré qui soit positionné.
(si j'ai bien compris les recommandations css.2).



Ca me semble plus flou que ça dans la réalité des implémentations (pour
peu qu'on considère que ce soit clair dans les recommandations).

D'autant que le modèle des boites CSS2 est pas très sympa avec les
tailles en pourcentages puisque :
taille réelle = padding + border + taille exprimée en %
Hors dans le cas d'un 100% du parent, on se retrouve avec tailles trop
grandes.

Donc avec une taille à 100% (ou autre %, et à plus forte raison une
height qui n'a pas réellement été pensée dans les specs IMO) pour peu
qu'on ait des padding et/ou des bordures, bonjour les effets de bords et
autres scrollbars.

--
laurent
Avatar
Laurent vilday
Laurent vilday a écrit :
Pareil. D'un autre côté aujourd'hui mon navigateur est environ en
1400x800, c'est pas prévu. Mais en 1280x1024 comme préconisé sur le
document, ça s'allon



Oops, manque la fin de la phrase. Pfft.

... sur le document, ça s'allonge pas plus.

--
laurent
Avatar
Yohan N. Leder
In article <47eb86d9$0$889$,
says...
Heu ... pas au top, hein ?
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like XHTML 1.0 Transitional



A priori, j'ai suivi ça :

Choisir sa DTD, version pour lecteurs pressés
(http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-
choisir)

Utilisez de préférence XHTML1.0 Strict : c?est a priori la plus adaptée
à vos besoins et c?est la plus facile à utiliser et à apprendre.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si vous utilisez des iframe ou un attribut target, Utilisez XHTML1.0
transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

si vous voulez utiliser les frameset et frame : utilisez la DTD XHTML1.0
frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Ou, respectivement, les trois anciens en standard HTML plutôt que XHTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

Mais, bon, j'ai donc switché sur
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Et ça ne change rien chez moi.

En tous cas ce n'est pas le fichier revu que j'avais donné :-(
line 48 column 1 - Avertissement: missing </div>



Désolé, mais y a pas ça chez moi. Test écrit sous WebExpert 6 et la
vérification de syntaxe ne donne pas d'erreur.

Quel <div> ne serait pas fermé, précisément ?

> A ce stade, la longueur des colonnes de gauches et droites (pas fait
> pour le centre car fond blanc de toute façon) s'allonges bien jusqu'en
> bas de page (j'ai mis un fond rouge pour visualiser ça).

Nan j'ai pô ça ... !
y a rien qui s'allonge si ce n'est le blanc



OK ! Alors, j'ai peut-être été un peu rapide ici, car, pour moi, ça
s'allonge dans IE
(http://img521.imageshack.us/img521/8128/3colsie6xj6.gif), mais pas dans
Firefox (http://img256.imageshack.us/img256/9584/3colsffbx7.gif).

Avec un logiciel respectueux le % s'applique relativement au 1er
conteneur rencontré qui soit positionné.
(si j'ai bien compris les recommandations css.2).
C'est ce qu'a l'air de faire Fx.
Pour IE ... de ttes façons ses réactions me restent un mystère très
obscur ... :-(



Et c'est bien ça la merda : le plus utilisé par mes visiteurs (IE6/7)
n'est pas un modèle du genre :-(

Normalement, le content je l'avais mis en relative.

Le pavé du milieu est ce qu'il y a de plus normal (avec marges de chaque
coté pour laisser la place aux 2 colonnes.
C'est lui qui, en s'allongeant allonge le conteneur.
De le mettre à height: 100% n'a donc pas de sens, car le régle à la
taille de son conteneur parent, hors ce dernier est élastique ...!



Nous sommes d'accord et c'est pour ça que je n'ai pas mis de height:100%
sur .middlecol, mais uniquement sur

body, div#content, div#content .leftcol, div#content .rightcol {height:
100%}

Par contre, il est probable que ce qui coince soit les trois (quatre à
l'origine, mais j'en ai désactivé un temporairement) div containers :

.container {min-width: 770px; width: auto}
.container-minwidth-IE {padding-left: 770px}
.container-container-IE {margin-left: -770px; position: relative}

Ces container servant à que le layout ne dépasse pas une certaine
largeur afin d'éviter que les deux images en haut à droite ne passent
sous la bannière d'entête en haut à gauche.

Reste à traiter les 2 colonnes pour qu'elles puissent aussi bloquer,
régler, le conteneur.
Avec : overflow: auto; height: 100%
elles s'allongent avec le conteneur
et en hauteur réduite : hop! ascenseurs.



Non non, je ne veux pas d'ascenseur.

Et puis il n'y a aucune indentation dans le fichier ... pas fastoche de
voir où sont les imbrications de divs.



J'ai ajouté des indentations.

Néanmoins je vois que tu as remis le 'footer' dans le 'content'
pourquoi ?
Alors que le 'header' n'y est pas.



Non non, le footer n'est pas dans le div content.


Même joueur joue encore : http://yleder.freehostia.com/3cols/
Avatar
Yohan N. Leder
In article <47eb9963$0$20478$,
says...
Et surtout, je le dirais jamais assez, inutile pour la majorité des
utilisations qui en sont faites sur le web "public". En attendant HTML5,
il faut s'en remettre à HTML4.01 Strict pour les fous et HTML4.01
Transitional pour les autres :p



OK, c'est fixé en HTML4.01 Transitional, mais ça ne change rien ici.

>> A ce stade, la longueur des colonnes de gauches et droites (pas fait
>> pour le centre car fond blanc de toute façon) s'allonges bien jusqu'en
>> bas de page (j'ai mis un fond rouge pour visualiser ça).
>
> Nan j'ai pô ça ... !
> y a rien qui s'allonge si ce n'est le blanc



Oui, comme vu après message SAM, c'est uniquement sous IE et rien sous
FF : un truc de fou !
Avatar
Yohan N. Leder
In article ,
says...

Bon, évolution :


1) Tout d'abord, j'ai lourdé la ligne ci-dessous qui servait à la
gestion du site en iframe, mais bon, pas utile dans l'immédiat et moins
important que l'histoire de colonnes fluides en vertical.

html, body {overflow-x: hidden; padding: 0; margin: 0; border: none}


2) J'ai temporairement supprimé (commenté) les 4 containers qui servent
à la gestion de la largeur minimale du layout. Je devrais par contre les
remettre plus tard.

.container {min-width: 770px; width: auto}
.container-minwidth-IE {padding-left: 770px}
.container-container-IE {margin-left: -770px; position: relative}
.container-minwidth-IE, * html .container-container-IE, * html
.container-layout-IE {height: 1px}

3) J'ai ajouté un "position: absolute" au div#content que le height:100%
ait une bonne référence. Par contre, je n'ai indiqué aucun top ou left.

#content {width: 98%; margin: 20px 0 20px 0; font: 10pt; text-align:
justify; position: absolute}

Bien, à ce stade, ça marche donc sous Firefox comme ce que j'avais dans
IE : les colonnes de gauche et droite s'allongent, mais trop !

Testé aussi sous Opera : idem (s'allongent, mais trop longues)

Voyez-vous la même chose : http://yleder.freehostia.com/3cols/ ?
1 2