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

CSS : 3 colonnes avec la colonne du milieu fixe ?

21 réponses
Avatar
Mr Prout !
Salut !

J'ai beau chercher, je ne trouve pas ma réponse à part quelques unes du
genre "il faut faire ça en tableaux, c'est la seule solution".

Il me paraît cependant étonnant que mon problème, que je vais mentionner
ci-dessous, ne soit pas réalisable en CSS. Le voici :

Je veux 3 colonnes sur mon site :
- La colonne du MILIEU a une taille fixe (ex : 500 px)
- Les colonnes gauches et droites font toutes deux la même largeur, et
occupent tout le reste de la largeur de la page. Leur largeur change
donc suivant si on agrandi la largeur de la fenêtre du navigateur.

<------------- 100% ------------>
+------------ BODY -------------+
| | | |
| | | |
|gauche | MILIEU |droite |
| | 500 px | |
| | | |
| | | |
| | | |
+-------------------------------+

Qu'en pensez-vous ? est-ce réalisable en CSS, sachant que ceci doit
fonctionner sur tous les navigateurs ?


Merci d'avance pour votre réponse. ;-)

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr

10 réponses

1 2 3
Avatar
Mr Prout !
La nouvelle vedette du web, docanski, a écrit :
Ceci :

<div
style="min-width:50%;background:lightyellow;margin-left:25%;margin-right:25%">blabla</div>

<div
style="width:25%;background:lightblue;float:left;margin-right:0;margin-top:-1em">blabla</div>

<div
style="width:25%;background:lightblue;float:right;margin-left:0;margin-top:-1em">blabla</div></div>


fonctionne aussi bien sous Firefox qu'Opera et K-Meleon que MSIE 6.x.
Pas besoin, finalement, de contenant. Le décalage horizontal des 3 blocs
est à régler avec le "margin-top".




Merci pour ta proposition, mais ce n'est pas correct car dans ce cas la
colonne du milieu n'a pas de largeur fixe, contrairement à ce que je
souhaite !! ;-)

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr
Avatar
Pascale
docanski écrivait
news:gmuv04$1bug$:

J'ai beau chercher, je ne trouve pas ma réponse à part quelques unes du
genre "il faut faire ça en tableaux, c'est la seule solution".



Beurk !



Je sais bien que par le passé les tableaux ont été utilisés pour tout et
n'importe quoi, mais de temps en temps ils rendent bien service. Pour ma
part, j'évite autant que je peux le dogmatisme et la mode... et la méthode
Shadock (pourquoi faire simple quand on peut faire compliqué) (-:

--
Pascale
www.valinfo.org - Calendrier et annuaire de la vie associative locale
Avatar
Olivier Masson
Mr Prout ! a écrit :

<------------- 100% ------------>
+------------ BODY -------------+
| | | |
| | | |
|gauche | MILIEU |droite |
| | 500 px | |
| | | |
| | | |
| | | |
+-------------------------------+

Qu'en pensez-vous ? est-ce réalisable en CSS, sachant que ceci doit
fonctionner sur tous les navigateurs ?


Merci d'avance pour votre réponse. ;-)

Mr Prout !




En fait, bcp de choses sont réalisables si l'on comprend bien le
positionnement.
Par contre, c'est toujours de la bidouille et il y a toujours des
inconvénients.

Voici une solution qui fonctionne sous FF et IE (mais pour IE, une
solution plus simple aurait pu suffire vu le box model) :
http://gp1.free.fr/marche/3col+centrefixe/

Tu auras compris qu'ici le problème est, selon ce que tu veux faire, la
gestion des hauteurs de colonnes. Car ensuite, il n'est pas toujours
possible de cumuler les bidouilles pour arriver à ses fins.
Avatar
Michael DENIS
Mr Prout ! a écrit :
Si vous aviez toutefois une autre solution pour ma demande, je suis
toujours preneur ;-)



Cet essai semble pouvoir répondre à votre demande. Mais est-il bien
compatible avec l'essentiel des navigateurs ?

*******************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="fr" />
<style type="text/css">
/* ----- DETAIL DE LA PAGE ----- */
#test-g {
position: absolute;
left: 50%;
width: 200px;
margin-left: -450px;
background-color: #606060;
min-height: 400px;
background-image: url(./Formol.jpg);
background-position: left top;
background-repeat: no-repeat;
}

#test-d {
position: absolute;
left: 50%;
width: 200px;
margin-left: 250px;
background-color: #606060;
min-height: 400px;
background-image: url(./Formol.jpg);
background-position: left top;
background-repeat: no-repeat;
}

#detail {
background-color: #a0a0a0;
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;
font-size: 1em;
}
</style>
<title>Test</title>
</head>
<body>
<div id="test-g">
</div>
<div id="test-d">
</div>
<div id="detail">
<p><br />Site test<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Texte test...<br /><br />Texte test...<br /><br />
Cordialement,</p>
<p style="text-align: right;margin-right: 50px">Test</p>
</div>
</body>
</html>
*******************************

--
Michaël DENIS
Avatar
Mr Prout !
La nouvelle vedette du web, Michael DENIS, a écrit :
Mr Prout ! a écrit :
Si vous aviez toutefois une autre solution pour ma demande, je suis
toujours preneur ;-)



Cet essai semble pouvoir répondre à votre demande. Mais est-il bien
compatible avec l'essentiel des navigateurs ?



