Positionnement de div : absolute et relative

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Positionnement de div : absolute et relative

par albat » 02 févr. 2007, 03:15

par albat » 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... ;)

Re: Positionnement de div : absolute et relative

par albat » 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 !

par Victor BRITO » 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:

par albat » 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...

Re: Positionnement de div : absolute et relative

par albat » 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... :?

par mcorgnet » 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

Positionnement de div : absolute et relative

par albat » 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 ; }