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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  superposer 2 div

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

superposer 2 div

n°1190945
bixibu
Ca ... c'est fait!
Posté le 02-09-2005 à 23:10:13  profilanswer
 

Salut
 
Voila j'aimerais savoir comment superposer 2 div..
 
Je sais comment définir laquelle va au dessous ou au dessus de l'autre (z-index) mais je n'arrive pas à mettre les div exactement au meme endroit
 
ps:les divs font exactement la meme taille et doivent donc se situer au meme endroit..
 
Je suis pas un as du positionnement, je l'avoue et continu a chercher de mon coté
 
merci

mood
Publicité
Posté le 02-09-2005 à 23:10:13  profilanswer
 

n°1192414
lordashram
Pour Marmot !!!
Posté le 05-09-2005 à 16:46:40  profilanswer
 

dans le style (enfin la CSS)
div.La_class_de_ta_div
{
    position:absolute;
    top:20%;
    left:20%
}
 
voilà, après tu peux galérer sur le scrolling, et sur une div placée trop bas donc qui ne s'affiche plus, je te conseille de placer ça en dynamique en JavaScript et d'aller faire un tour sur http://www.toutjavascript.com

Message cité 1 fois
n°1204485
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 15:33:15  profilanswer
 

merci beaucoup pour ta reponse je vais tester ca tout de suite
 
 
ps:cette methode n'est pas compatible avec beaucoup de navigateur il me semble?
 
merci

n°1204496
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 15:46:30  profilanswer
 

Re ;)
 
Bon alors ca ne marche pas, enfin ca marche mais pas comme je veut ;)
 
En fait sur ma page, j'affiche des petites annonces (issues d'une base de données : donc je fais une boucle php qui affiche a la suite ces annonces pré-formtés)
 
Or le absolute la, si j'ai bien compris il affiche tout les images l'une par dessus l'autre au meme endroit sur le site ?
 
un ptit bout de code pour mieu comprendre (jespere :p)
 

Code :
  1. if ($donnees['vendu'] == 1) { // la ca boucle depuis la bdd
  2.                                     ?>
  3.                                     <div class="photo">
  4.                                          <a href="photos_maison/<? echo $donnees['photo_prod']; ?>">
  5.                                               <img border="0" src="photos_maison/mini_<? echo $donnees['photo_prod']; ?>" width="100%">
  6.                                          </a>
  7.            </div>   
  8.                                     <div class="vendu" >
  9.                                          <img border="0" src="images/logo_vendu.gif" />
  10.                                     </div>
  11.                                     <?     
  12.                                    }
  13.                                    else {
  14.                                    ?>
  15.                                    <div class="photo">
  16.                                            <a href="photos_maison/<? echo $donnees['photo_prod']; ?>">
  17.                                                <img border="0" src="photos_maison/mini_<? echo $donnees['photo_prod']; ?>" width="100%">
  18.                                            </a>
  19.           </div>
  20.                                   <?
  21.                                    }


 
css :

