Deux colonnes, éléments à la même hauteur

Deux colonnes, éléments à la même hauteur - HTML/CSS - Programmation

Marsh Posté le 05-12-2010 à 17:41:55    

Bonsoir à tous,
 
Pour une mise à page html, voici ce dont j'ai besoin :
- Mise en page sur deux colonnes.
- Colonne de droite : Du texte
- Colonne de gauche, des images.
 
Le problème : Je souhaite que la position des images se fasse par rapport au  texte, c'est à dire que l'image reste en face du texte en relation.
 
Sachant que le div du texte a une largeur variable en fonction de la largeur du navigateur.
 
Quelqu'un sait comment faire ça sans sectionner le texte en plusieurs div?
 
Merci,
vw.


---------------
The best way to accelerate a computer running windows is at 9.8m.s-2
Reply

Marsh Posté le 05-12-2010 à 17:41:55   

Reply

Marsh Posté le 06-12-2010 à 08:53:07    

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div {
  5. border:1px solid red;
  6. width:50%;
  7. }
  8. p img {
  9. border:1px solid green;
  10. width:100px;
  11. height:100px;
  12. float:right;
  13. }
  14. p {
  15. clear:right;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <div>
  23. <p>
  24.  <img src="#" />
  25.  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  26. </p>
  28. <p>
  29.  <img src="#" />
  30.  Maecenas purus neque, posuere id elementum vel,
  31.  </p>
  33. <p>
  34.  <img src="#" />
  35.  Duis pharetra nisi a sem ultrices tincidunt.
  36. </p>
  38. <p>
  39.  <img src="#" />
  40.  Praesent a lectus libero. Phasellus non massa sodales
  41. </p>
  42. <br clear="right"/>
  43. </div>
  44. </html>


Message édité par fluminis le 06-12-2010 à 08:53:59

---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 06-12-2010 à 09:10:29    

Merci fluminis, c'est nickel!
Juste un détail, te semble t'il possible de faire en sorte que le texte ne se glisse pas sous les photos? C'est à dire que le bord droit de la zone de texte s'arrête juste avant les images?
vw.


---------------
The best way to accelerate a computer running windows is at 9.8m.s-2
Reply

Marsh Posté le 06-12-2010 à 10:03:19    

dans ce cas tu seras obligé de mettre le texte dans un div ou un élement de type inline, si tu omets de mettre des p


---------------
Blablaté par Harko
Reply

Marsh Posté le 06-12-2010 à 10:56:19    

Voilà, c'est bien le problème. Je dois contrôler la position d'une image qui est dans un div différent que celui du texte qui contrôle sa position.
J'arrive à m'en sortir a peu près en utilisant un positionnement en X supérieur à la largeur du div, mais ça me semble bancal.
 
vw.


---------------
The best way to accelerate a computer running windows is at 9.8m.s-2
Reply

Marsh Posté le 06-12-2010 à 13:56:22    

ton texte, il provient d'où ? tes images, elles proviennent d'où ?
Pourquoi ne peux-tu pas manipuler le texte comme bon te semble ?
D'où te vient cette limitation de ne pas sectionner le texte en plusieurs div ?


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 06-12-2010 à 14:00:43    

si tu as moyen de rajouter des marqueurs :
 

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .d {
  5. border:1px solid red;
  6. width:50%;
  7. }
  8. .text img {
  9. border:1px solid green;
  10. width:100px;
  11. height:100px;
  12. float:right;
  13. }
  14. .text {
  15. clear:right;
  16. }
  17. div {
  18. border:1px solid green;
  19. margin-right:120px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <div class="d">
  27. <p class="text">
  28.  <img src="#" />
  29.  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  30.  </div>
  31. </p>
  33. <p class="text">
  34.  <img src="#" />
  35.  <div>
  36.  Maecenas purus neque, posuere id elementum vel,
  37.  </div>
  38.  </p>
  39. <br clear="right"/>
  40. </div>
  41. </html>


Message édité par fluminis le 06-12-2010 à 14:01:00

---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 06-12-2010 à 14:03:58    

On ne mets pas des div dans un P, on ne peut mettre que des élément inline
il faut inverser les <div> et les <p> dans ce cas


---------------
Blablaté par Harko
Reply

Marsh Posté le 06-12-2010 à 14:42:26    

Tout est en html (pas de php ni de bdd).
J'ai pas envie de découper le texte en plusieurs div parce que ça fait de la mise en page supplémentaire.
Pour moi, l'idéal, est de mettre le texte en htlm, de rajouter des images, et qu'elles se placent automatiquement au bon endroit, sans se chevaucher et quelque soit la largeur de la fenêtre du navigateur.
Mais bon, si c'est trop galère, je ferai autrement.

 

Merci,
vw.


Message édité par Combi_A_Vendre le 06-12-2010 à 14:42:55

---------------
The best way to accelerate a computer running windows is at 9.8m.s-2
Reply

Marsh Posté le 14-12-2010 à 12:49:20    

Bon, si ça intéresse quelqu'un, j'ai réussi.
1- Le texte est à une marge de 155px du bord du div, comme ça j'ai la place de mettre l'image.
2- Les images sont dans des div float avec l'attribu clear:left. Comme ça, elles se glissent à gauche du texte les unes en dessous des autres sans se superposer

Code :
  1. div.images {
  2.     float: left;
  3.     width: 150px;
  4.     text-align:justify;
  5.     font-size: 12px;
  6.     clear:left;
  7. }
  9. div.texte p,h2,h3{
  10.     padding-left:155px;
  11. }
 


Code :
  1. <div class="texte">
  2. <P>Texte</P>
  3.     <div class="photo">
  4.       <img src="./images/image.jpg"><br>
  5.       L&eacute;gende
  6.     </div>
  8.     <div class="photo">
  9.       <img src="./images/image2.jpg"><br>
  10.       L&eacute;gende 2
  11.     </div>
  12.    
  13.     <P>Autre texte</P>
  14. </div>
 

vw.


Message édité par Combi_A_Vendre le 14-12-2010 à 12:52:07

---------------
The best way to accelerate a computer running windows is at 9.8m.s-2
Reply

Sujets relatifs:

Leave a Replay

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