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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Recaler du texte de plusieurs lignes contre une image

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Recaler du texte de plusieurs lignes contre une image

n°1975338
toum_toum
Vivons masqués
Posté le 19-03-2010 à 17:39:24  profilanswer
 

Une petite dernière pour la semaine  :)  
 
 
Je veux mettre du texte contre une photo.
 
Voici ce que je veux éviter, et ce que je souhaite en dessous :
 
http://nsa15.casimages.com/img/2010/03/19/100319053716235524.gif
 
Petit coup de fatigue, me souviens plus trop quoi faire..  :o  
Je crée une Div spéciale pour le bloc texte ? Avec quoi dedans ?...


Message édité par toum_toum le 19-03-2010 à 17:39:43
mood
Publicité
Posté le 19-03-2010 à 17:39:24  profilanswer
 

n°1975352
olivthill
Posté le 19-03-2010 à 18:00:52  profilanswer
 

Faire un tableau avec deux cellules, ou faire deux span.

n°1975387
Marc Harni​st
Rascabrole
Posté le 19-03-2010 à 20:47:20  profilanswer
 

Tout à fait d'accord avec Olivthill !
 
Un tableau c'est vraiment la stabilité pour ta page. Le tableau ça tiendra sur n'importe quel écran, petit ou géant.
 

Code :
  1. <table>
  2. <tr><td>Mon image</td><td>mon texte</td></tr>
  3. </table>


 
Ensuite appliquer un style aux td
Par exemple:

Code :
  1. td {
  2. padding: 0 10px;
  3. }


 
 
Sinon, d'après tes croquis, ce que tu cherches c'est la fonction css float dont tu as besoin pour ton image.
Dans ce cas, pas besoin de tableau.
 
Voici le code css à appliquer à ton image:
 

Code :
  1. img {
  2. float:left;
  3. }


 
Pour que l'image ne colle pas trop au texte: lui donner une marge ce qui donne:
 

Code :
  1. img {
  2. float:left;
  3. margin:0 15px 0 0;
  4. }


 
Ou encore:

Code :
  1. img {
  2. float:left;
  3. margin-right:15px;
  4. }


 
15px mais on peut choisir 10px ou 20px...
 
On a pas besoin forcément de div. Une image bien réglée avec des paragraphes (balises p) suffisent largement:
Exemple concret:

Code :
  1. <p><a title="Mécano soudure acier, aluminium et inox" href="img/mecano-soudure-001.png">
  2. <img alt="Mécano soudure acier, aluminium et inox" style ="width:200px;float:left;margin:0 10px;" src="img/mecano-soudure-001.png"/></a></p>
  3. <p>La mécano-soudure  c'est fabriquer des pièces rigides, légères et moins chères que les pièces coulées. La SMC de Corbenay travail sur l'acier, l'aluminium et l'inox: mecano soudure, mais aussi <a href="../decoupage">découpage,</a> <a href="../emboutissage">emboutissage</a> et <a href="../pliage">pliage</a>.</p><p>Le mécano soudage est une méthode qui permet de fabriquer des ébauches de pièces de type « bâti ». Nous mettons de la matière là où on c'est nécessaire grâce à des éléments
  4. préfabriqués en acier, en aluminium ou en inox que l’on assemble par soudage.</p>


 
Pour voir le site avec ce code: demander le lien en message privé.


Message édité par Marc Harnist le 19-03-2010 à 21:10:21
n°1975460
gatsu35
Blablaté par Harko
Posté le 20-03-2010 à 11:37:21  profilanswer
 

Allez mourir avec vos solutions en tableau, il faut appliquer le contexte de formatage qui rend si bien service :)
http://jsfiddle.net/qADVb/1/
 

Code :
  1. .text {overflow:hidden; zoom:1;}



---------------
Blablaté par Harko
n°1975560
toum_toum
Vivons masqués
Posté le 20-03-2010 à 21:20:21  profilanswer
 

Merci à vous (en effet ce n'était pas avec des tableaux que je cherchais la solution,  
les tableaux étant le mal :o )
 
 :jap: J'avais oublié que le float pouvait être mis sur une image aussi... (fatigue :o)