Code :
  1. .photo{position:absolute; top:20%; left:20%; border:1px solid #00B4EA; z-index:0;}
  2. .vendu {position:absolute; top:20%; left:20%; z-index:1; margin:0; border:0}


 
et allez la totale le screen ki explik mieu ke le reste :p  
 
http://bixibi.free.fr/tien.jpg
etc..

n°1204507
gatsusat
Posté le 21-09-2005 à 16:02:32  profilanswer
 

encore plus simple :  
 
Deux div imbriqué l'un dans l'otre
 
<div class="photomaison" style="background-image:url(photodelamaison.jpg)">
<div class="vendue">
</div>
</div>
 
et en CSS :
.photomaison {
  background-position: left top;
background-repeat : no-repeat;
height: 50px;
width: 100px;
}
.photomaison .vendue {
 background : transparent url(imgvendu.gif) no-repeat top left;
 height:50px;
}

Message cité 1 fois
n°1204517
esox_ch
Posté le 21-09-2005 à 16:06:43  profilanswer
 

lordashram a écrit :

dans le style (enfin la CSS)
div.La_class_de_ta_div
{
    position:absolute;
    top:20%;
    left:20%
}
 
voilà, après tu peux galérer sur le scrolling, et sur une div placée trop bas donc qui ne s'affiche plus, je te conseille de placer ça en dynamique en JavaScript et d'aller faire un tour sur http://www.toutjavascript.com


 
 
Ca merite au minimum la pendaison sur la place publique une hérésie d'une telle taille


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
n°1204533
afbilou
pouet your life
Posté le 21-09-2005 à 16:13:49  profilanswer
 

bah non ! pas de background !
 
<dl>
<dt>
<img src="" alt="Maison" class="foto" />
<img src="" alt="Vendu par ABI" class="vendu" />
</dt>
<dd>
Maison en pierre ... tout ca ... trop bien
</dd>
</dl>
 
dl dt {
position: relative;
float: left;
clear: both;
width: 200px;
}
 
dl dt img.apercu {
position: absolute;
top: 0;
left: 0;
}
 
dl dt img.vendu {
position: absolute;
top:0;
left:0;
}
 
dl dd {
margin-left: 200px;
}


Message édité par afbilou le 21-09-2005 à 16:15:11
n°1204563
FlorentG
Posté le 21-09-2005 à 16:38:39  profilanswer
 

gatsusat a écrit :

encore plus simple :  
 
Deux div imbriqué l'un dans l'otre
 
<div class="photomaison" style="background-image:url(photodelamaison.jpg)">
<div class="vendue">
</div>
</div>
 
et en CSS :
.photomaison {
  background-position: left top;
background-repeat : no-repeat;
height: 50px;
width: 100px;
}
.photomaison .vendue {
 background : transparent url(imgvendu.gif) no-repeat top left;
 height:50px;
}


T'as oublié de mettre "Vendu" dans le <div>, et d'utilise un FIR... Sinon, si on désactive les image, si on est malvoyant ou si on est Google, bah on verra pas que la maison est vendue :(

n°1204576
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 16:47:46  profilanswer
 

Salut les gars merci pour vos reponses ;)
 
Laquelle des deux methodes vous semble la meilleur et la plus compatible avec tous les navigateurs? (web-browser pour faire cool & hipe :p )
 
pendant ce tps je les teste
 
EDIT: la methode de gatsusat me pose un probleme : je ne peut plus cliquer sur l'image de la maison (pour lagrandir).. :(


Message édité par bixibu le 21-09-2005 à 16:49:32
n°1204579
FlorentG
Posté le 21-09-2005 à 16:48:40  profilanswer
 

La deuxième est un peu mieux

mood
Publicité
Posté le 21-09-2005 à 16:48:40  profilanswer
 

n°1204604
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 17:15:55  profilanswer
 

Effectivement la 2eme solution est parfaite, merci :) mais j'arrive pas a l'appliquer a mon code :(
 
 c'est super chiant, surtout que les dl dt dd je connaissait pas
je vous filerais un bout de code si jy arrive vraiment pas
 

n°1204606
FlorentG
Posté le 21-09-2005 à 17:20:24  profilanswer
 

Tu connaissais pas ? Alors apprend l'HTML ! [:dawa] Ca te sera très utile pour faire des sites webs, l'HTML ;)

n°1204613
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 17:29:18  profilanswer
 

Arf ok.. bon j'ai reussi mais le probleme est toujours le meme....
 
toutes les images vopnt a 1 endroit de lecran (top left), OR j'ai plusieurs annonces moi.. a des endroits differents de la page (normal les annonces se suivent verticalement)
 
Alors ya t'il une solution
ps:mon but est d'afficher  "VENDU" pr dessus une image quand la maison est vendue, peut etre ya til d'autre methodes pour y arriver.
 
merci
screen :
http://bixibi.free.fr/tien2.jpg
 
EDIT: apprendre le html? look mon screen, mon site je l'ai pas fait avec frontpage.. je connais ce dont jai besoin en html css et j'en apprends tous les jours.


