[Résolu] Div avec photo et texte pour index gallerie

Div avec photo et texte pour index gallerie [Résolu] - HTML/CSS - Programmation

Marsh Posté le 23-08-2010 à 19:30:38    

Bonjour,
Je voudrais faire quelque chose d'assez simple mais je n'y arrive pas.
Je souhaiterai avoir un div principal qui contienne une image à gauche et un texte à droite de l'image.
En fait 2 bloc textes : 1 en haut collé au haut de la div principale et 1 en bas toujours collé au div principal.
Voilà la compo que je veux en gros :
http://howelljonathan.free.fr/img/hdfr1
Voilà le code que j'ai écrit.

Code :
  1. <div style="width:380px; height:80px; display:-moz-inline-stack; display:inline-block;">
  2. <div style="width:80px; float:left;">
  3.     <img src="http://howelljonathan.free.fr/gallery/theatre/events/ambiance1/vignette.jpg" width="80" height="80" />
  4.     </div>
  5. <div style="width:290px; height:80px; float:right; margin:0 0 0 10px;">
  6.      <p style="top:0px;">test 1</p>
  7.         <p style="bottom:0px;">test 2sdf sfd sdf sdf sdf sdf sd fsdf sdf sd fsdf sdf sd fsdfs df sd fsdf sdf sdf sdf sdf sdf sdfsdf sdf sd fsdf sdf sdf sdf </p>
  8. </div>
  9. </div>


Il me donne ceci :
http://howelljonathan.free.fr/img/hdfr2
Je ne comprend pas pourquoi le texte dépasse de ma div principale.
 
Comment faire?
 
Merci


Message édité par djodjolyon le 26-08-2010 à 02:49:20
Reply

Marsh Posté le 23-08-2010 à 19:30:38   

Reply

Marsh Posté le 23-08-2010 à 20:49:55    

Pour employer bottom:0 il faut aussi indiquer position:absolute
Et ce bottom se calcule par rapport au premier parent positionné. Si pas, c'est le body.
Tes p sont donc dans le flux normal, si il y a de la distance entre eux, ce sont les margin/padding donnés par le navigateur (un reset css résoud le problème - regarde mon code)
Ton contenu devient donc plus important que ta hauteur, sors de son conteneur (donne une couleur de fond au div pour comprendre)
 
Pour faire cette boite, mais uniquement celle-là (avec des photos de 80x80), donc pas un code qu'on peut employer pour toute les autres boites, je serais dans ce genre de code minimal
 

Code :
  1. <div class="mod_xx">
  2.     <img src="http://howelljonathan.free.fr/gallery/theatre/events/ambiance1/vignette.jpg"  
  3.         width="80" height="80" alt="un homme avec un écharpe rouge, applaudi" title="" />
  4.     <h4>Titre</h4>
  5.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
  6.          tempor incididunt ut labore et dolore magna aliqua.</p>
  7. </div>


Code :
  1. * {padding:0;margin:0;} /* simple reset */
  2. .mod_xx {overflow:hidden;zoom:1;/*clearer*/width:380px;background:#ccc;
  3. padding:5px;position:relative;}
  4. .mod_xx img {padding:2px;background:#fff;border:1px solid #000;float:left;margin:0 10px 0 0;}
  5. .mod_xx h4 {font-size:13px;}
  6. .mod_xx p {position:absolute;left:98px;bottom:5px;font-size:12px;padding:0 5px 0 0;}


 
Remarques donc le position:relative sur .mod_xx et le positionnement absolu du p
http://imgur.com/wDKJ8.png

Reply

Marsh Posté le 24-08-2010 à 01:42:20    

:jap:  
Ca marche parfaitement...
Je te remercie beaucoup surtout pour les explications et tout.
Je t'avouerai que j'ai un peu de mal à comprendre le fonctionnement avec les css overflow, position et autres...
 
En tout cas merci encore ;)  

Reply

Sujets relatifs:

Leave a Replay

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