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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2123445
tintin34
Posté le 26-01-2012 à 13:43:41  profilanswer
 

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:

mood
Publicité
Posté le 26-01-2012 à 13:43:41  profilanswer
 

n°2123518
tintin34
Posté le 26-01-2012 à 20:28:14  profilanswer
 

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
n°2123564
mechkurt
Posté le 27-01-2012 à 09:53:05  profilanswer
 

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 ! ^^

n°2123754
Schimz
Bouge pas, meurs, ressuscite !
Posté le 28-01-2012 à 00:22:39  profilanswer
 

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
n°2123761
gilou
Modérateur
Modzilla
Posté le 28-01-2012 à 10:52:27  profilanswer
 

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é!  --
n°2123763
tintin34
Posté le 28-01-2012 à 11:39:07  profilanswer
 

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?


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

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

 

Sujets relatifs
2 formulaires dans une même page html[HTML/PHP] Page d'accueil dynamique wordpress
Intéractivité HTML 5Remplir un formulaire HTML avec C++
Question de débutant, créer petit logiciel de recherche de texte.aide lire fichier texte
[HTML] Ancre et onglet jsacquisition image sous matlab
probleme image en sortit de code[HTML] Peut on mettre une balise h1 dans du li ?
Plus de sujets relatifs à : quel CSS/html pour avoir un texte qui encercle une image


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