Message édité par bixibu le 21-09-2005 à 17:30:44
n°1204621
omega2
Posté le 21-09-2005 à 17:35:25  profilanswer
 

Tes dexu div, tu les a bien mis dans le div devant contenir le texte et l'image?

n°1204623
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 17:37:09  profilanswer
 

oui oui
 
voila mon code si vous voulez (c un peu gros dsl) :
html :

Code :
  1. <div class="cadre_annonce_bas">
  2. <div class="conteneur_photo">
  3.             
  4.                      <?
  5.                      if ($donnees['vendu'] == 1) {
  6.                      ?>
  7.                      <div class="photo">
  8.                               <a href="photos_maison/<? echo $donnees['photo_prod']; ?>">
  9.                                    <img  class="foto" border="0" src="photos_maison/mini_<? echo $donnees['photo_prod']; ?>" width="100%">
  10.                                </a>
  11.       <img border="0" class="vendue" src="images/logo_vendu.gif" />
  12.                      </div>
  14.                                    
  15.                      <?     
  16.                       }
  17.                       else {
  18.                       ?>         
  19.                                                
  20.                       <div class="photo">
  21.                              <a href="photos_maison/<? echo $donnees['photo_prod']; ?>">
  22.                                    <img border="0" src="photos_maison/mini_<? echo $donnees['photo_prod']; ?>" width="100%">
  23.                              </a>
  24.                       </div>   
  25.                        <?
  26.                        }
  27.                         ?>
  29.                                    
  30.         
  31. </div>
  32.                          
  33. <div class="description_photo">
  34.  <div class="lieu"><? echo $donnees['lieu_prod']; ?></div>
  35.                           <div class="special"><? echo $donnees['special_prod']; ?></div>
  36.  <div class="texte">
  37.   <div class="type_produit"><? echo $donnees['type_prod_gras']; ?></div>
  38.                                                <? echo nl2br($donnees['texte_prod']); ?>
  39.               </div>
  40.  <div class="lieu">Prix : <? echo $donnees['prix_prod']; ?></div>
  41. </div>
  42.                        
  43. </div> <!-- fin cadre_annonce_bas -->


css:

