Forum Développeur - Administration serveur, programmation et base de données

Version complète : Positionnement

Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS

axelar

May 2 2005, 08:00 AM

Bonjour

voilà j'essaie d'obtenir ce que vous pouvez voir en image en CSS.

J'ai donc essayé de faire du positionnement absolu mais la zone 4 ne peut déterminer la bonne position puisque la zone 2 est de hauteur variable.
Si je passe en positionnement relatif c'est la zone 3 qui ne se place pas correctement...

Du coup je ne parviens pas à obtenir ce que je veux.

J'ai découpé mon fichier html en 4 zones <div name="xxxxx"></div>, est-ce que cela convient ?

Bref je suis preneur de tout conseil, lien, etc....

Merci

RaphaelG

May 2 2005, 08:27 AM

Bonjour,

Pour réaliser ce schema, il suffit de positionner uniquement l'élément 3 en position absolue.
Laissent les autres blocs simplement dans le flux normal, sans positionnement.

PS : ce n'est pas avec "name" qu'on désigne un élément, mais avec un identificateur (id) ou une classe (class), tu auras une introduction aux CSS et à leur usage dans les Tutoriaux du forum.

Bonne chance

axelar

May 2 2005, 08:56 AM

Merci de ta réponse mais (ben oui y'a toujours un mais

)

Pour l'identification des div j'ai marqué name mais j'avais bien utilisé id="xxx" dans ma page web.

Pour revenir à mon problème en procédant comme tu me l'as conseillé à savoir en renseignant uniquement la zone 4 en positionnement absolu, la zone 4 (les 3 icônes) réagit comme si les coordonnées 0,0 se situait tout en bas à droite de ma zone 3.
Est-ce que je dois déclarer la zone 4 en premier afin que celle-ci ne soit pas décalée par les zones précédentes ? mais si c'est le cas je ne comprends pas le sens du mot absolu du positionnement.

RaphaelG

May 2 2005, 10:45 AM

QUOTE

Est-ce que je dois déclarer la zone 4 en premier afin que celle-ci ne soit pas décalée par les zones précédentes ? mais si c'est le cas je ne comprends pas le sens du mot absolu du positionnement.

Un élément en positionnement absolu se place par rapport à son dernier conteneur positionné. Si l'un de ses conteneurs est positionné, il se place par rapport à lui, sinon il se place par rapport au document entier (body).

-> http://css.alsacreations.com/Bases-et-indi...-balises-en-CSS

Voici comment je ferais ton modèle :

CODE

<body>

<div id="zone1">largeur et hauteur fixe</div>

<div id="zone2">

<p>largeur fixe et hauteur variable</p>

<p>bla bla bla</p>

<p>bla bla bla</p>

<p>bla bla bla</p>

<p>bla bla bla</p>

</div>

<div id="zone3">largeur et hauteur fixe</div>

<div id="zone4">largeur et hauteur fixe</div>

</body>

CODE

body {

margin: 0;

padding: 0;

}

#zone1, #zone2, #zone4 {

width : 300px;

}

#zone1 {

height: 50px;

background: #ccffff;

}

#zone2 {

background: #ff66ff;

}

#zone4 {

height: 50px;

background: #6633ff;

}

#zone3 {

position: absolute;

top: 50px;

left: 300px;

width: 100px;

height: 150px;

background: #ccff00;

}

PS : pourrais-tu éviter de poster des images immenses qui déforment tout le forum (en tout cas sur mon écran) ?

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.