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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2018536
djodjolyon
Posté le 23-08-2010 à 19:30:38  profilanswer
 

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
mood
Publicité
Posté le 23-08-2010 à 19:30:38  profilanswer
 

n°2018539
David Bori​ng
Posté le 23-08-2010 à 20:49:55  profilanswer
 

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

n°2018563
djodjolyon
Posté le 24-08-2010 à 01:42:20  profilanswer
 

: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 ;)  


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

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

 

Sujets relatifs
Formulaire et texte qui disparaittexte qui s'affiche au survol de la souris
remplir une base de donnée à l'aide d'un fichier texteAjouter du texte à un copié collé en JS ?
[ORACLE] Index spatial avec DOMIDX_OPSTATUS='FAILED'[PHP] gd, détecter si une photo a été prise en portrait
[PERL?] interface texte avec gestion des touches directionnelles[Résolu] 550 index.php: Access is denied
index google desktop 
Plus de sujets relatifs à : [Résolu] Div avec photo et texte pour index gallerie


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