Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2335 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Superposer des div dans des div

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Superposer des div dans des div

n°2011897
zezette
"Allez hop, au revoir"
Posté le 26-07-2010 à 17:37:21  profilanswer
 

Bonsoir à tous,
 
Mieux vaut tard que jamais, je découvre les div :)
 
J'ai un div (de 1000 sur 150) contenant une image (de 1000 sur 150) que je voudrais centrer sur la page (le div). Au dessus de ce div, en 50-50, je voudrais un autre div contenant une image gif transparente.
 
J'ai fait ceci :
 

Code :
  1. <div align="center">
  2. <div style="width:1000px; height:150px"><div style="position:relative; top:50px; left:50px; width:300px"><img src="legiftransparent.gif" /></div>
  3.     <img src="lapremiereimage.jpg" /><img src="la2eimage.jpg" /><img src="la3eimage.jpg" /><img src="la4eimage.jpg" /></div>
  4. </div>


 
Mes problèmes :  
1. il y a une zone vide au dessus du 2e div (créée par le 3e div)
2. Dans le navigateur, le 3e div est centré et non en 50-50 (mais OK dans Dreamweaver et OK si je rajoute un align="left" dans le 2e div)
 
Qqn peut m'aider ? :)


Message édité par zezette le 26-07-2010 à 18:56:13

---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
mood
Publicité
Posté le 26-07-2010 à 17:37:21  profilanswer
 

n°2011913
abais
Posté le 26-07-2010 à 18:28:38  profilanswer
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4.     <title>Ma page</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. </head>
  7. <body>
  8.     <div style="width:1000px; height:150px; margin:auto; background-color:#F00">
  9.         <div style="position:relative; top:50px; left:50px; width:300px; height:50px; background-color:#ff0;">
  10.         </div>
  11.     </div>
  12.     
  13. </body>
  14. </html>


Je n'ai pas d'image à mettre, d'ou les background-color (pour symboliser les div)...
Ta 1ere div ne sert à rien, on peut centrer un élément grâce à la propriété margin:auto en css...
Bien entendu, tu dois mettre ta 1ere image en background CSS, sinon la superposition ne marche pas (avec cette methode du moins...)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2011915
zezette
&#034;Allez hop, au revoir&#034;
Posté le 26-07-2010 à 18:35:14  profilanswer
 

Le soucis c'est que j'ai simplifié ma question. En réalité, il y a 4 images jpg l'une à coté de l'autre. Je ne peux donc pas les mettre en background (à moins de faire 4 div ?) mais alors j'ai autant de chance de les coller en photoshop et de taper le gif par dessus, à sa place... mais alors ça perd de son intérêt didactique :)
 


---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
n°2011916
abais
Posté le 26-07-2010 à 18:39:10  profilanswer
 

En effet, ma solution n'est donc pas adapté...
Fais un montage dans photoshop juste pour nous montrer le resultat que tu souhaite...
Ces 4 images, c'est dans ta 2eme div ? 3eme ? Tu souhaites superposer des images ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2011918
zezette
&#034;Allez hop, au revoir&#034;
Posté le 26-07-2010 à 18:46:59  profilanswer
 

Je t'ai envoyé un mp avec le lien et ai modifié ma question en tenant compte du fait qu'il y a plusieurs images


---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
n°2011922
abais
Posté le 26-07-2010 à 19:06:37  profilanswer
 

Pas de MP, on est sur un forum...
Sinon dans ton exemple, je vois pas pourquoi tu as 4 images, rassemble les...
Ensuite tu la mettras en background CSS d'une div qui contiendra ton logo, puis ton menu... et là tu n'auras pas de pb de positionnement...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2012161
zezette
&#034;Allez hop, au revoir&#034;
Posté le 27-07-2010 à 14:57:23  profilanswer
 

Je sais qu'en rassemblant les images ca résoudra le problème, mais je veux comprendre où est l'erreur... si c'était du texte, je ne pourrais pas le transformer en 1 seule image et le mettre en arrière-plan :)
 
Voici quelque chose de plus visuel...
 
http://www.pipas.org/problemedediv.html


Message édité par zezette le 27-07-2010 à 15:02:12

---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
n°2012187
abais
Posté le 27-07-2010 à 15:55:41  profilanswer
 

Le problème vient de la superposition...
À partir du moment où une <div> (ou autre élément de type 'block') possède une position "relative" (ce qui est le cas par défaut), elle a un certain espace d'encombrement (qui correspond à sa taille et ses margin).
Du coup, si une div fait 60px de hauteur, peut importe ou tu la places*, l'élément suivant (du même conteneur, un "frère" ) se placera par défaut 60px plus bas (par rapport à l'origine de son parent)...
La seule façon de palier ça est d'utiliser le positionnement absolute, qui permet de placer où bon te semble un élément par rapport au parent sans "encombrer" ses frères...

 

Mets donc ta div "du dessus" en absolute...

 

*: C'est pas toujours vrai selon les navigateurs, etc...


Message édité par abais le 27-07-2010 à 15:59:36

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2012191
zezette
&#034;Allez hop, au revoir&#034;
Posté le 27-07-2010 à 15:58:00  profilanswer
 

J'y ai pensé, mais ça marche pas non plus (je suis chiant t'as le droit de le dire :)).  
 
Si je mets en 50-50 le div contenant l'image du dessus, il est en 50-50 par rapport à la fenêtre et pas par rapport au div "contenant" (images du dessous)
 
http://www.pipas.org/problemedediv.html


Message édité par zezette le 27-07-2010 à 16:08:31

---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
n°2012193
abais
Posté le 27-07-2010 à 16:02:25  profilanswer
 

Chez moi ça marche... Qu'est-ce que tu met en 0-0 ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
mood
Publicité
Posté le 27-07-2010 à 16:02:25  profilanswer
 

n°2012196
abais
Posté le 27-07-2010 à 16:07:14  profilanswer
 

Si ça peut t'aider, met le contenu texte de la div parent avant tes 2 div, ça te feras comprendre...
Si tu veux pas que le positionnement de ces 2 div soit influencé par le texte du parent (qui est leur frere), mets leur une position absolute (au 2)...


Message édité par abais le 27-07-2010 à 16:08:53

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2012198
zezette
&#034;Allez hop, au revoir&#034;
Posté le 27-07-2010 à 16:13:49  profilanswer
 

Si je comprend bien, une position relative, c'est une position par rapport à son frère ?


---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
n°2012201
abais
Posté le 27-07-2010 à 16:21:42  profilanswer
 

oui, +ou-


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2012203
zezette
&#034;Allez hop, au revoir&#034;
Posté le 27-07-2010 à 16:21:56  profilanswer
 

Je crois que j'ai trouvé. En fait le div contenant (le père) doit avoir une position absolute ou relative (à l'origine, je n'avais rien précisé. Je suppose que par défaut, il est static, inherit ou fixed). A partir de ce moment, les positions absolute fonctionnent à partir du père


Message édité par zezette le 27-07-2010 à 16:22:36

---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
n°2012248
abais
Posté le 27-07-2010 à 19:06:21  profilanswer
 

http://www.alsacreations.com/tuto/ [...] #positions


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Superposer des div dans des div

 

Sujets relatifs
Superposer des divSuperposer 2 images dans un bouton
Superposer diapo flash et photoDécalage/saut de ligne avec des div - Superposer des images
Css: superposer deux images dans un headerSuperposer 2 Images SWT Java
superposer des imagesSuperposer 2 images avec gestion de transparence ...
Superposer des imagesComment superposer deux images sur un JButton?
Plus de sujets relatifs à : Superposer des div dans des div


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR