Superposition de div

Répondre
sparh
le 18/04/2007 à 16:13
sparh
Déconnecté
Webmaster en herbe
Salut,
je cherche donc à superposer 2 div.

Exemple:
  1.  
  2. <style>
  3. .banniere {
  4. width:1024px;
  5. height:163px;
  6. margin:auto;
  7. top:0;
  8. }
  9.  
  10. .div_superpose {
  11. width:1024px;
  12. height:163px;
  13. margin:auto;
  14. position:absolute;
  15. top:0;
  16. z-index:2;
  17. }
  18. </style>
  19.  

Le problème c'est qu'avec position:absolute le margin:auto n'est plus pris en compte et du coup div_superpose change de place suivant la taille de l'écran.
(j'ai essayé de rajouter left:50%; mais le problème reste le même!)

J'éspère avoir été clair...
Merci d'avance
Keika
le 20/04/2007 à 11:10
Keika
Déconnecté
Le PHP --> C'est dur !
on peut voir le code HTML ?
sparh
le 24/04/2007 à 00:04
sparh
Déconnecté
Webmaster en herbe
  1.  
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style>
  7. .banniere {
  8. width:1024px;
  9. height:163px;
  10. margin:auto;
  11. top:0;
  12. background-image:url(file:///C|/Documents and Settings/gaspard toussaint/Mes documents/Site Internet/Jeux.flash.online/images/BANNIERE.png)
  13. }
  14.  
  15. .div_superpose {
  16. width:500px;
  17. margin:auto;
  18. position:absolute;
  19. z-index:2;
  20. margin-left:50%;
  21. top:0;
  22. background-image:url(../Photos/mob21_1143905236.jpg)
  23. }
  24. </style>
  25. </head>
  26.  
  27. <body>
  28. <div class="banniere"></div>
  29. <div class="div_superpose"><h1>je suis au centre</h1></div>
  30.  
  31. </body>
  32. </html>
  33.  


Voilà , je n'ai toujours pas trouvé de solution donc si vous avez une idée...
Daniel_P
le 24/04/2007 à 01:24
Daniel_P
Déconnecté
J'aime bien ce site.
Salut, tu as juste à faire superposer ton <div> sur l'autre avec des margin...

C'est surement pas compliqué ;)...
Keika
le 24/04/2007 à 09:18
Keika
Déconnecté
Le PHP --> C'est dur !
quelle super reponse !

Je pense plutot qu'il faut que tu vires ton margin: auto;
parceque ca determine une difference automatique entre les bordure superieur de ton div avec la bordure inferieure du div precedent. et donc ton z-index ne fonctionne pas. si tu veux un margin auto pour la gauche et la droite fait:

margin-left: auto ;
margin-right: auto ;

Bonne chance
Daniel_P
le 24/04/2007 à 13:31
Daniel_P
Déconnecté
J'aime bien ce site.
Que voulais tu que je dise de plus ? ^^

C'est avec les margin qu'on arrange ça ^^.

Sinon j'ai remarqué que ta superposition est du texte, alors pourquoi ne pas le mettre tout de suite sur ta bannière et par la suite tu le positionne avec le CSS.

  1.  
  2. <div id="banniere">
  3. <div class="texte_banniere">
  4. <p>
  5. Je suis le texte
  6. </p>
  7. </div>
  8. </div>
  9.  


Et dans le CSS tu positionne ta banniere et ensuite ton texte.
sparh
le 24/04/2007 à 18:35
sparh
Déconnecté
Webmaster en herbe
Daniel_P: merci mais en fait je veux placer ce div à la fin de mon code (pour des raison de référencement)

Keika: OUIIIII ;) en effet c'était le margin:auto , en tous cas j'ai fait un test rapide et sous ff ca marche.
encore merci ;)
Keika
le 28/04/2007 à 06:00
Keika
Déconnecté
Le PHP --> C'est dur !
Merci a toi !! Pour une fois que je peux aider sans dire une betise... ^_^
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Php - Breizh Blog