Empêcher le chevauchement de 2 colonnes en CSS

Le
kurtbosh
Bonjour,

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>&nbsp;</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.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Alex
Le #22033961
In article (Dans l'article)
kurtbosh
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
Le #22033931
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
kurtbosh
Le #22033911
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 ?
mcc
Le #22033901
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
kurtbosh
Le #22033891
On 27 mar, 12:35, 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é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

C'est comme les clignotants, ça marche, ça marche pas ;-)
mcc
Le #22033881
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
Eric Demeester
Le #22033871
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
kurtbosh
Le #22033861
On 27 mar, 17:11, 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



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
Le #22033851
On 27 mar, 17:25, kurtbosh
On 27 mar, 17:11, 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 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 !
Alex
Le #22033841
In article (Dans l'article)
kurtbosh
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 ?
Publicité
Poster une réponse
Anonyme