Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP [CSS] dimension horizontale adaptable ?

[CSS] dimension horizontale adaptable ?

5 réponses
Avatar
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
Signaler un problème avec ce contenu

5 réponses

Supprimer
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
Avatar
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>&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/
Avatar
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é.



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



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? <http://www.toiles-de-mayenne.com/>
Avatar
Tristan
"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 | |
|-------------| |
| |
|------------------------------------------------|


<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>&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
Avatar
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


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