PHWinfo - Afficher un message - 3 colonnes de même taille sans casser les autres caractéristiques

28/03/2008, 14h13

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/

28/03/2008, 14h13	#17
Yohan N. Leder Messages: n/a Hébergeur:	Re: 3 colonnes de même taille sans casser les autres caractéristiques 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/