Je me heurte à un problème classique (je crois) qui se fait très bien et
très facilement
avec une TABLE, mais que je n'arrive pas à bien réaliser avec des DIV + CSS.
Schématiquement, je veux diviser ma page (standard) en 4 "cellules" (i.e. 4
DIV) :
- L1C1 (logo) : largeur et hauteur fixe (pas de problème)
- L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la
place restante (avec centrage des éléments)
- L2C1 (navig) : largeur fixe et hauteur variable (pas de pb)
- L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute la
place restante
Je tiens à cette disposition pour que ça s'adapte à la largeur effective et
variable de la fenêtre.
C'est la "largeur qui prend toute la place restante" que je n'arrive pas à
"styler" correctement.
D'autant que le contenu (par exemple des images) ne prend pas toujours toute
la largeur
disponible et que je veux néanmoins arriver à centrer horizontalement
certains éléments.
L'emploi de "width: 100%" provoque un débordement à droite de la fenêtre
(puisque C2
ne commence pas en position 0). J'ai fait de multiples autres tests, sans
réel succès.
Verticalement, j'aimerais également centrer le contenu lorsqu'il est moins
long que la
zone d'affichage. Mais là aussi, je n'ai pas trouvé.
Horizontalement, avec des styles spécifiques (pour chaque cas de contenu) ou
en
bricolant avec les "%" (et un résultat différent selon le navigateur),
j'arrive à quelque
chose d'approchant, mais il reste toujours quelque chose qui ne va pas. Et
ce que je
voudrais, c'est un seul style qui fonctionne pour toutes les pages, quel que
soit le contenu.
Et comme je ne dois pas être le 1er à me poser ces questions...
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
MORIAUX Stephane
In article <c1vk1r$pgi$, "Oleane" wrote:
Je me heurte à un problème classique (je crois) qui se fait très bien et très facilement je veux diviser ma page (standard) en 4 "cellules" (i.e. 4 DIV) : - L1C1 (logo) : largeur et hauteur fixe (pas de problème) - L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la place restante (avec centrage des éléments) - L2C1 (navig) : largeur fixe et hauteur variable (pas de pb) - L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute la place restante
Bon si je comprend bien, tu veux :
|---------------|----------------------------------------------| |////////| | |/ l o g o /| TITRE DE LA PAGE | |////////| | |---------------|----------------------------------------------|
|-------------|------------------------------------------------| | NAVIGATION | Le blabla de la page | | | | | Menu 1 | | | Menu 2 | | | Menu 3 | | |-------------| | | | |------------------------------------------------|
<html> <div style="width:90%;margin:auto; background:#ff9;" id=titrage> <img src="logo.gif" width0 height` style="float:left;" alt="" id=logo;> <h1 style="text-align: center;line-height:60px;color:#444;">TITRE DE LA PAGE</h1> </div> <div style="width:90%;margin:auto;" id=contenu> <div style="clear: both;"></div><!-- pour aligner les 2 blocks suivants --> <!-- calage à gauche du menu (float:left) --> <div style="width: 10em; float:left;background:#ffc;" id=navig> <p class=titrenavig>NAVIGATION <p><a href="chap1.htm">Menu 1</a> <p><a href="chap2.htm">Menu 2</a> </div> <!-- pour le corps, il faut mettre une marge a gauche de largeur > a celle du menu --> <div style="margin-left:11em; background:#ddd; padding: 0 1em;" id=corps> <h2 style="text-align:right;">Discution du jour</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla <h2 style="text-align:right;">A Propos</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla</p> <p style="text-align:center;"> <img src="autre.gif" style="margin:auto;" alt="" id=imgcentre;> <p> </div> </div> </html>
C'est la "largeur qui prend toute la place restante" que je n'arrive pas à "styler" correctement.
sans style de largeur ça prend la place restante ...
Verticalement, j'aimerais également centrer le contenu lorsqu'il est moins long que la zone d'affichage.
La longueur de la zone devrait s'adapter au contenu ...
Si on fait zone de corps de hauteur définie, il faut en + bricoler un div positionné à 50% de la hauteur et margé négativement de la moitié de la hauteur du pavé de texte.
Pas fastoche quand on ne connait pas ce pavé ;-)
à + +
-- ******** enlever / remove OTEZ-MOI de / from url ********* Stéphane Moriaux mailto: Aide aux pages web perso (couleur, images, formulaires, javascript ...) http://perso.wanadoo.fr/stephanemoriaux/internet/
-- ******** enlever / remove OTEZ-MOI de / from url ********* Stéphane Moriaux mailto: Aide aux pages web perso (couleur, images, formulaires, javascript ...) http://perso.wanadoo.fr/stephanemoriaux/internet/
In article <c1vk1r$pgi$1@s1.read.news.oleane.net>,
"Oleane" <Z3stanZ@iZfrance.com> wrote:
Je me heurte à un problème classique (je crois) qui se fait très bien et
très facilement
je veux diviser ma page (standard) en 4 "cellules" (i.e. 4 DIV) :
- L1C1 (logo) : largeur et hauteur fixe (pas de problème)
- L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la
place restante (avec centrage des éléments)
- L2C1 (navig) : largeur fixe et hauteur variable (pas de pb)
- L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute la
place restante
Bon si je comprend bien, tu veux :
|---------------|----------------------------------------------|
|////////| |
|/ l o g o /| TITRE DE LA PAGE |
|////////| |
|---------------|----------------------------------------------|
|-------------|------------------------------------------------|
| NAVIGATION | Le blabla de la page |
| | |
| Menu 1 | |
| Menu 2 | |
| Menu 3 | |
|-------------| |
| |
|------------------------------------------------|
<html>
<div style="width:90%;margin:auto; background:#ff9;" id=titrage>
<img src="logo.gif" width0 height` style="float:left;" alt="" id=logo;>
<h1 style="text-align: center;line-height:60px;color:#444;">TITRE DE LA PAGE</h1>
</div>
<div style="width:90%;margin:auto;" id=contenu>
<div style="clear: both;"></div><!-- pour aligner les 2 blocks suivants -->
<!-- calage à gauche du menu (float:left) -->
<div style="width: 10em; float:left;background:#ffc;" id=navig>
<p class=titrenavig>NAVIGATION
<p><a href="chap1.htm">Menu 1</a>
<p><a href="chap2.htm">Menu 2</a>
</div>
<!-- pour le corps,
il faut mettre une marge a gauche
de largeur > a celle du menu -->
<div style="margin-left:11em; background:#ddd; padding: 0 1em;" id=corps>
<h2 style="text-align:right;">Discution du jour</h2>
<p>Blabla de blabla et blabla
<p>Sans oublier du blabla
<h2 style="text-align:right;">A Propos</h2>
<p>Blabla de blabla et blabla
<p>Sans oublier du blabla</p>
<p style="text-align:center;">
<img src="autre.gif" style="margin:auto;" alt="" id=imgcentre;>
<p>
</div>
</div>
</html>
C'est la "largeur qui prend toute la place restante" que je n'arrive pas à
"styler" correctement.
sans style de largeur ça prend la place restante ...
Verticalement, j'aimerais également centrer le contenu lorsqu'il est moins
long que la zone d'affichage.
La longueur de la zone devrait s'adapter au contenu ...
Si on fait zone de corps de hauteur définie,
il faut en + bricoler un div positionné à 50% de la hauteur
et margé négativement de la moitié de la hauteur du
pavé de texte.
Pas fastoche quand on ne connait pas ce pavé ;-)
à + +
--
******** enlever / remove OTEZ-MOI de / from url *********
Stéphane Moriaux mailto:stephaneOTEZ-MOImoriaux@wanadoo.fr
Aide aux pages web perso (couleur, images, formulaires, javascript ...)
http://perso.wanadoo.fr/stephanemoriaux/internet/
--
******** enlever / remove OTEZ-MOI de / from url *********
Stéphane Moriaux mailto:stephaneOTEZ-MOImoriaux@wanadoo.fr
Aide aux pages web perso (couleur, images, formulaires, javascript ...)
http://perso.wanadoo.fr/stephanemoriaux/internet/
Je me heurte à un problème classique (je crois) qui se fait très bien et très facilement je veux diviser ma page (standard) en 4 "cellules" (i.e. 4 DIV) : - L1C1 (logo) : largeur et hauteur fixe (pas de problème) - L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la place restante (avec centrage des éléments) - L2C1 (navig) : largeur fixe et hauteur variable (pas de pb) - L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute la place restante
Bon si je comprend bien, tu veux :
|---------------|----------------------------------------------| |////////| | |/ l o g o /| TITRE DE LA PAGE | |////////| | |---------------|----------------------------------------------|
|-------------|------------------------------------------------| | NAVIGATION | Le blabla de la page | | | | | Menu 1 | | | Menu 2 | | | Menu 3 | | |-------------| | | | |------------------------------------------------|
<html> <div style="width:90%;margin:auto; background:#ff9;" id=titrage> <img src="logo.gif" width0 height` style="float:left;" alt="" id=logo;> <h1 style="text-align: center;line-height:60px;color:#444;">TITRE DE LA PAGE</h1> </div> <div style="width:90%;margin:auto;" id=contenu> <div style="clear: both;"></div><!-- pour aligner les 2 blocks suivants --> <!-- calage à gauche du menu (float:left) --> <div style="width: 10em; float:left;background:#ffc;" id=navig> <p class=titrenavig>NAVIGATION <p><a href="chap1.htm">Menu 1</a> <p><a href="chap2.htm">Menu 2</a> </div> <!-- pour le corps, il faut mettre une marge a gauche de largeur > a celle du menu --> <div style="margin-left:11em; background:#ddd; padding: 0 1em;" id=corps> <h2 style="text-align:right;">Discution du jour</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla <h2 style="text-align:right;">A Propos</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla</p> <p style="text-align:center;"> <img src="autre.gif" style="margin:auto;" alt="" id=imgcentre;> <p> </div> </div> </html>
C'est la "largeur qui prend toute la place restante" que je n'arrive pas à "styler" correctement.
sans style de largeur ça prend la place restante ...
Verticalement, j'aimerais également centrer le contenu lorsqu'il est moins long que la zone d'affichage.
La longueur de la zone devrait s'adapter au contenu ...
Si on fait zone de corps de hauteur définie, il faut en + bricoler un div positionné à 50% de la hauteur et margé négativement de la moitié de la hauteur du pavé de texte.
Pas fastoche quand on ne connait pas ce pavé ;-)
à + +
-- ******** enlever / remove OTEZ-MOI de / from url ********* Stéphane Moriaux mailto: Aide aux pages web perso (couleur, images, formulaires, javascript ...) http://perso.wanadoo.fr/stephanemoriaux/internet/
-- ******** enlever / remove OTEZ-MOI de / from url ********* Stéphane Moriaux mailto: Aide aux pages web perso (couleur, images, formulaires, javascript ...) http://perso.wanadoo.fr/stephanemoriaux/internet/
MORIAUX Stephane
In article <c1vk1r$pgi$, "Oleane" wrote:
Verticalement, j'aimerais également centrer le contenu lorsqu'il est moins long que la zone d'affichage. Mais là aussi, je n'ai pas trouvé.
-- ******** enlever / remove OTEZ-MOI de / from url ********* Stéphane Moriaux mailto: Aide aux pages web perso (couleur, images, formulaires, javascript ...) http://perso.wanadoo.fr/stephane.moriaux/internet/
Michael DENIS
Le 1 Mar 2004 16:15:18 +0100, "Oleane" écrivait:
Je me heurte à un problème classique (je crois) qui se fait très bien et très facilement avec une TABLE, mais que je n'arrive pas à bien réaliser avec des DIV + CSS. Schématiquement, je veux diviser ma page (standard) en 4 "cellules" (i.e. 4 DIV) : - L1C1 (logo) : largeur et hauteur fixe (pas de problème) - L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la place restante (avec centrage des éléments) - L2C1 (navig) : largeur fixe et hauteur variable (pas de pb) - L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute la place restante
Je tiens à cette disposition pour que ça s'adapte à la largeur effective et variable de la fenêtre.
Le 1 Mar 2004 16:15:18 +0100, "Oleane" <Z3stanZ@iZfrance.com>
écrivait:
Je me heurte à un problème classique (je crois) qui se fait très bien et
très facilement
avec une TABLE, mais que je n'arrive pas à bien réaliser avec des DIV + CSS.
Schématiquement, je veux diviser ma page (standard) en 4 "cellules" (i.e. 4
DIV) :
- L1C1 (logo) : largeur et hauteur fixe (pas de problème)
- L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la
place restante (avec centrage des éléments)
- L2C1 (navig) : largeur fixe et hauteur variable (pas de pb)
- L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute la
place restante
Je tiens à cette disposition pour que ça s'adapte à la largeur effective et
variable de la fenêtre.
Je me heurte à un problème classique (je crois) qui se fait très bien et très facilement avec une TABLE, mais que je n'arrive pas à bien réaliser avec des DIV + CSS. Schématiquement, je veux diviser ma page (standard) en 4 "cellules" (i.e. 4 DIV) : - L1C1 (logo) : largeur et hauteur fixe (pas de problème) - L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la place restante (avec centrage des éléments) - L2C1 (navig) : largeur fixe et hauteur variable (pas de pb) - L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute la place restante
Je tiens à cette disposition pour que ça s'adapte à la largeur effective et variable de la fenêtre.
"MORIAUX Stephane" a écrit dans le message de news:
Bon si je comprend bien, tu veux :
|---------------|----------------------------------------------| |////////| | |/ l o g o /| TITRE DE LA PAGE | |////////| | |---------------|----------------------------------------------|
|-------------|------------------------------------------------| | NAVIGATION | Le blabla de la page | | | | | Menu 1 | | | Menu 2 | | | Menu 3 | | |-------------| | | | |------------------------------------------------|
<h1 style="text-align: center;line-height:60px;color:#444;">TITRE DE LA
PAGE</h1>
</div> <div style="width:90%;margin:auto;" id=contenu> <div style="clear: both;"></div><!-- pour aligner les 2 blocks
suivants -->
<!-- calage à gauche du menu (float:left) --> <div style="width: 10em; float:left;background:#ffc;" id=navig> <p class=titrenavig>NAVIGATION <p><a href="chap1.htm">Menu 1</a> <p><a href="chap2.htm">Menu 2</a> </div> <!-- pour le corps, il faut mettre une marge a gauche de largeur > a celle du menu --> <div style="margin-left:11em; background:#ddd; padding: 0 1em;"
id=corps>
<h2 style="text-align:right;">Discution du jour</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla <h2 style="text-align:right;">A Propos</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla</p> <p style="text-align:center;"> <img src="autre.gif" style="margin:auto;" alt="" id=imgcentre;> <p> </div> </div> </html>
Tu comprends bien :-) Ton code marche très bien, avec une approche un peu différente. Ce que je retiens c'est qu'en fait, pour ce que je veux faire, il ne faut pas positionner la DIV "corps" en position absolue > (0, 0).
> C'est la "largeur qui prend toute la place restante" que je n'arrive pas
à
> "styler" correctement.
sans style de largeur ça prend la place restante ...
Dans une DIV en position absolue > (0, 0) - ce que je fais actuellement - ce n'est pas ce qui se produit (et c'est la source de mon problème). Je ne comprends d'ailleurs pas bien pourquoi ça ne se comporte pas pareil dans ce cas.
> Verticalement, j'aimerais également centrer le contenu lorsqu'il est
moins
> long que la zone d'affichage.
La longueur de la zone devrait s'adapter au contenu ...
Si on fait zone de corps de hauteur définie,
C'est bien ce que je ne sais pas a priori. Grosso modo, c'est une sorte de "min-height: 100%" que je voudrais.
-- Tristan
"MORIAUX Stephane" <stephaneOTEZ-MOImoriaux@wanadoo.fr> a écrit dans le
message de
news:stephaneOTEZ-MOImoriaux-2F8D9E.23555201032004@news.wanadoo.fr...
Bon si je comprend bien, tu veux :
|---------------|----------------------------------------------|
|////////| |
|/ l o g o /| TITRE DE LA PAGE |
|////////| |
|---------------|----------------------------------------------|
|-------------|------------------------------------------------|
| NAVIGATION | Le blabla de la page |
| | |
| Menu 1 | |
| Menu 2 | |
| Menu 3 | |
|-------------| |
| |
|------------------------------------------------|
<h1 style="text-align: center;line-height:60px;color:#444;">TITRE DE LA
PAGE</h1>
</div>
<div style="width:90%;margin:auto;" id=contenu>
<div style="clear: both;"></div><!-- pour aligner les 2 blocks
suivants -->
<!-- calage à gauche du menu (float:left) -->
<div style="width: 10em; float:left;background:#ffc;" id=navig>
<p class=titrenavig>NAVIGATION
<p><a href="chap1.htm">Menu 1</a>
<p><a href="chap2.htm">Menu 2</a>
</div>
<!-- pour le corps,
il faut mettre une marge a gauche
de largeur > a celle du menu -->
<div style="margin-left:11em; background:#ddd; padding: 0 1em;"
id=corps>
<h2 style="text-align:right;">Discution du jour</h2>
<p>Blabla de blabla et blabla
<p>Sans oublier du blabla
<h2 style="text-align:right;">A Propos</h2>
<p>Blabla de blabla et blabla
<p>Sans oublier du blabla</p>
<p style="text-align:center;">
<img src="autre.gif" style="margin:auto;" alt="" id=imgcentre;>
<p>
</div>
</div>
</html>
Tu comprends bien :-)
Ton code marche très bien, avec une approche un peu différente.
Ce que je retiens c'est qu'en fait, pour ce que je veux faire, il ne faut
pas
positionner la DIV "corps" en position absolue > (0, 0).
> C'est la "largeur qui prend toute la place restante" que je n'arrive pas
à
> "styler" correctement.
sans style de largeur ça prend la place restante ...
Dans une DIV en position absolue > (0, 0) - ce que je fais actuellement -
ce n'est pas ce qui se produit (et c'est la source de mon problème).
Je ne comprends d'ailleurs pas bien pourquoi ça ne se comporte pas pareil
dans ce cas.
> Verticalement, j'aimerais également centrer le contenu lorsqu'il est
moins
> long que la zone d'affichage.
La longueur de la zone devrait s'adapter au contenu ...
Si on fait zone de corps de hauteur définie,
C'est bien ce que je ne sais pas a priori.
Grosso modo, c'est une sorte de "min-height: 100%" que je voudrais.
"MORIAUX Stephane" a écrit dans le message de news:
Bon si je comprend bien, tu veux :
|---------------|----------------------------------------------| |////////| | |/ l o g o /| TITRE DE LA PAGE | |////////| | |---------------|----------------------------------------------|
|-------------|------------------------------------------------| | NAVIGATION | Le blabla de la page | | | | | Menu 1 | | | Menu 2 | | | Menu 3 | | |-------------| | | | |------------------------------------------------|
<h1 style="text-align: center;line-height:60px;color:#444;">TITRE DE LA
PAGE</h1>
</div> <div style="width:90%;margin:auto;" id=contenu> <div style="clear: both;"></div><!-- pour aligner les 2 blocks
suivants -->
<!-- calage à gauche du menu (float:left) --> <div style="width: 10em; float:left;background:#ffc;" id=navig> <p class=titrenavig>NAVIGATION <p><a href="chap1.htm">Menu 1</a> <p><a href="chap2.htm">Menu 2</a> </div> <!-- pour le corps, il faut mettre une marge a gauche de largeur > a celle du menu --> <div style="margin-left:11em; background:#ddd; padding: 0 1em;"
id=corps>
<h2 style="text-align:right;">Discution du jour</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla <h2 style="text-align:right;">A Propos</h2> <p>Blabla de blabla et blabla <p>Sans oublier du blabla</p> <p style="text-align:center;"> <img src="autre.gif" style="margin:auto;" alt="" id=imgcentre;> <p> </div> </div> </html>
Tu comprends bien :-) Ton code marche très bien, avec une approche un peu différente. Ce que je retiens c'est qu'en fait, pour ce que je veux faire, il ne faut pas positionner la DIV "corps" en position absolue > (0, 0).
> C'est la "largeur qui prend toute la place restante" que je n'arrive pas
à
> "styler" correctement.
sans style de largeur ça prend la place restante ...
Dans une DIV en position absolue > (0, 0) - ce que je fais actuellement - ce n'est pas ce qui se produit (et c'est la source de mon problème). Je ne comprends d'ailleurs pas bien pourquoi ça ne se comporte pas pareil dans ce cas.
> Verticalement, j'aimerais également centrer le contenu lorsqu'il est
moins
> long que la zone d'affichage.
La longueur de la zone devrait s'adapter au contenu ...
Si on fait zone de corps de hauteur définie,
C'est bien ce que je ne sais pas a priori. Grosso modo, c'est une sorte de "min-height: 100%" que je voudrais.
-- Tristan
Tristan
"Michael DENIS" a écrit dans le message de news:
Le 1 Mar 2004 16:15:18 +0100, "Oleane" écrivait:
>Je me heurte à un problème classique (je crois) qui se fait très bien et >très facilement >avec une TABLE, mais que je n'arrive pas à bien réaliser avec des DIV +
CSS.
>Schématiquement, je veux diviser ma page (standard) en 4 "cellules" (i.e.
4
>DIV) : >- L1C1 (logo) : largeur et hauteur fixe (pas de problème) >- L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la >place restante (avec centrage des éléments) >- L2C1 (navig) : largeur fixe et hauteur variable (pas de pb) >- L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute
la
>place restante > >Je tiens à cette disposition pour que ça s'adapte à la largeur effective
Même constat que pour la réponse de Stéphane. Ca fonctionne bien parce que la DIV "L2C2" n'est pas positionnée en position absolue > (0, 0) - l'impasse dans laquelle j'étais.
Avec : #L2C2 { position: absolute; left: 170px; top: 10px; background-color: #808080; } ça ne fonctionne plus. Etonnant, non ?
-- Tristan
"Michael DENIS" <news-mDEL@DEL2nis.net> a écrit dans le message de
news:tke840p0gphp8n9abk98bjfcojrg3mou39@4ax.com...
Le 1 Mar 2004 16:15:18 +0100, "Oleane" <Z3stanZ@iZfrance.com>
écrivait:
>Je me heurte à un problème classique (je crois) qui se fait très bien et
>très facilement
>avec une TABLE, mais que je n'arrive pas à bien réaliser avec des DIV +
CSS.
>Schématiquement, je veux diviser ma page (standard) en 4 "cellules" (i.e.
4
>DIV) :
>- L1C1 (logo) : largeur et hauteur fixe (pas de problème)
>- L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la
>place restante (avec centrage des éléments)
>- L2C1 (navig) : largeur fixe et hauteur variable (pas de pb)
>- L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute
la
>place restante
>
>Je tiens à cette disposition pour que ça s'adapte à la largeur effective
Même constat que pour la réponse de Stéphane.
Ca fonctionne bien parce que la DIV "L2C2" n'est pas positionnée
en position absolue > (0, 0) - l'impasse dans laquelle j'étais.
Avec :
#L2C2 {
position: absolute;
left: 170px;
top: 10px;
background-color: #808080;
}
ça ne fonctionne plus.
Etonnant, non ?
>Je me heurte à un problème classique (je crois) qui se fait très bien et >très facilement >avec une TABLE, mais que je n'arrive pas à bien réaliser avec des DIV +
CSS.
>Schématiquement, je veux diviser ma page (standard) en 4 "cellules" (i.e.
4
>DIV) : >- L1C1 (logo) : largeur et hauteur fixe (pas de problème) >- L1C2 (titre) : hauteur fixe (pas de pb) et largeur qui prend toute la >place restante (avec centrage des éléments) >- L2C1 (navig) : largeur fixe et hauteur variable (pas de pb) >- L2C2 (corps) : hauteur variable (pas de pb) et largeur qui prend toute
la
>place restante > >Je tiens à cette disposition pour que ça s'adapte à la largeur effective
Même constat que pour la réponse de Stéphane. Ca fonctionne bien parce que la DIV "L2C2" n'est pas positionnée en position absolue > (0, 0) - l'impasse dans laquelle j'étais.
Avec : #L2C2 { position: absolute; left: 170px; top: 10px; background-color: #808080; } ça ne fonctionne plus. Etonnant, non ?