La colonne de droite (colonne2) descend quand on redimensionne la
page. Elle ne va pas en dessous de la colonne de gauche, c'est d=E9j=E0 =E7=
a
mais elle ne reste pas en place non plus !
J'ai essay=E9 de rajouter une ligne (line) mais quand je la met en
clear: both elle fout le camp en bas du tableau.
Cette page est la maquette des nouvelles pages de mon site 100% CSS
sans tables !
Bon, je ne suis pas encore pr=EAt !-)
Que des probl=E8mes sans mes bonnes vieille tables fid=E8les... Autre truc
bizarre : vertical-align ne fonctionne qu'avec un line-height !
Bizarre ?
In article (Dans l'article) , kurtbosh wrote (écrivait) :
1) se liguer contre IE en annonçant sur nos pages que c'est une m.... !
AMHA, pas possible professionnellement... Mais quel plaisir ;-)
2) conserver les tables
Car passer en CSS c'est aller contre le W3C en fait qui est là justement pour assurer la compatibilité des sites !
Pas d'accord avec toi, c'est aller dans le sens du W3C, mais pas dans celui de IE
Mais qui est le plus fort ? Le W3C ou Microsoft ?
Ben, y'a pas photo pour le moment :-((
-- Alex Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose. Ça serait pas des fois de la betterave, hein ?
SAM
Le 3/27/09 5:25 PM, kurtbosh a écrit :
Le coup de la marge gauche obligatoire pour les lignes contenant les colonnes, j'aurais eu du mal à le trouver seul ! Je n'ai toujours pas bien compris pourquoi mais cela marche.
Bon ...
Soit on :
- met 3 colonnes en float:left; normalement chaque colonne a alors une largeur minimale : celle nécessité par le contenu de la colonne (c'est le texte, l'image ... dans la colonne qui règle la largeur du conteneur, de la colonne) C'est la même chose que pour : position: absolute; - fort de ça et comme ce n'est pas ce qu'on veut, on va régler ces largeurs nous-mêmes. - Comme on veut que les 3 colonnes remplissent la largeur de la fenêtre on va appliquer des % de remplissage à chaque colonne .menu { width: 20% } .col1 { width: 40% } .col2 { width: 40% } total = 20 + 40 + 40 = 100% // c'qu'on est bons là dis-donc!
Soit on :
- veut le menu de largeur fixe on fait alors .menu { width: 120px; } et .menu { float: left; } pour le faire flotter à gauche - puis on va faire couler un div à droite du menu qui flotte à gauche - Normalement, un div occupe toute la largeur, ça ne nous arrange pas. - Là il nous faut un div de largeur = place qui reste libre à droite et dont on ne connait pas la taille (dépendant de celle de la fenêtre) - Alors on règle astucieusement la largeur de ce div par une marge gauche suffisante, c a d supérieure à la largeur du menu. .contenu { margin-left: 130px } Et hop! miracle le div remonte et se positionne à droite du menu - ne reste plus qu'à glisser dans ce div auto-dimensionnable 2 autres divs de largeur la 1/2 de ce div col1, col2 { float: left; width: 50% }
Pareil pour le vertical-align qui a besoin de line-height et non de height mais là je sais pourquoi.
Comme je ne sais de quoi tu causes (où-ca un vertical-align ?) Et comme ce truc ne sert quasi jamais et qu'il ne s'applique qu'à des cas spécifiques (je crois : qu'aux éléments de type inline, c a d texte et image) ton truc de line-height ... autant il marche sans le vertical-align. <http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align> (bon courage pour comprendre ce qu'ils patafiolent !) Ha! ça servirait aussi dans les tables où ça n'y fonctionne pas pareil que dans un P (histoire de simplifier ?).
IE 6, oui je sais mais il est encore très utilisé car certains programmes (Hyperion par exemple) fonctionnent mal sur le 7... et la règle du W3C n'est elle pas d'assurer la compatibilité maximum ?
La tu te mélanges les pinceaux : - les 3 chiottes proposent de définir des règles et ce à disposition de qui veut - M$ a déjà son PQ et il merde bien comme il veut - Pendant que les autres tentent de chier droit Ne reste plus qu'à disposer des glissières et des serpillères autour de IE (Incontinent Emérite ?)
à mettre dans un bouton de la barre personnelle : <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html> aller y voir P (position) aller y voir F (float) et butiner un peu partout.
-- sm
Le 3/27/09 5:25 PM, kurtbosh a écrit :
Le coup de la marge gauche obligatoire pour les lignes contenant les
colonnes, j'aurais eu du mal à le trouver seul ! Je n'ai toujours pas
bien compris pourquoi mais cela marche.
Bon ...
Soit on :
- met 3 colonnes en float:left;
normalement chaque colonne a alors une largeur minimale :
celle nécessité par le contenu de la colonne
(c'est le texte, l'image ... dans la colonne qui règle la largeur
du conteneur, de la colonne)
C'est la même chose que pour : position: absolute;
- fort de ça et comme ce n'est pas ce qu'on veut,
on va régler ces largeurs nous-mêmes.
- Comme on veut que les 3 colonnes remplissent la largeur de la fenêtre
on va appliquer des % de remplissage à chaque colonne
.menu { width: 20% }
.col1 { width: 40% }
.col2 { width: 40% }
total = 20 + 40 + 40 = 100% // c'qu'on est bons là dis-donc!
Soit on :
- veut le menu de largeur fixe
on fait alors
.menu { width: 120px; }
et
.menu { float: left; }
pour le faire flotter à gauche
- puis on va faire couler un div à droite du menu qui flotte à gauche
- Normalement, un div occupe toute la largeur, ça ne nous arrange pas.
- Là il nous faut un div de largeur = place qui reste libre à droite
et dont on ne connait pas la taille (dépendant de celle de la
fenêtre)
- Alors on règle astucieusement la largeur de ce div
par une marge gauche suffisante,
c a d supérieure à la largeur du menu.
.contenu { margin-left: 130px }
Et hop! miracle le div remonte et se positionne à droite du menu
- ne reste plus qu'à glisser dans ce div auto-dimensionnable
2 autres divs de largeur la 1/2 de ce div
col1, col2 { float: left; width: 50% }
Pareil pour le vertical-align
qui a besoin de line-height et non de height mais là je sais pourquoi.
Comme je ne sais de quoi tu causes (où-ca un vertical-align ?)
Et comme ce truc ne sert quasi jamais et qu'il ne s'applique qu'à des
cas spécifiques (je crois : qu'aux éléments de type inline, c a d texte
et image) ton truc de line-height ... autant il marche sans le
vertical-align.
<http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align>
(bon courage pour comprendre ce qu'ils patafiolent !)
Ha! ça servirait aussi dans les tables où ça n'y fonctionne pas pareil
que dans un P (histoire de simplifier ?).
IE 6, oui je sais mais il est encore très utilisé car certains
programmes (Hyperion par exemple) fonctionnent mal sur le 7... et la
règle du W3C n'est elle pas d'assurer la compatibilité maximum ?
La tu te mélanges les pinceaux :
- les 3 chiottes proposent de définir des règles
et ce à disposition de qui veut
- M$ a déjà son PQ et il merde bien comme il veut
- Pendant que les autres tentent de chier droit
Ne reste plus qu'à disposer des glissières et des serpillères autour de
IE (Incontinent Emérite ?)
à mettre dans un bouton de la barre personnelle :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
aller y voir P (position)
aller y voir F (float)
et butiner un peu partout.
Le coup de la marge gauche obligatoire pour les lignes contenant les colonnes, j'aurais eu du mal à le trouver seul ! Je n'ai toujours pas bien compris pourquoi mais cela marche.
Bon ...
Soit on :
- met 3 colonnes en float:left; normalement chaque colonne a alors une largeur minimale : celle nécessité par le contenu de la colonne (c'est le texte, l'image ... dans la colonne qui règle la largeur du conteneur, de la colonne) C'est la même chose que pour : position: absolute; - fort de ça et comme ce n'est pas ce qu'on veut, on va régler ces largeurs nous-mêmes. - Comme on veut que les 3 colonnes remplissent la largeur de la fenêtre on va appliquer des % de remplissage à chaque colonne .menu { width: 20% } .col1 { width: 40% } .col2 { width: 40% } total = 20 + 40 + 40 = 100% // c'qu'on est bons là dis-donc!
Soit on :
- veut le menu de largeur fixe on fait alors .menu { width: 120px; } et .menu { float: left; } pour le faire flotter à gauche - puis on va faire couler un div à droite du menu qui flotte à gauche - Normalement, un div occupe toute la largeur, ça ne nous arrange pas. - Là il nous faut un div de largeur = place qui reste libre à droite et dont on ne connait pas la taille (dépendant de celle de la fenêtre) - Alors on règle astucieusement la largeur de ce div par une marge gauche suffisante, c a d supérieure à la largeur du menu. .contenu { margin-left: 130px } Et hop! miracle le div remonte et se positionne à droite du menu - ne reste plus qu'à glisser dans ce div auto-dimensionnable 2 autres divs de largeur la 1/2 de ce div col1, col2 { float: left; width: 50% }
Pareil pour le vertical-align qui a besoin de line-height et non de height mais là je sais pourquoi.
Comme je ne sais de quoi tu causes (où-ca un vertical-align ?) Et comme ce truc ne sert quasi jamais et qu'il ne s'applique qu'à des cas spécifiques (je crois : qu'aux éléments de type inline, c a d texte et image) ton truc de line-height ... autant il marche sans le vertical-align. <http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align> (bon courage pour comprendre ce qu'ils patafiolent !) Ha! ça servirait aussi dans les tables où ça n'y fonctionne pas pareil que dans un P (histoire de simplifier ?).
IE 6, oui je sais mais il est encore très utilisé car certains programmes (Hyperion par exemple) fonctionnent mal sur le 7... et la règle du W3C n'est elle pas d'assurer la compatibilité maximum ?
La tu te mélanges les pinceaux : - les 3 chiottes proposent de définir des règles et ce à disposition de qui veut - M$ a déjà son PQ et il merde bien comme il veut - Pendant que les autres tentent de chier droit Ne reste plus qu'à disposer des glissières et des serpillères autour de IE (Incontinent Emérite ?)
à mettre dans un bouton de la barre personnelle : <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html> aller y voir P (position) aller y voir F (float) et butiner un peu partout.
-- sm
kurtbosh
On 27 mar, 21:34, SAM wrote:
Le 3/27/09 5:25 PM, kurtbosh a écrit :
> Le coup de la marge gauche obligatoire pour les lignes contenant les > colonnes, j'aurais eu du mal à le trouver seul ! Je n'ai toujours pas > bien compris pourquoi mais cela marche.
Bon ...
Soit on :
- met 3 colonnes en float:left; normalement chaque colonne a alors une largeur minimale : celle nécessité par le contenu de la colonne (c'est le texte, l'image ... dans la colonne qui règle la largeu r du conteneur, de la colonne) C'est la même chose que pour : position: absolute; - fort de ça et comme ce n'est pas ce qu'on veut, on va régler ces largeurs nous-mêmes. - Comme on veut que les 3 colonnes remplissent la largeur de la fenêtre on va appliquer des % de remplissage à chaque colonne .menu { width: 20% } .col1 { width: 40% } .col2 { width: 40% } total = 20 + 40 + 40 = 100% // c'qu'on est bons là dis-d onc!
Soit on :
- veut le menu de largeur fixe on fait alors .menu { width: 120px; } et .menu { float: left; } pour le faire flotter à gauche - puis on va faire couler un div à droite du menu qui flotte à gauche - Normalement, un div occupe toute la largeur, ça ne nous arrange pas. - Là il nous faut un div de largeur = place qui reste libre à droit e et dont on ne connait pas la taille (dépendant de celle de la fenêtre) - Alors on règle astucieusement la largeur de ce div par une marge gauche suffisante, c a d supérieure à la largeur du menu. .contenu { margin-left: 130px } Et hop! miracle le div remonte et se positionne à droite du menu - ne reste plus qu'à glisser dans ce div auto-dimensionnable 2 autres divs de largeur la 1/2 de ce div col1, col2 { float: left; width: 50% }
> Pareil pour le vertical-align > qui a besoin de line-height et non de height mais là je sais pourquoi .
Comme je ne sais de quoi tu causes (où-ca un vertical-align ?) Et comme ce truc ne sert quasi jamais et qu'il ne s'applique qu'à des cas spécifiques (je crois : qu'aux éléments de type inline, c a d t exte et image) ton truc de line-height ... autant il marche sans le vertical-align. <http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-... > (bon courage pour comprendre ce qu'ils patafiolent !) Ha! ça servirait aussi dans les tables où ça n'y fonctionne pas par eil que dans un P (histoire de simplifier ?).
> IE 6, oui je sais mais il est encore très utilisé car certains > programmes (Hyperion par exemple) fonctionnent mal sur le 7... et la > règle du W3C n'est elle pas d'assurer la compatibilité maximum ?
La tu te mélanges les pinceaux : - les 3 chiottes proposent de définir des règles et ce à disposition de qui veut - M$ a déjà son PQ et il merde bien comme il veut - Pendant que les autres tentent de chier droit Ne reste plus qu'à disposer des glissières et des serpillères autou r de IE (Incontinent Emérite ?)
à mettre dans un bouton de la barre personnelle : <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html> aller y voir P (position) aller y voir F (float) et butiner un peu partout.
-- sm
J'ai tout compris là. Merci.
Le line-height c'était pour centrer verticalement Grenault.net et le titre de droite dans la bande du haut et ça marche.
Tu devrais donner des cours...
On 27 mar, 21:34, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
Le 3/27/09 5:25 PM, kurtbosh a écrit :
> Le coup de la marge gauche obligatoire pour les lignes contenant les
> colonnes, j'aurais eu du mal à le trouver seul ! Je n'ai toujours pas
> bien compris pourquoi mais cela marche.
Bon ...
Soit on :
- met 3 colonnes en float:left;
normalement chaque colonne a alors une largeur minimale :
celle nécessité par le contenu de la colonne
(c'est le texte, l'image ... dans la colonne qui règle la largeu r
du conteneur, de la colonne)
C'est la même chose que pour : position: absolute;
- fort de ça et comme ce n'est pas ce qu'on veut,
on va régler ces largeurs nous-mêmes.
- Comme on veut que les 3 colonnes remplissent la largeur de la fenêtre
on va appliquer des % de remplissage à chaque colonne
.menu { width: 20% }
.col1 { width: 40% }
.col2 { width: 40% }
total = 20 + 40 + 40 = 100% // c'qu'on est bons là dis-d onc!
Soit on :
- veut le menu de largeur fixe
on fait alors
.menu { width: 120px; }
et
.menu { float: left; }
pour le faire flotter à gauche
- puis on va faire couler un div à droite du menu qui flotte à gauche
- Normalement, un div occupe toute la largeur, ça ne nous arrange pas.
- Là il nous faut un div de largeur = place qui reste libre à droit e
et dont on ne connait pas la taille (dépendant de celle de la
fenêtre)
- Alors on règle astucieusement la largeur de ce div
par une marge gauche suffisante,
c a d supérieure à la largeur du menu.
.contenu { margin-left: 130px }
Et hop! miracle le div remonte et se positionne à droite du menu
- ne reste plus qu'à glisser dans ce div auto-dimensionnable
2 autres divs de largeur la 1/2 de ce div
col1, col2 { float: left; width: 50% }
> Pareil pour le vertical-align
> qui a besoin de line-height et non de height mais là je sais pourquoi .
Comme je ne sais de quoi tu causes (où-ca un vertical-align ?)
Et comme ce truc ne sert quasi jamais et qu'il ne s'applique qu'à des
cas spécifiques (je crois : qu'aux éléments de type inline, c a d t exte
et image) ton truc de line-height ... autant il marche sans le
vertical-align.
<http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-... >
(bon courage pour comprendre ce qu'ils patafiolent !)
Ha! ça servirait aussi dans les tables où ça n'y fonctionne pas par eil
que dans un P (histoire de simplifier ?).
> IE 6, oui je sais mais il est encore très utilisé car certains
> programmes (Hyperion par exemple) fonctionnent mal sur le 7... et la
> règle du W3C n'est elle pas d'assurer la compatibilité maximum ?
La tu te mélanges les pinceaux :
- les 3 chiottes proposent de définir des règles
et ce à disposition de qui veut
- M$ a déjà son PQ et il merde bien comme il veut
- Pendant que les autres tentent de chier droit
Ne reste plus qu'à disposer des glissières et des serpillères autou r de
IE (Incontinent Emérite ?)
à mettre dans un bouton de la barre personnelle :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
aller y voir P (position)
aller y voir F (float)
et butiner un peu partout.
--
sm
J'ai tout compris là. Merci.
Le line-height c'était pour centrer verticalement Grenault.net et le
titre de droite dans la bande du haut et ça marche.
> Le coup de la marge gauche obligatoire pour les lignes contenant les > colonnes, j'aurais eu du mal à le trouver seul ! Je n'ai toujours pas > bien compris pourquoi mais cela marche.
Bon ...
Soit on :
- met 3 colonnes en float:left; normalement chaque colonne a alors une largeur minimale : celle nécessité par le contenu de la colonne (c'est le texte, l'image ... dans la colonne qui règle la largeu r du conteneur, de la colonne) C'est la même chose que pour : position: absolute; - fort de ça et comme ce n'est pas ce qu'on veut, on va régler ces largeurs nous-mêmes. - Comme on veut que les 3 colonnes remplissent la largeur de la fenêtre on va appliquer des % de remplissage à chaque colonne .menu { width: 20% } .col1 { width: 40% } .col2 { width: 40% } total = 20 + 40 + 40 = 100% // c'qu'on est bons là dis-d onc!
Soit on :
- veut le menu de largeur fixe on fait alors .menu { width: 120px; } et .menu { float: left; } pour le faire flotter à gauche - puis on va faire couler un div à droite du menu qui flotte à gauche - Normalement, un div occupe toute la largeur, ça ne nous arrange pas. - Là il nous faut un div de largeur = place qui reste libre à droit e et dont on ne connait pas la taille (dépendant de celle de la fenêtre) - Alors on règle astucieusement la largeur de ce div par une marge gauche suffisante, c a d supérieure à la largeur du menu. .contenu { margin-left: 130px } Et hop! miracle le div remonte et se positionne à droite du menu - ne reste plus qu'à glisser dans ce div auto-dimensionnable 2 autres divs de largeur la 1/2 de ce div col1, col2 { float: left; width: 50% }
> Pareil pour le vertical-align > qui a besoin de line-height et non de height mais là je sais pourquoi .
Comme je ne sais de quoi tu causes (où-ca un vertical-align ?) Et comme ce truc ne sert quasi jamais et qu'il ne s'applique qu'à des cas spécifiques (je crois : qu'aux éléments de type inline, c a d t exte et image) ton truc de line-height ... autant il marche sans le vertical-align. <http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-... > (bon courage pour comprendre ce qu'ils patafiolent !) Ha! ça servirait aussi dans les tables où ça n'y fonctionne pas par eil que dans un P (histoire de simplifier ?).
> IE 6, oui je sais mais il est encore très utilisé car certains > programmes (Hyperion par exemple) fonctionnent mal sur le 7... et la > règle du W3C n'est elle pas d'assurer la compatibilité maximum ?
La tu te mélanges les pinceaux : - les 3 chiottes proposent de définir des règles et ce à disposition de qui veut - M$ a déjà son PQ et il merde bien comme il veut - Pendant que les autres tentent de chier droit Ne reste plus qu'à disposer des glissières et des serpillères autou r de IE (Incontinent Emérite ?)
à mettre dans un bouton de la barre personnelle : <http://www.yoyodesign.org/doc/w3c/css2/indexlist.html> aller y voir P (position) aller y voir F (float) et butiner un peu partout.
-- sm
J'ai tout compris là. Merci.
Le line-height c'était pour centrer verticalement Grenault.net et le titre de droite dans la bande du haut et ça marche.
Tu devrais donner des cours...
SAM
Le 3/28/09 7:01 AM, kurtbosh a écrit :
Tu devrais donner des cours...
Je ne suis pas assez organisé pour ça. Je suis trop bordélique et ne sais me plier à un plan, ça déborderait tt le temps en explications annexes ou vers celles du chapitre à 3 ou 4 rangs + loin, les "élèves" seraient noyés à peine commencé. Je manque de rigueur et mes explications sont bp trop imagées pour être "professionnellement" acceptables.
Cependant tu peux bien te donner ton cours toi-même, il suffit d'aller ici : <http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc> de tout lire et d'essayer les exemples proposés
Après, et une fois un peu compris les mécanismes, on peut aller voir comment s'en servir pour des mises en pages un peu courantes ou plus élaborées.
Je ne suis pas assez organisé pour ça.
Je suis trop bordélique et ne sais me plier à un plan, ça déborderait tt
le temps en explications annexes ou vers celles du chapitre à 3 ou 4
rangs + loin, les "élèves" seraient noyés à peine commencé.
Je manque de rigueur et mes explications sont bp trop imagées pour être
"professionnellement" acceptables.
Cependant tu peux bien te donner ton cours toi-même, il suffit d'aller ici :
<http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc>
de tout lire
et d'essayer les exemples proposés
Après, et une fois un peu compris les mécanismes, on peut aller voir
comment s'en servir pour des mises en pages un peu courantes ou plus
élaborées.
Je ne suis pas assez organisé pour ça. Je suis trop bordélique et ne sais me plier à un plan, ça déborderait tt le temps en explications annexes ou vers celles du chapitre à 3 ou 4 rangs + loin, les "élèves" seraient noyés à peine commencé. Je manque de rigueur et mes explications sont bp trop imagées pour être "professionnellement" acceptables.
Cependant tu peux bien te donner ton cours toi-même, il suffit d'aller ici : <http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc> de tout lire et d'essayer les exemples proposés
Après, et une fois un peu compris les mécanismes, on peut aller voir comment s'en servir pour des mises en pages un peu courantes ou plus élaborées.
Par contre j'ai renoncé définitivement à la compatibilitué IE 5.5, c'est vraiment trop galère :)
Laisse tomber. Il est tout de même facile de se mett(re à jour et si l'ordi est trop vieux, la 6 devrait tout de même fonctionner. Est-ce qu'on fait rouler des chars à boeufs sur les autoroutes ? -- A+
Romer
Eric Demeester <eric+usenet@galacsys.net> wrote:
Par contre j'ai renoncé définitivement à la compatibilitué IE 5.5, c'est
vraiment trop galère :)
Laisse tomber. Il est tout de même facile de se mett(re à jour et si
l'ordi est trop vieux, la 6 devrait tout de même fonctionner.
Est-ce qu'on fait rouler des chars à boeufs sur les autoroutes ?
--
A+
Par contre j'ai renoncé définitivement à la compatibilitué IE 5.5, c'est vraiment trop galère :)
Laisse tomber. Il est tout de même facile de se mett(re à jour et si l'ordi est trop vieux, la 6 devrait tout de même fonctionner. Est-ce qu'on fait rouler des chars à boeufs sur les autoroutes ? -- A+
Romer
kurtbosh
Pour mon problème il fallait ajouter :
.col2 {margin-left: -1px]
Bug de calcul chez IE (calcule des demi pixels...)
Fonctionne avec la v7 (je n'ai plus la 6)
Merci à tous.
Pour mon problème il fallait ajouter :
.col2 {margin-left: -1px]
Bug de calcul chez IE (calcule des demi pixels...)
