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 ?

Yohan N. Leder a écrit :
> 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>

Là je comprends pas ... pourquoi iframe ou object ?
Tu parles des bordures et ascenseurs de l'iframe ?

Et c'est estimer que jamais personne ne se sert des fonctions de zoom
des caractères.

> 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.

Ça a l'air un poil plus compliqué que ça :
<http://positioniseverything.net/articles/onetruelayout/equalheight>
démo :
<http://positioniseverything.net/articles/onetruelayout/example/equalheight>

> 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)

ben! tu devrais vraiment mettre ton test ailleurs paske là ça met
vraiment le boxon quand on réduit la fenêtre.
la pub qui passe par dessus étoussa, des cadres vides ...
à propos, quand je réduis la fenêtre j'ai bien un ascenseur dans la page
(dû au boxon ? je sais pas)

Pourquoi pas cJoint ?
<http://cjoint.com/>

> Avez-vous une idée pour ce point #4 qui fonctionnerait sans casser les
> points #1, #2 et #3 résolus ?

Non le point 4 je sais pas faire sauf à imbriquer les divs des colonnes,
et encore ... il faut être certain que l'une de celles centre et droite
sera toujours la + longue.
Le mieux est de s'en passer car la feuille de style tordue proposée faut
vraiment s'y pencher.

--
sm

In article <47e45f0a$0$882$ba4acef3@news.orange.fr>,
stephanemoriaux.NoAdmin@wanadoo.fr.invalid says...
> Là je comprends pas ... pourquoi iframe ou object ?
> Tu parles des bordures et ascenseurs de l'iframe ?

Oui, c'est une particularité du projet et c'est géré par le
"html, body {overflow-x: hidden; overflow-y: auto; border: none}". Mais,
je n'ai pas de problème avec, ça, c'est fait.

> Et c'est estimer que jamais personne ne se sert des fonctions de zoom
> des caractères.

Effectivement, mais un sujet à la fois stp, ma question du topic est
"comment réaliser le point #4.

> Ça a l'air un poil plus compliqué que ça :
> <http://positioniseverything.net/articles/onetruelayout/equalheight>
> démo :
> <http://positioniseverything.net/articles/onetruelayout/example/equalheight>

Je ne connaissait pas cette méthode : j'irai lire posément.

Sinon, pour les deux méthodes que je cite (qui fonctionnent très bien
sur un site simple), j'ai lu et essayé (fausse cols et height:100%) et
cela ne fonctionne pas, certainement à cause de mes autres contraintes,
d'où ma question.

> ben! tu devrais vraiment mettre ton test ailleurs paske là ça met
> vraiment le boxon quand on réduit la fenêtre.
> la pub qui passe par dessus étoussa, des cadres vides ...
> à propos, quand je réduis la fenêtre j'ai bien un ascenseur dans la page
> (dû au boxon ? je sais pas)

Houlà, quel navigateur utilises-tu s'il te plaît ? Ca m'intéresse de
savoir, parce que moi, ici, je viens de regarder en 800x600 et moins
avec IE6 et Firefox2 et, il y a juste le bandeau publicitaire du bas qui
se superpose avec Firefox (pas ds IE), c'est tout. La pub du haut reste
bien à sa place, je ne vois pas de cadre vide et il n'y a pas
d'ascenseur nulle part.

> Pourquoi pas cJoint ?
> <http://cjoint.com/>

Pour joindre un fichier, tu veux dire ? Quel fichier... M'enfin, sinon,
oui, je peux certainement trouver un hébergeur gratuit sans pub, mais,
dans la mesure où l'affichage était quasi correct chez moi et, en tout
cas, suffisant pour exprimer la question, je n'ai pas cherché plus loin.

> Non le point 4 je sais pas faire sauf à imbriquer les divs des colonnes,
> et encore ... il faut être certain que l'une de celles centre et droite
> sera toujours la + longue.

Non, je ne peux pas garantir ça.

