quel CSS/html pour avoir un texte qui encercle une image

quel CSS/html pour avoir un texte qui encercle une image - HTML/CSS - Programmation

Marsh Posté le 26-01-2012 à 13:43:41    

Bonjour tout le monde
 
mon soucis est le suivant:
 
j'ai dans une page html une structure avec div de ce genre de schéma:
 
<div id="partie_page">
     ...
     <div id="presentation">
           <img src=".." alt="...">
           <p>...</p>
     </div>
      ...
</div>
 
Je cherche a créer un CSS qui en absolu de la div PRESENTATION
me positionne img à 30% du haut -> presentation
et 30% gauche
 
et le texte venant encercler la dite image en partant de 5px de vide en interne du cadre presentation tout autour du p
 
j'ai ecrit ce code CSS:

Code :
  1. page #partie_page  #presentation {
  2. width : 550px;
  3. border : 0px solid #ff0000;
  4. overflow : auto;
  5. overflow-y : hidden;
  6. }
  7. #page #partie_page #presentation  p{
  8. padding:0;
  9.              font-size : 20px;
  10. font-weight : bold;
  11. margin-bottom : 5px;
  12.              text-align:justify;
  13. position:relative;
  14. top:5px;
  15. left:5px;
  16. }
  17. #page #partie_page  #presentation img{
  18. float:center;
  19. border:1px solid #b0b0b0;
  20. margin:0 0 10px 10px;
  21. padding:5px;
  22. width:40%;
  23. }


 
avez-vous des idées pour faire ce que je souhaite en modifiant le CSS donné?
par avance merci à vous :hello:

Reply

Marsh Posté le 26-01-2012 à 13:43:41   

Reply

Marsh Posté le 26-01-2012 à 20:28:14    

aucun commentaire :(?
 
il manque des info?
c'est pas possible?
la proposition devrait fonctionner, et je vois pas pourquoi c'est pas le cas?
c'est pas comme ca qu'il faut faire, mais je sais pas corriger?
on a rien compris au problème?
c'est plus subtile, vas t'inspirer sur cette url?
 
Une tendance? on arrive à le faire dans word par des clics ca doit bien pouvoir se faire avec CSS?
:pt1cable:


Message édité par tintin34 le 26-01-2012 à 20:30:21
Reply

Marsh Posté le 27-01-2012 à 09:53:05    

Nan ce n'est pas possible "simplement" et "en automatique" car la propriété float de l'image (seul à même de faire epouser la forme d'une image par un texte) ne prend que la valeur left ou right, donc tu pourras avoir un text qui épouse sur un coté et en bas, mais jamais au dessus, de chaque coté et en bas...
 
En tout cas pas que je sache, y'aura ptet une spec. dans la CSS 3 qui permettra ça...
 
Par contre si ta page est statique est que tu a vraiment envie, tu doit pouvoir simuler cet effet avec une image positionné en absolut et un text avec la propriété CSS white-space:pre; qui te permet de prendre en compte les espace blanc, ceci dit gaffe au taille de typo différente sur le navigateur, ça sent la grosse galère ! ^^

Reply

Marsh Posté le 28-01-2012 à 00:22:39    

mechkurt a écrit :

Par contre si ta page est statique est que tu a vraiment envie


 
4 calques Toshop remplis en Javascript et slice en 4 div. Presque dynamique :D


Message édité par Schimz le 28-01-2012 à 00:23:50

---------------
çà s'est HFR | Music for the Galaxy
Reply

Marsh Posté le 28-01-2012 à 10:52:27    

Tu as une technique adaptable expliquée ici, mais ça tient du hack http://www.alistapart.com/articles/crosscolumn2/
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 28-01-2012 à 11:39:07    

bon ok merci mechkurt
 
et si je veux le bord droit de l'image calé sur le bord droit du texte et le bord haut de l'image 30% plus bas que le bord haut du texte
 
avec le texte qui encadre l'image, c'est possible ou non?
 
pour le moment le seul truc que j'ai réussi c'est mettre l'image dans le coin haut gauche (ou droit du texte) ou bien l'image au bon endroit mais le texte se poursuit sous l'image :pt1cable:
 
 
je voudrais arriver à un truc de ce genre  
 
|===============|
|...........................|
|...........................|
|..........     |======|
|..........     |           |
|..........     |           |
|..........     |======|
|...........................|
|...........................|
|===============|
 
à l'issue de quoi je dois pouvoir faire son symétrique de l'autre coté de sorte qu'en mettant cote a cote les deux partie j'arrive au resultat?

Reply

Sujets relatifs:

Leave a Replay

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