Empêcher le chevauchement de 2 colonnes en CSS
kurtbosh
J'ai un problème avec ce code :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<style type="text/css">
.line {}
.col1 {float: left; width: 42%; background-color: yellow}
.col2 {float: right; width: 42%; background-color: green}
.haut {float: left; line-height: 60px; width: 100%; background-color:
lightgrey; vertical-align: middle}
.droite {float: right; font-family: Arial, Helvetica, Verdana, sans-
serif; font-size: 26px; font-weight: bold; color: blue;
text-align: right; font-style: oblique; padding: 10px}
.gauche {color: blue; font-size: 35px; font-style: oblique; font-
family: Arial, Verdana, Helvetica, sans-serif; float: left; padding:
10px}
.grand {float: left}
.colonne-menu {float: left; height: 500px}
</style>
</head>
<body>
<div class="haut">
<span class="gauche">Maquette</span>
<span class="droite">Essai</span>
</div>
<div class="colonne-menu">
<p> </p>
<a class="menu" href="index.htm">aaaaaaaa</a>
<a class="menu" href="index.htm">aaaaaaaa</a>
</div>
<div class="line">
<div class="col1">
colonne1
</div>
<div class="col2">
colonne2
</div>
</div>
</body>
</html>
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éjà ça
mais elle ne reste pas en place non plus !
J'ai essayé 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êt !-)
Que des problèmes sans mes bonnes vieille tables fidèles... Autre truc
bizarre : vertical-align ne fonctionne qu'avec un line-height !
Bizarre ?
Si vous avez une solution, merci d'avance.
Alex
<3ca9d5cd-901b-4c1b...@g38g2000yqd.googlegroups.com>,
kurtbosh <kurt...@gmail.com> wrote (écrivait) :
> La colonne de droite (colonne2) descend quand on redimensionne la
> page. Elle ne va pas en dessous de la colonne de gauche
Si, avec safari sur mac ;-)
--
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
>
> Si vous avez une solution, merci d'avance.
.line {margin-left: 120px}
.col1 {float: left; width: 50%; background-color: yellow}
.col2 {float: left; width: 50%; background-color: green}
.colonne-menu {float: left; height: 500px; width: 100px;
text-align: center}
Il faut donner une marge-gauche au conteneur des colonnes
(il s'adapte alors à la place libre à droite)
puis diviser l'espace pour les 2 colonnes qui prennent ici en largeur :
50% (de 'lime')
Forcément, alors il faut dimensionner le menu
pour qu'il ne tente pas de s'élargir et mettre la zone dans 'lime'.
Alors, pour sûr, pas terrible si on vient à agrandir la police
d'affichage et qu'un item de menu est un peu long ('lime' recouvre le menu).
--
sm
kurtbosh
wrote:
Merci Sam, ça marche parfaitement ici avec Firefox :
http://www.grenault.net/maquette_css.htm
Mais je ne comprends pas pourquoi il faut une marge gauche à
"line" (conteneur de colonnes) ? Un mystère des CSS où y-a-t-il une
véritable logique ?
mcc
>
> Merci Sam, ça marche parfaitement ici avec Firefox :
>
> http://www.grenault.net/maquette_css.htm
>
> Mais je ne comprends pas pourquoi il faut une marge gauche à "line"
> (conteneur de colonnes) ? Un mystère des CSS où y-a-t-il une véritable
> logique ?
Une autre solution est de donner aussi une largeur en % à colonne-menu et
de supprimer la <div> line.
colonne-menu + col1 + col2 <= 100%
mais ainsi la colonne menu se rétrécit aussi quand on réduit la largeur
de la fenêtre.
Si tu utilise FF, installe l'extension "web developper" et avec le choix
information - display div order, tu vois farpaitement :) comment tes
blocs se placent.
Avec ta première manière, tes div col1 et col2 prennent 42% de la largeur
totale de la page, pas de ce qui reste à droite du menu (je suppose que
tu as tatonné pour mettre cette valeur, si tu as commencé avec 45,
l'effet chevauchement est immédiat).
Pour répondre à l'inconvénient de
> Alors, pour sûr, pas terrible si on vient à agrandir la police
> d'affichage et qu'un item de menu est un peu long ('line' recouvre le
> menu).
remplacer les valeur en px par des valeurs en largeurs de caractères (ex
ou em)
.line {margin-left: 18ex}
.colonne-menu {float: left; height: 500px; width: 15ex;
text-align: center}
--
mcc
kurtbosh
Cela ne fonctionne pas avec IE 6 :
http://www.grenault.net/maquette_css.htm
C'est comme les clignotants, ça marche, ça marche pas ;-)
mcc
>> .line {margin-left: 18ex}
>> .colonne-menu {float: left; height: 500px; width: 15ex;
>> text-align: center}
>>
>
> Cela ne fonctionne pas avec IE 6 :
>
> http://www.grenault.net/maquette_css.htm
dans cette page, il y a en plus un lien vers une feuille de style qui
doit rajouter des choses.
Ça fonctionne aussi avec ie6 si tu n'oublies pas de donner une largeur à
colonne-menu.
Mais il faudrait peut-être arréter de tester avec ie6, il y a trop de
choses qui ne marchent pas avec...
> C'est comme les clignotants, ça marche, ça marche pas ;-)
--
mcc
Eric Demeester
ecrivait (wrote) :
Bonjour,
> Mais il faudrait peut-être arréter de tester avec ie6, il y a trop de
> choses qui ne marchent pas avec...
IE6, passe encore, ça peut mériter de faire un effort à cause du nombre
de personnes qui l'utilisent encore...
Par contre j'ai renoncé définitivement à la compatibilitué IE 5.5, c'est
vraiment trop galère :)
--
Eric
kurtbosh
Cela marche sans problème avec : Firefox, Chrome, Safari, Opera et IE
8 (le 7 je ne sais pas). Le 6 marche très mal.
Bon et bien cela me fait une bonne base de départ sans tables cette
fois ci et en HTML 4.01 Strict. J'aurais certainement un tas de
problèmes, on verra bien. Ce sera pour les nouvelles pages.
Merci à tous pour les conseils.
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. Pareil pour le vertical-align
qui a besoin de line-height et non de height mais là je sais pourquoi.
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 ?
kurtbosh
Ne marche pas non plus avec IE 7 et Vista... Je me demande si ces
bonnes vieilles tatables ne sont pas le seul moyen d'assurer une
compatibilité vraiment universelle ! Le CSS c'est très pratique, c'est
vrai mais tant que cela ne sera pas la règle pour tout le monde... Il
faudra attendre que tout le monde soit sous IE 8, des années !!!
D'ailleurs IE 8 et Object, c'est quasi incompatible aussi... Je range
donc ce projet dans le tiroir... Maintenant je sais que je pourrais
faire des pages uniquement en CSS, c'est déjà ça, mais plus tard !
Alex
kurtbosh <kurt...@gmail.com> wrote (écrivait) :
> Je me demande si ces
> bonnes vieilles tatables ne sont pas le seul moyen d'assurer une
> compatibilité vraiment universelle !
J'en suis arrivé à la même conclusion que toi.
Dommage quand même !
--
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 ?
kurtbosh
> In article (Dans l'article)
> kurtbosh <kurtb...@gmail.com> wrote (écrivait) :
>
> > Je me demande si ces
> > bonnes vieilles tatables ne sont pas le seul moyen d'assurer une
> > compatibilité vraiment universelle !
>
> J'en suis arrivé à la même conclusion que toi.
> Dommage quand même !
>
> --
> 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 ?
Oui, dommage !
Il n'y a que 2 solutions à mon avis :
1) se liguer contre IE en annonçant sur nos pages que c'est une
m.... !
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 !
Mais qui est le plus fort ? Le W3C ou Microsoft ?
Alex
kurtbosh <kurt...@gmail.com> 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 :-((
SAM
>
> 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
wrote:
> (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
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
>
> 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.
http://openweb.eu.org/articles/initiation_css
http://openweb.eu.org/etude_cas
http://openweb.eu.org/css
http://openweb.eu.org/articles/intro_accessibilite
http://www.pompage.net/pompe/sortezvouslatetedesgrilles/
http://www.cssplay.co.uk/menu/index.html
--
sm
Bernd
> 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
.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.