Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Empêcher le chevauchement de 2 colonnes en CSS

17 réponses
Avatar
kurtbosh
Bonjour,

J'ai un probl=E8me avec ce code :

<html>

<head>

<link rel=3D"stylesheet" type=3D"text/css" href=3D"style1.css">

<style type=3D"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=3D"haut">

<span class=3D"gauche">Maquette</span>
<span class=3D"droite">Essai</span>

</div>

<div class=3D"colonne-menu">
<p>&nbsp;</p>
<a class=3D"menu" href=3D"index.htm">aaaaaaaa</a>
<a class=3D"menu" href=3D"index.htm">aaaaaaaa</a>
</div>

<div class=3D"line">

<div class=3D"col1">
colonne1
</div>

<div class=3D"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=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 ?

Si vous avez une solution, merci d'avance.

10 réponses

1 2
Avatar
Alex
In article (Dans l'article)
,
kurtbosh 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 ?
Avatar
SAM
Le 3/26/09 4:37 PM, kurtbosh a écrit :

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
Avatar
kurtbosh
On 26 mar, 22:52, SAM
wrote:
Le 3/26/09 4:37 PM, kurtbosh a écrit :



> 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 men u).

--
sm



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 ?
Avatar
mcc
Le Fri, 27 Mar 2009 01:24:47 -0700, kurtbosh a écrit :


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
Avatar
kurtbosh
On 27 mar, 12:35, mcc wrote:
Le Fri, 27 Mar 2009 01:24:47 -0700, kurtbosh a écrit :



> Merci Sam, ça marche parfaitement ici avec Firefox :

>http://www.grenault.net/maquette_css.htm" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">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éri table
> 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 lar geur
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 lar geur
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 (e x
ou em)
.line {margin-left: 18ex}
.colonne-menu {float: left; height: 500px; width: 15ex;
                text-align: center}

--
mcc



Cela ne fonctionne pas avec IE 6 :

http://www.grenault.net/maquette_css.htm" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.grenault.net/maquette_css.htm

C'est comme les clignotants, ça marche, ça marche pas ;-)
Avatar
mcc
Le Fri, 27 Mar 2009 05:33:50 -0700, kurtbosh a écrit :

.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
Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, mcc
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
Avatar
kurtbosh
On 27 mar, 17:11, mcc wrote:
Le Fri, 27 Mar 2009 05:33:50 -0700, kurtbosh a écrit :

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



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 ?
Avatar
kurtbosh
On 27 mar, 17:25, kurtbosh wrote:
On 27 mar, 17:11, mcc wrote:



> Le Fri, 27 Mar 2009 05:33:50 -0700, kurtbosh a écrit :

> >> .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 largeu r à
> 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

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 ?



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 !
Avatar
Alex
In article (Dans l'article)
,
kurtbosh 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 ?
1 2