Code :
  1. .conteneur_photo {float:left; width: 215px; text-align:left; font-size: 12px;}
  2. .photo{ border:1px solid #00B4EA; z-index:0;}
  3. .vendu {position:fixe;  top:20%; left:20%; z-index:1; margin:0; border:0}
  4. .foto { position: absolute; top: 0; left: 0; } 
  5. .vendue { position: absolute; top:0; left:0; }
  6. .cadre_annonce_bas, {width:100%; margin:5px;  margin-top:0px;  padding:5px; background: url(images/fin-bleu.gif) top right no-repeat;   float:left;  text-align:left; padding-left:5px; border:2px solid #00B4EA; border-bottom:0px; margin-bottom:0px; font-size:12px;}
  7. .description_photo {float:left; padding-left:10px; width: 215px;text-align:left; }
  8. .lieu {font-size:13px; font-weight:bold; color:#00B4EA; }
  9. .special {font-size:10px; color:red;}
  10. .texte {font-size: 12px; margin-top:10px; margin-bottom:10px;}
  11. .prix {font-size:13px; font-weight:bold; color:red; text-decoration:underline;}
  12. .type_produit {display:inline; font-weight:bold; padding-right:4px;}


(c le bordel je sais  joptimiserais apres)


Message édité par bixibu le 21-09-2005 à 17:42:34
n°1204642
afbilou
pouet your life
Posté le 21-09-2005 à 18:13:48  profilanswer
 

J'ai mis des couleurs a la palce des images pour pas m'embeter.
Le principe est la :D
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  5. <head>
  6. <title>Test</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  9. <style type="text/css">
  10.  dl dt{
  11.   position:  relative;
  12.   float:   left;
  13.   clear:   both;
  14.   width:   200px;
  15.   margin-bottom: 30px
  16.  }
  18.  dl dt img.apercu {
  19.   position:  absolute;
  20.   top:   0;
  21.   left:   0;
  23.   width:    180px;
  24.   height:    100px;
  25.   background-color: green;
  26.  }
  28.  dl dt img.vendu {
  29.   position:  absolute;
  30.   top:   0;
  31.   left:   0;
  33.   width:    160px;
  34.   height:    20px;
  35.   background-color: red;
  36.  }
  38.  dl dd {
  39.   margin-left: 210px;
  40.   margin-bottom: 30px
  41.  }
  42. </style>
  43. </head>
  45. <body>
  47. <h1>Site</h1>
  49. <p>
  50.  Un super exemple de la mort !
  51. </p>
  53. <dl>
  54.  <dt>
  55.   <img src="" alt="Maison en papier" class="apercu" />
  56.   <img src="" alt="Vendu par ABI" class="vendu" />
  57.  </dt>
  58.  <dd>
  59.   Maison en papier ... tout ca ... trop bien
  60.   <br />
  61.   Le top ... vendu avec un toit et une poignée a la porte !
  62.   <br />
  63.   Le top ... vendu avec un toit et une poignée a la porte !
  64.   <br />
  65.   Le top ... vendu avec un toit et une poignée a la porte !
  66.   <br />
  67.   Le top ... vendu avec un toit et une poignée a la porte !
  68.   <br />
  69.   Le top ... vendu avec un toit et une poignée a la porte !
  70.   <br />
  71.   Le top ... vendu avec un toit et une poignée a la porte !
  72.   <br />
  73.   Le top ... vendu avec un toit et une poignée a la porte !
  74.  </dd>
  76.  <dt>
  77.   <img src="" alt="Grotte" class="apercu" />
  78.   <img src="" alt="Vendu par ABI" class="vendu" />
  79.  </dt>
  80.  <dd>
  81.   Grotte ... garantie sans humidite ... voisins peu bruyants
  82.   <br />
  83.   Le top ... vendu avec la foret autour !
  84.  </dd>
  85. </dl>
  87. </body>
  89. </html>

n°1204644
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 18:16:41  profilanswer
 

excellent  ;)
 
je vais essayer d'adapter a mon site ;)
 
merci beaucoup :)

n°1204647
afbilou
pouet your life
Posté le 21-09-2005 à 18:18:59  profilanswer
 

Ne ruine pas trop mes efforts avec du code pas beau hein ? :)

n°1204678
bixibu
Ca ... c'est fait!
Posté le 21-09-2005 à 19:23:17  profilanswer
 

Bon ca marche :p merci afbilou
 
C'est pas trop crade.. j'ai juste comment dire.. bidouiller :D
 
la balise dd modifie laffichage des que je la met autour de la description (genre ca me rajoute un margin-left de 30 ... et jai cherché partout jvois pas d'ou ca vient)
 
M'enfin dans l'ensemble ca marche :p

n°1204749
FlorentG
Posté le 21-09-2005 à 21:49:49  profilanswer
 

C'est le style par défaut : un peu de marge sur les dd

n°1204799
bixibu
Ca ... c'est fait!
Posté le 22-09-2005 à 02:16:06  profilanswer
 

serieu ... je comprend mieu lol
 
merci ;) du coup c'est tout propre :d

mood
Publicité
Posté le   profilanswer
 


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

  superposer 2 div

 

Sujets relatifs
superposer verticalement deux div [résolu]Superposer des images, c'est possible en htm?
[RESOLU] - Superposer 2 Div en position:relative ?gerer des calques pour superposer des images
dessin , superposer 2 bmp , comment faire ?Superposer deux fichiers postscript
[borland] Comment superposer 2 sons ?[JS] superposer une image sur une autre (+ posit° de la sourie)
[Débutant][Résolu] Comment superposer 2 JLabel ?superposer 2 tableaux ?
Plus de sujets relatifs à : superposer 2 div

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.149 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)