> Le mieux est de s'en passer car la feuille de style tordue proposée faut
> vraiment s'y pencher.

Mais je m'y suis penché (même si toi tu l'a découvres) et il ne me reste
que le point #4 à résoudre...

Merci pour ton intervention qui a au moins le mérite d'en être une.

Yohan N. Leder a écrit :
>
> Sinon, pour les deux méthodes que je cite (qui fonctionnent très bien
> sur un site simple), j'ai lu et essayé (fausse cols et height:100%) et
> cela ne fonctionne pas,

Je ne connais pas les fausses cols mais le height:100% je ne l'ai jamais
vu fonctionner (relativement à une boite qui s'allonge à cause d'autre
chose)

> certainement à cause de mes autres contraintes, d'où ma question.

Ha? tu veux qu'on se penche sur le html de ta maquette et sa feuille de
styles, puis sur les méthodes évoquées pour la corriger suivant ces
méthodes ?

>> tu devrais vraiment mettre ton test ailleurs paske là ça met
>> vraiment le boxon quand on réduit la fenêtre.
>> la pub qui passe par dessus étoussa, des cadres vides ...
>> à propos, quand je réduis la fenêtre j'ai bien un ascenseur dans la page
>> (dû au boxon ? je sais pas)
>
> Houlà, quel navigateur utilises-tu s'il te plaît ?

N'importe lequel (firefox ?).
Comme tu parlais de réduction j'ai réduit.
Rare les fois où j'affiche en si grand que 800/600
(que si obligé)

> parce que moi, ici, je viens de regarder en 800x600 et moins
> avec IE6 et Firefox2 et, il y a juste le bandeau publicitaire du bas qui
> se superpose avec Firefox (pas ds IE),

oui et il m'a semblé qu'un cadre pâle se glissait sous cette pub, le
reste du texte de la page étant repoussé dessous.

>> Pourquoi pas cJoint ?
>> <http://cjoint.com/>
>
> Pour joindre un fichier, tu veux dire ? Quel fichier...

ben ... truc-bidule.html
C'est une maquette sans image, non ?
alors ce devrait être bon.
cJoint capte ton fichier, le stoque (15 jours) et te donne une url pour
aller le voir.
(penser à intégrer la feuille de style dans le fichier html)

>> Le mieux est de s'en passer car la feuille de style tordue proposée faut
>> vraiment s'y pencher.
>
> Mais je m'y suis penché (même si toi tu l'a découvres) et il ne me reste
> que le point #4 à résoudre...

Je te parlais de celle donnée en lien la dernière fois.
<http://positioniseverything.net/articles/onetruelayout/equalheight>
Pas de la tienne.
(je ne l'ai pas regardée, un peu énervé de ces pubs)

Tu peux aussi fouiller Alsacreation qui doit aborder la question.

--
sm

In article <47e56435$0$852$ba4acef3@news.orange.fr>,
stephanemoriaux.NoAdmin@wanadoo.fr.invalid says...
> Je ne connais pas les fausses cols

Il s'agit de simuler l'aspect de colonnes via image en background du
body ou d'un div container. Vu a plusieurs reprise à droite à gauche,
mais je trouve ça assez rigide.

> mais le height:100% je ne l'ai jamais
> vu fonctionner (relativement à une boite qui s'allonge à cause d'autre
> chose)

A priori, à ce que j'ai vu, ça marche mais reste fragile (facilement
cassé si on n'y prend grade durant l'évolution du site)

> Ha? tu veux qu'on se penche sur le html de ta maquette et sa feuille de
> styles, puis sur les méthodes évoquées pour la corriger suivant ces
> méthodes ?

Hahaha, non merci, il y a autant de méthodologie que de personnes, si
compétentes soient-elles.

> > Houlà, quel navigateur utilises-tu s'il te plaît ?
>
> N'importe lequel (firefox ?).

Tu ne peux pas dire "n'importe lequel" dans la mesure où chaque
navigateur donne un rendu différent.

> Comme tu parlais de réduction j'ai réduit.
> Rare les fois où j'affiche en si grand que 800/600
> (que si obligé)

Comment peux-tu naviguer en moins de 800x600 confortablement aujourd'hui
: je suis perplexe !

> oui et il m'a semblé qu'un cadre pâle se glissait sous cette pub, le
> reste du texte de la page étant repoussé dessous.

Bizarre, avec IE et Firefox, chez moi j'ai la même chose mais sans que
le texte soit repoussé : il est juste en dessous sur le plan du z-index.

> >> Pourquoi pas cJoint ?
> >> <http://cjoint.com/>
> >
> > Pour joindre un fichier, tu veux dire ? Quel fichier...
>
> ben ... truc-bidule.html
> C'est une maquette sans image, non ?
> alors ce devrait être bon.

Holà, tu n'as pas du tout vu ma page test alors : il y a des images.

> cJoint capte ton fichier, le stoque (15 jours) et te donne une url pour
> aller le voir.

Oui, je sais bien ça, mais je ne comprenais pas pourquoi et comment tu
voulais que je joigne html et image en un fichier.

> (penser à intégrer la feuille de style dans le fichier html)

Hum, tu n'as effectivement pas vu ma page test, car le CSS est bien
incorporé à la page html.

> Je te parlais de celle donnée en lien la dernière fois.
> <http://positioniseverything.net/articles/onetruelayout/equalheight>
> Pas de la tienne.

Dac !

> (je ne l'ai pas regardée, un peu énervé de ces pubs)

Désolé, mais si tu savais, moi, le nombre de choses qui m'énervent dans
ce monde superficiel


> Tu peux aussi fouiller Alsacreation qui doit aborder la question.

J'ai déjà un peu fouillé et déjà un tas d'url à approfondir :
heureusement, le projet derrière tout ça n'est pas urgent... Ca devrait
le faire

Merci à toi et détend toi sur les pubs : tv, radio, routes, trottoir,
métro, on est cerné. lol

Yohan N. Leder a écrit :
> In article <47e56435$0$852$ba4acef3@news.orange.fr>,
> stephanemoriaux.NoAdmin@wanadoo.fr.invalid says...
>
>> Rare les fois où j'affiche en si grand que 800/600
>> (que si obligé)
>
> Comment peux-tu naviguer en moins de 800x600 confortablement aujourd'hui
> : je suis perplexe !

En 800 ou même un peu moins de large c'est impec : on évite toutes les
pubs de la colonne de droite, les flashy-machins et ce genre de choses
placées là pour distraire du contenu.

> Holà, tu n'as pas du tout vu ma page test alors : il y a des images.

et comment sais-je lesquelles sont les tiennes ?
Je crois avoir repérée celle du haut qui n'a pas grd interet et est
remplaçable par un simple div.

>> (penser à intégrer la feuille de style dans le fichier html)
>
> Hum, tu n'as effectivement pas vu ma page test, car le CSS est bien
> incorporé à la page html.

Je pense avoir finalement regardé-survolé.
J'aurais dû la rapatrier et la nettoyer des bups pour commencer à y voir
vraiment.

Comme tu disais : les CSS il a tant de façons de les aborder.


> Merci à toi et détend toi sur les pubs : tv, radio, routes, trottoir,
> métro, on est cerné. lol

Par ici ça va dans l'ensemble : pas de métro, la radio n'est pas
beaucoup usée non plus que la tv, reste la presse ;-)

--
sm

Il se trouve que Yohan N. Leder a formulé :

>> Comme tu parlais de réduction j'ai réduit.
>> Rare les fois où j'affiche en si grand que 800/600
>> (que si obligé)
>
> Comment peux-tu naviguer en moins de 800x600 confortablement aujourd'hui

Eh bien, il faut tenir compte des petits formats ! Aujourd'hui
l'informatique minuscule arrive !