n°1975580
toum_toum
Vivons masqués
Posté le 20-03-2010 à 23:09:57  profilanswer
 


PS : à quoi sert la propriété zoom ici ?!

n°1975587
gatsu35
Blablaté par Harko
Posté le 20-03-2010 à 23:41:42  profilanswer
 

toum_toum a écrit :


PS : à quoi sert la propriété zoom ici ?!


A appliquer le haslayout de formatage sous IE, ce qui entraine le contexte de formatage


---------------
Blablaté par Harko
n°1975597
toum_toum
Vivons masqués
Posté le 21-03-2010 à 00:13:03  profilanswer
 


Ok, merci pour cette notion de HasLayout...  :jap:  
Une petite recherche sur le net et tout s'est éclairé...

n°1977081
Marc Harni​st
Rascabrole
Posté le 25-03-2010 à 07:05:28  profilanswer
 

gatsu35 a écrit :

Allez mourir avec vos solutions en tableau, il faut appliquer le contexte de formatage qui rend si bien service :)
http://jsfiddle.net/qADVb/1/
 

Code :
  1. .text {overflow:hidden; zoom:1;}




 
ça va tu peux rester poli! J'ai proposé une deuxième formule sans tableau!

n°1977082
Marc Harni​st
Rascabrole
Posté le 25-03-2010 à 07:07:17  profilanswer
 

toum_toum a écrit :


les tableaux étant le mal :o  


 
!   :sarcastic:

mood
Publicité
Posté le 25-03-2010 à 07:07:17  profilanswer
 

n°1977144
toum_toum
Vivons masqués
Posté le 25-03-2010 à 11:05:59  profilanswer
 


Je disais ça avec humour
 
(Mais c'est vrai que je voulais éviter en effet d'utiliser un tableau, d'autant plus que j'avais pas mal de lignes à passer...)
 
Merci pour la solution du float sur l'image

n°1977277
Marc Harni​st
Rascabrole
Posté le 25-03-2010 à 14:26:28  profilanswer
 

Pour moi je préfère de loin la solution sans tableau. Mais étant donné que de nombreux utilisateurs ont encore des moniteurs pourris, je veux être sur que mes divs ne se retrouvent pas en bas de page, je suis malheureusement obligé d'adapter mes sites aux pires situations imaginables!  
Quand ton site apparait en cascade chez le client, ça fait plutôt nul!

Message cité 1 fois
Message édité par Marc Harnist le 25-03-2010 à 14:27:34
n°1977297
gatsu35
Blablaté par Harko
Posté le 25-03-2010 à 14:53:11  profilanswer
 

Marc Harnist a écrit :

Pour moi je préfère de loin la solution sans tableau. Mais étant donné que de nombreux utilisateurs ont encore des moniteurs pourris, je veux être sur que mes divs ne se retrouvent pas en bas de page, je suis malheureusement obligé d'adapter mes sites aux pires situations imaginables!
Quand ton site apparait en cascade chez le client, ça fait plutôt nul!


Quand on maitrise les CSS, les tableaux il n"y en a pas du tout besoin, sauf pour des données tabulaires. Je vois pas en quoi le moniteur vient faire dans des problèmes de CSS. Que ton design soit fixe ou fluide, normalement il ne doit pas y avoir de problèmes


Message édité par gatsu35 le 25-03-2010 à 15:00:49

---------------
Blablaté par Harko
n°1977635
Marc Harni​st
Rascabrole
Posté le 26-03-2010 à 09:08:54  profilanswer
 

Normalement...


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

  Recaler du texte de plusieurs lignes contre une image

 

Sujets relatifs
[Résolu] Création d'une page html pour email, largeur zone texte ?[VBA] lire fichier texte jusqu'à ...
Colorbox - plusieurs thèmes en une pageTexte limité dadns un textarea
Centrer tableau mais aligner texte à gaucheSelection et tri sur plusieurs tables avec memes colonnes
Extrusion dynamique selon un texte FLASH CS4VBA Tourner sur lui même du texte dans autocad
Texte de la même couleur que le fond[PHP] Remplacement de texte
Plus de sujets relatifs à : Recaler du texte de plusieurs lignes contre une image


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