Positionnement : Float? relative? Z-index?

Bonjour à tous...
je viens poster car j'arrive pas à positionner correctement mes div, même après avoir lu les très bon tutoriels d'alsacreation et d'autres aussi.


Je vous explique mon probleme.


donc en fait j'ai trois div frere issus du meme div parent soit :



en fait donc tel que avec mon CSS les div se positionne dans le flux les uns en dessous des autres...

en fait je souhaiterais obtenir le menu et le formulaire en haut, et le div contenu en dessous.

en fait j'ai appliqué à div menu float:left; et à div formulaire:right;

ce qui me donne :



ce qu'il se passe c'est que je n'arrive pas à faire passer le div contenu en dessous. et c la que je ne comprends pas .

faut il utiliser z-index??? d'ailleurs dans quel cas utilise t on z-index.?? ave float, ave relative?

j'ai bien essayer en mettant z-index:1; pour menu, 2 pour formulaire et 3 pour le contenu mais ca ne change pas ???

qulqu'un peut il me venir en aide? merci d'avance.

Aurore.

Bonjour Aurore,

Avant de rentrer dans les détails, il est évident que faire passer tes div menu et formulaire avant le contenu dans ton code html simplifierait beaucoup les choses, mais j'imagine que si tu cherches à modifier l'ordre en css, c'est que ton code html ne peut être modifié.

Pour répondre à tes différentes questions:

Aurore22 a écrit :
faut il utiliser z-index???

Non, pas ici. La propriété z-index permet de gérer les superpositions d'éléments au niveau de la profondeur (axe Z).

Aurore22 a écrit :
d'ailleurs dans quel cas utilise t on z-index.??

Lorsque tu désires créer des effets d'empilage, faire passer un certain élément au-dessus d'un autre au niveau de la profondeur, etc.

Aurore22 a écrit :
avec float, avec relative?

La propriété z-index n'est utilisable que lorsque l'élément visé est positionné (c'est à dire qu'il bénéficie d'une propriété position), z-index est donc inopérant dans le cas d'un flottant.

Aurore22 a écrit :
qulqu'un peut il me venir en aide? merci d'avance.

Si ton menu ou ton formulaire sont de hauteurs variables, tu vas avoir du mal. Sinon, quelque chose dans cet esprit devrait t'aider:

#centre {position:relative; padding-top:5em;}
#menu,#formulaire {position:absolute; top:0; width:48%;}
#formulaire {right:0;}

Bonjour Aurore,

Tu es du sud ? ( c'est pour le "ave" )
Pour que nous puissions t'aider il faudrait que tu postes le code html et ta feuille de style entre les balises [ code] & [ /code] sans espace ou mieux que tu postes un lien vers ta page en ligne

A priori rien d'insoluble pour ton problème, et nous devrions sans aucun doute pouvoir t'aider ( bonne nouvelle non ?)

Un peu de lecture pour la route

A bientôt

[ Edith] Il est trop rapide ce Ben [ /Off]
Modifié par 6l20 (27 Oct 2007 - 15:46)

Merci Benjamin, 6120, pour votre particiaption rapide...

lol, non je ne suis pas du Sub plutot de bretagne, peut des probleme avec les c .

je vais essayer de poster ma feuille de style...

Pour benjamin: je vais essayer ca ... en fait oui je ne peux pas modifier mon code de ma page xhtml... super ton explication pour index, je ne pensais pas que ct pour la profondeur... notion comprise.

sinon quand j'utilise position absolute on ne peut pas utiliser float.

Aurore22 a écrit :
Bonjour à tous...
je viens poster car j'arrive pas à positionner correctement mes div, même après avoir lu les très bon tutoriels d'alsacreation et d'autres aussi.

c'est peut être une des conséquences désastreuses qui surviennent quand on oubli le S d'AlsacreationS
Modifié par gaelgerard (27 Oct 2007 - 21:49)

oula en effet, c'est bien possible lol . Je m'en excuse...

En fait j'ai un probleme qui reste sur le fond dans le même contexte de positionnement, je me permets donc de poster dans le même post (pléonasme), mais cela concerne des images... Si je ne poste pas au même endroit, signalez le moi et je posterai dans un nouveau sujet. Je ne veux pas polluer le forum avec mes problèmes de débutante.

En fait j'ai un div gallerie qui contient 4 images
j'ai mis comme propriété du div gallerie width 650px

j'aimerais que ces 4 images se positionnent les unes à coté des autres sur deux lignes c'est à dire deux images sur la premiere et deux images sur la seconde.

ces images ont une largeur égale de 320px.
dois je utiliser float ou relative?

<div id="gallerie">
<img src="img/vague1.jpg" class="image_gallerie"  alt="vague1" title="vague1"/>
<img src="img/vague2.jpg" class="image_gallerie"  alt="vague2" title="vague2"/>
<img src="img/vague3.jpg" class="image_gallerie"  alt="vague3" title="vague3"/>
<img src="img/vague4.jpg" class="image_gallerie"  alt="vague4" title="vague4"/>
		</div>

dois je mettre float:left pour la premiere et forcer sur la même ligne pour la deuxieme ? et pareil pour la deuxime ligne??

merci d'avance.
Aurore

Bonjour,

Pourquoi diable ne pas aborder la question franchement pour ce qu'elle est, c'est à dire un problème de mise en page. Qui se résoud avec un tableau de présentation. Sans perdre davantage de temps. Hum ?

<edit>(C'est pas honteux, les tableaux de mise en page. Juste pas bien vu aujourd'hui sur le plan théorique, par l'opinion commune. Mais probant, et même, si on creuse vraiment, vraiment, la théorie... juste la réplique actuelle de ce qu'on fera demain avec CSS et un certaine propriété display ).</>

Plus sérieusement: ce sont des détails avec lesquels il ne faut pas perdre de temps.
Modifié par Laurent Denis (28 Oct 2007 - 11:53)