Je ne parle même pas des téléphones et PDA, mais avez-vous pensé aux
machines de style EEPC, avec un écran de 9" ? Elles semblent avoir de
l'avenir !

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org

In article <47e836a5$0$879$ba4acef3@news.orange.fr>,
stephanemoriaux.NoAdmin@wanadoo.fr.invalid says...
> En 800 ou même un peu moins de large c'est impec : on évite toutes les
> pubs de la colonne de droite, les flashy-machins et ce genre de choses
> placées là pour distraire du contenu.

Toi, tu fais parti du village Gaulois qui résiste, hum ?

> et comment sais-je lesquelles sont les tiennes ?
> Je crois avoir repérée celle du haut qui n'a pas grd interet et est
> remplaçable par un simple div.

Non non, en haut, ce qui est à moi est l'image à gauche avec des flèches
(mise en background d'un div) et les deux images à droite marquées 1 et
2 (dans des div en float right). Il y a donc trois images avec les deux
de droite qui adaptent leurs positions selon la largeur de la zone
cliente du navigateur. Un simple div ne pourrait pas faire ça.

> J'aurais dû la rapatrier et la nettoyer des bups pour commencer à y voir
> vraiment.

Oui, là, tu exagères

> Par ici ça va dans l'ensemble : pas de métro, la radio n'est pas
> beaucoup usée non plus que la tv, reste la presse ;-)

Et quand tu mets les doigts dans la presse, ça fait mal

In article <mn.c9f47d832fbd222f.9866@serge.delbono.net.invali d>,
laposte@serge.delbono.net.invalid says...
> Eh bien, il faut tenir compte des petits formats ! Aujourd'hui
> l'informatique minuscule arrive !
>
> Je ne parle même pas des téléphones et PDA, mais avez-vous pensé aux
> machines de style EEPC, avec un écran de 9" ? Elles semblent avoir de
> l'avenir !

Dans ce cas et en imaginat que mon public s'équipe de la sorte, je
préfère gérer une seconde version de site uniquement pour ça... Car
parralèlement à la miniaturisation, les écrans moyens chez les gens et
en entreprise sont de plus en plus grands... Et d'ailleurs les pages de
plus en plus lourdes (il y a 10 ans, on criait au scandale quand on
dépassait 50Ko, maintenant, celles qui dépassent 300Ko sont légion)

Enfin, le site OK en 9" comme en 1280x1024 et plus n'est pas encore né

Yohan N. Leder a écrit :
> In article <47e836a5$0$879$ba4acef3@news.orange.fr>,
> stephanemoriaux.NoAdmin@wanadoo.fr.invalid says...
>
> Toi, tu fais parti du village Gaulois qui résiste, hum ?

Oui, oui, dans un village. En Gaule ? y a des chances.

>> et comment sais-je lesquelles sont les tiennes ?
>> Je crois avoir repérée celle du haut qui n'a pas grd interet et est
>> remplaçable par un simple div.
>
> Non non, en haut, ce qui est à moi est l'image à gauche avec des flèches

c'est bien ce dont à laquelle j'allusionne.

> Un simple div ne pourrait pas faire ça.

Ben ... pour une démo, la déco on s'en moque et les images n'ont aucun
intéret d'autant qu'elles ne participent pas à la mise en forme
générale: en fond ou dans un flottant (y avait qu'à calibrer le
flottant) mébon.

