Superposer des div dans des div

Superposer des div dans des div - HTML/CSS - Programmation

Marsh Posté le 26-07-2010 à 17:37:21    

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
Reply

Marsh Posté le 26-07-2010 à 17:37:21   

Reply

Marsh Posté le 26-07-2010 à 18:28:38    

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.  
  8. <body> 
  9.  
  10.     <div style="width:1000px; height:150px; margin:auto; background-color:#F00"> 
  11.         <div style="position:relative; top:50px; left:50px; width:300px; height:50px; background-color:#ff0;"> 
  12.         </div> 
  13.     </div> 
  14.      
  15. </body> 
  16. </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.
Reply

Marsh Posté le 26-07-2010 à 18:35:14    

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
Reply

Marsh Posté le 26-07-2010 à 18:39:10    

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.
Reply

Marsh Posté le 26-07-2010 à 18:46:59    

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
Reply

Marsh Posté le 26-07-2010 à 19:06:37    

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.
Reply

Marsh Posté le 27-07-2010 à 14:57:23    

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
Reply

Marsh Posté le 27-07-2010 à 15:55:41    

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.
Reply

Marsh Posté le 27-07-2010 à 15:58:00    

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
Reply

Marsh Posté le 27-07-2010 à 16:02:25    

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.
Reply

Marsh Posté le 27-07-2010 à 16:02:25   

Reply

Marsh Posté le 27-07-2010 à 16:07:14    

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.
Reply

Marsh Posté le 27-07-2010 à 16:13:49    

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
Reply

Marsh Posté le 27-07-2010 à 16:21:42    

oui, +ou-


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

Marsh Posté le 27-07-2010 à 16:21:56    

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
Reply

Marsh Posté le 27-07-2010 à 19:06:21    

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


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed