Positionnement de div : absolute et relative

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

01 févr. 2007, 15:05

Bonjour,

La réponse est certainement toute simple,
mais en ce moment, j'ai la crève
et les neurones trop englués (Bâââh...) pour trouver tout seul.

Voici donc ma page :
(oui, j'ai arrêté le HTML pour coder directement en ASCII !) :langue:

Code : Tout sélectionner

+--------------------------------------+ | HAUT | +--------------+-----------------------+ | | | | GAUCHE | DROITE | | | | +--------------+-----------------------+ | BAS | +--------------------------------------+
Pour des raisons absolument dépendantes de ma volonté,
les div GAUCHE et DROITE sont placés en position:absolute.

Le souci est que le div BAS doit se placer en dessous
(GAUCHE et DROITE sont de hauteur variable).

Or, BAS a tendance à se coller en-dessous de HAUT
se superposant ainsi à GAUCHE et DROITE.

Et ça m'agace.

Une idée ?
D'avance, merci.
// CSS épuré (j'ai viré les trucs inutiles : backgrounds, etc.)

#haut   { height:191px ; margin:0 ; padding:0 ; }
#gauche { position:absolute ; top:191px ; left:0 ; width:210px ; margin:0 ; padding:0 ; }
#droite { position:absolute ; top:191px ; left:210px ; width:540px ; margin:0 ; padding:0 ; }

#bas    { POSITION:RELATIVE ; height:272px ; margin:0 ; padding:0 ; }

Mammouth du PHP | 514 Messages

01 févr. 2007, 15:09

faut virer les positions absolues de gauche et droite. Mettre un float: left sur gauche, mettre un clear:both sur le bas.

Pour t'orienter, tu as ça :

http://css.alsacreations.com/modeles/modele3.htm

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

01 févr. 2007, 15:37

Pour des raisons absolument dépendantes de ma volonté,
les div GAUCHE et DROITE sont placés en position:absolute.
Je vais donc préciser...

Initialement, j'utilisais des float.
Les 4 éléments étaient bien placés les uns par rapport aux autres.

Sauf... quand on réduisait la largeur de la fenêtre d'affichage,
DROITE venait se placer en dessous de GAUCHE.
Ce que je ne veux surtout pas !

Voilà pourquoi, j'ai opté pour les position:absolute.

Mais résoudre un problème en provoque souvent un autre... :?

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

01 févr. 2007, 15:48

En me référant au modèle proposé par alsacréations dont tu m'as rappelé le lien,
j'ai retrouvé l'astuce du margin-left. :merci:

Le positionnement est à présent correctement rétabli,
mais j'ai un problème de continuité qui est apparu (espace de rupture de qqs pixels)

je teste...

Mammouth du PHP | 2937 Messages

01 févr. 2007, 15:59

Si tu tiens au positionnement absolu, il faut un élément englobant l'ensemble de la page et positionné (un simple position: relative suffit, je pense). Ainsi, tu pourras positionner en absolu ton élément du bas avec bottom: 0. Sauf erreur de ma part. :oops:

Mais, d'un autre côté, pourquoi faire compliqué quand les marges et le positionnement flottant (ainsi que l'annulation de ses effets) font très bien l'affaire? :wink:

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

01 févr. 2007, 16:11

Initialement, j'utilisais des float.
Les 4 éléments étaient bien placés les uns par rapport aux autres.

Sauf... quand on réduisait la largeur de la fenêtre d'affichage,
DROITE venait se placer en dessous de GAUCHE.
Ce que je ne veux surtout pas !
Mais s'il y a une autre solution que de passer en position:absolute, je suis preneur !

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

01 févr. 2007, 16:15

le positionnement flottant (ainsi que l'annulation de ses effets)
Genre "empêcher la linéarisation" ?
Parle-moi, je t'écoute... ;)

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

02 févr. 2007, 03:15