>> J'aurais dû la rapatrier et la nettoyer des bups pour commencer à y voir
>> vraiment.

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)
et l'ai nettoyée et corrigée (balises non fermantse, pas de P ... etc
dans le genre qui ne respecte pas le doctype utilisé.
(mais je ne l'ai pas confiée au rex-validator)

Elle est ici :
<http://cjoint.com/data/dAuJ64NGO1_tripod_3-col.htm>

et voici ce qu'elle donne chez moi :
<http://cjoint.com/data/dAuLoEcSmJ.htm>
Je n'ai donc pas d'ascenseur à ma fenêtre (pourquoi ? j'en aurais eu
besoin ?) et n'ai qu'une hauteur assez ridicule qui ne prend pas toute
la maquette.
Le coup du :
html, body { overflow
c'est amusant, mais finalement non, plutôt casse-pieds.

Le pire du pire : le 800/600 :
<http://cjoint.com/?dAuQmsuB1k>
.... 2 ascenseurs ! 2 !
pourtant ce n'est pas faute d'avoir supprimé toutes les barres de la
fenêtre.

> Oui, là, tu exagères

Non, pas du tout :
<http://cjoint.com/data/dAuGFnPPPS.htm>
tu pourras admirer la pub sur ton texte rouge.


Maintenant qu'on a un fichier un peu plus sain,
que veux-tu dire par colonnes de même hauteur ?
Je parle en particulier de celle qui a 3 pavés bleus.
Faut-il lui rajouter un fond spécial ? allonger les pavés ?

En trichant un peu ça passe pas mal dans Fx :
<http://cjoint.com/data/dAvZqXQf2L_tripod_3-col_asm.htm>
mais désastreux dans IE :-(

--
sm

Le 26.03.2008 19:25, Yohan N. Leder a écrit :
> In article <mn.c9f47d832fbd222f.9866@serge.delbono.net.invali d>,
> laposte@serge.delbono.net.invalid says...
>> Eh bien, il faut tenir compte des petits formats ! Aujourd'hui
>> l'informatique minuscule arrive !
>>
>> Je ne parle même pas des téléphones et PDA, mais avez-vous pensé
>> aux machines de style EEPC, avec un écran de 9" ? Elles semblent
>> avoir de l'avenir !
>
> Dans ce cas et en imaginat que mon public s'équipe de la sorte, je
> préfère gérer une seconde version de site uniquement pour ça...
> Car parralèlement à la miniaturisation, les écrans moyens chez les
> gens et en entreprise sont de plus en plus grands...

Il y a de plus en plus de portable, notamment en entreprise...
De plus, ce n'est pas parce que l'écran est grand que le logiciel
occupe toute la place (au contraire même).


> Et d'ailleurs les pages de plus en plus lourdes (il y a 10 ans, on
> criait au scandale quand on dépassait 50Ko, maintenant, celles qui
> dépassent 300Ko sont légion)

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

Pour rejoindre un avis récemment exprimé ici, faire du lourd *que*
pour flatter l'oeil, sans contenu, n'apporte pas grand chose.
Parmi les sites les plus visités, il y a google et wikipedia : on
est pas obligé de faire lourd et illisible pour avoir des visiteurs.


> Enfin, le site OK en 9" comme en 1280x1024 et plus n'est pas encore
> né

<http://www.pompage.net/pompe/designelastique/>


-----------------------------
Petite note sur ton adresse :
une adresse invalide se termine par ".invalid" (point 3.3) :
<http://www.faqs.org/faqs/fr/usenet/abus/adresses-antispam/>.

Ne tiens pas compte de ma remarque si ton adresse est réellement celle
indiquée. Dans le cas contraire, tu participes à faire spammer le
domaine <http://invalid.net/>.

--
Olivier

In article <47eab857$0$859$ba4acef3@news.orange.fr>,
stephanemoriaux.NoAdmin@wanadoo.fr.invalid 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 ?

In article <47eaed4e$0$23393$426a74cc@news.free.fr>,
ep15SANS@free.fr.invalid 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 :-(

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

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

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

In article <47eb86d9$0$889$ba4acef3@news.orange.fr>,
stephanemoriaux.NoAdmin@wanadoo.fr.invalid 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-e...s/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/

In article <47eb9963$0$20478$426a34cc@news.free.fr>, mokhet@mokhet.com
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 !

In article <MPG.2256ff67d871fd229899b1@news.tiscali.fr>,
y.leder@invalid.net 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/ ?