[CSS] dimension horizontale adaptable ?

Le
Oleane
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

--
Tristan
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
MORIAUX Stephane
Le #21840061
In article "Oleane"
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>
<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
</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;">
<p>&nbsp;
</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
Le #21840051
In article "Oleane"
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é.



tests essplicatifs :
http://perso.wanadoo.fr/stephane.moriaux/truc/gn/exo/00.shtml




--
******** 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 #21840011
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.



BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
background-color: #202020;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
}

/* ----- LOGO ----- */
#L1C1 {
width: 150px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
background-color: #404040;
}

/* ----- NAVIG ----- */
#L2C1 {
width: 150px;
position: absolute;
top: 120px;
left: 0px;
margin-left: 10px;
margin-bottom: 10px;
text-align: center;
background-color: #505050;
}

/* ----- TITRE ----- */
#L1C2 {
height: 100px;
margin-left: 170px;
margin-top: 10px;
margin-right: 10px;
text-align: center;
background-color: #606060;
}

/* ----- CORPS ----- */
#L2C2 {
margin-left: 170px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #808080;
}


--
Michaël DENIS


Déco?
Tristan
Le #21840001
"MORIAUX Stephane" 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 | |
|-------------| |
| |
|------------------------------------------------|


<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
</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;">
<p>&nbsp;
</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
Le #21839991
"Michael DENIS" 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


et
>variable de la fenêtre.

[...]
/* ----- CORPS ----- */
#L2C2 {
margin-left: 170px;
margin-top: 10px;
background-color: #808080;
}



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
Publicité
Poster une réponse
Anonyme