Bonjour ! et merci pour ta proposition.
J'ai essayé mais cela ne correspond pas à mes attentes. En effet, dans
ton exemple, les colonnes de gauche et droite ne s'élargissent pas
automatiquement lorsque l'on agrandi la page... elles restent fixes.

Je vais sûrement utiliser la solution proposée par Olivier Masson
(12/02/2009 à 11h23) qui me paraît appropriée.

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr
Avatar
Mr Prout !
La nouvelle vedette du web, Olivier Masson, a écrit :

En fait, bcp de choses sont réalisables si l'on comprend bien le
positionnement.
Par contre, c'est toujours de la bidouille et il y a toujours des
inconvénients.

Voici une solution qui fonctionne sous FF et IE (mais pour IE, une
solution plus simple aurait pu suffire vu le box model) :
http://gp1.free.fr/marche/3col+centrefixe/

Tu auras compris qu'ici le problème est, selon ce que tu veux faire, la
gestion des hauteurs de colonnes. Car ensuite, il n'est pas toujours
possible de cumuler les bidouilles pour arriver à ses fins.




Bonjour Olivier,

Ta proposition semble en effet répondre à mes attentes.
J'ai essayé sur IE7, Firefox 3, Opera, Chrome et ça fonctionne (par
contre, IE6... no comment, ça ne m'étonne pas bizarrement !).

La seule remarque que je pourrais faire (histoire de chipoter :-p) est
que la scrollbar verticale apparaît un peu trop tôt (l'idéal aurait été
qu'elle apparaisse uniquement lorsque la largeur du navigateur est au
moins plus petite que la colonne centrale. Mais je vais voir si je peux
régler cela.

En tout cas merci beaucoup pour ce lien, cela va bien m'aider !

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr
Avatar
Y a personne
Mr Prout ! a écrit :
Salut !

J'ai beau chercher, je ne trouve pas ma réponse à part quelques unes du
genre "il faut faire ça en tableaux, c'est la seule solution".

Il me paraît cependant étonnant que mon problème, que je vais mentionner
ci-dessous, ne soit pas réalisable en CSS. Le voici :

Je veux 3 colonnes sur mon site :
- La colonne du MILIEU a une taille fixe (ex : 500 px)
- Les colonnes gauches et droites font toutes deux la même largeur, et
occupent tout le reste de la largeur de la page. Leur largeur change
donc suivant si on agrandi la largeur de la fenêtre du navigateur.

<------------- 100% ------------>
+------------ BODY -------------+
| | | |
| | | |
|gauche | MILIEU |droite |
| | 500 px | |
| | | |
| | | |
| | | |
+-------------------------------+

Qu'en pensez-vous ? est-ce réalisable en CSS, sachant que ceci doit
fonctionner sur tous les navigateurs ?


Merci d'avance pour votre réponse. ;-)

Mr Prout !




http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html
Avatar
Olivier Masson
Y a personne a écrit :


http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html




Super la réponse !
Il y avait aussi "RTFM".

Mais curieux, je n'ai pas trouvé réponse à la question dans ce
formidable lien commercial.
Avatar
Olivier Masson
Mr Prout ! a écrit :

Bonjour Olivier,

Ta proposition semble en effet répondre à mes attentes.
J'ai essayé sur IE7, Firefox 3, Opera, Chrome et ça fonctionne (par
contre, IE6... no comment, ça ne m'étonne pas bizarrement !).




Ca m'étonne pour IE6. Je suis allé voir et, en effet, le problème est
sur le height de 100%. Soit tu passes par du JS pour lui, soit peut-être
en ajoutant un container supplémentaire (mais j'en doute).

La seule remarque que je pourrais faire (histoire de chipoter :-p) est
que la scrollbar verticale apparaît un peu trop tôt (l'idéal aurait été
qu'elle apparaisse uniquement lorsque la largeur du navigateur est au
moins plus petite que la colonne centrale. Mais je vais voir si je peux
régler cela.

En tout cas merci beaucoup pour ce lien, cela va bien m'aider !

Mr Prout !




Tu veux dire barre horizontale donc.
Elle apparait surement dans IE qui a du mal avec le calcul des %.
Pour cela, tu peux mettre la colonne de droite à 49.9% (ou un peu moins)
sur IE (commentaires conditionnels ou hack propre) et voir si ça
fonctionne.
Avatar
Mr Prout !
La nouvelle vedette du web, Olivier Masson, a écrit :
Ca m'étonne pour IE6. Je suis allé voir et, en effet, le problème est
sur le height de 100%. Soit tu passes par du JS pour lui, soit peut-être
en ajoutant un container supplémentaire (mais j'en doute).



OK ! je vais essayer.

La seule remarque que je pourrais faire (histoire de chipoter :-p) est
que la scrollbar verticale apparaît un peu trop tôt (l'idéal aurait
été qu'elle apparaisse uniquement lorsque la largeur du navigateur est
au moins plus petite que la colonne centrale. Mais je vais voir si je
peux régler cela.



Tu veux dire barre horizontale donc.



hé oui, je me suis trompé, désolé :-S

Elle apparait surement dans IE qui a du mal avec le calcul des %.
Pour cela, tu peux mettre la colonne de droite à 49.9% (ou un peu moins)
sur IE (commentaires conditionnels ou hack propre) et voir si ça
fonctionne.



OK, je testerai en début de semaine et te tiendrai au courant.
Merci encore !

Mr Prout !

--
Retrouvez et triez en un clic tous vos emails perdus dans un fichier, un
texte ou un site web !
http://www.tictacmail.fr
1 2 3