Recaler du texte de plusieurs lignes contre une image

Marsh Posté le 19-03-2010 à 17:39:24

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 :

Petit coup de fatigue, me souviens plus trop quoi faire..
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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Reply

Marsh Posté le 19-03-2010 à 17:39:24

Reply

Marsh Posté le 19-03-2010 à 18:00:52

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

Reply

Marsh Posté le 19-03-2010 à 20:47:20

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 :

<table>
<tr><td>Mon image</td><td>mon texte</td></tr>
</table>

Ensuite appliquer un style aux td
Par exemple:

Code :

td {
padding: 0 10px;
}

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 :

img {
float:left;
}

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

Code :

img {
float:left;
margin:0 15px 0 0;
}

Ou encore:

Code :

img {
float:left;
margin-right:15px;
}

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 :

<p><a title="Mécano soudure acier, aluminium et inox" href="img/mecano-soudure-001.png">
<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>
<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
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

Reply

Marsh Posté le 20-03-2010 à 11:37:21

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 :

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

Message cité 1 fois

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

Reply

Marsh Posté le 20-03-2010 à 21:20:21

Merci à vous (en effet ce n'était pas avec des tableaux que je cherchais la solution,
les tableaux étant le mal )

:jap: J'avais oublié que le float pouvait être mis sur une image aussi... (fatigue )

Message cité 1 fois

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Reply

Marsh Posté le 20-03-2010 à 23:09:57

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

Message cité 1 fois

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Reply

Marsh Posté le 20-03-2010 à 23:41:42

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

Reply

Marsh Posté le 21-03-2010 à 00:13:03

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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Reply

Marsh Posté le 25-03-2010 à 07:05:28

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 :

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

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

Reply

Marsh Posté le 25-03-2010 à 07:07:17

toum_toum a écrit :

les tableaux étant le mal

! :sarcastic:

Message cité 1 fois

Reply

Marsh Posté le 25-03-2010 à 07:07:17

Reply

Marsh Posté le 25-03-2010 à 11:05:59

Marc Harnist a écrit :

! :sarcastic:

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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Reply

Marsh Posté le 25-03-2010 à 14:26:28

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

Reply

Marsh Posté le 25-03-2010 à 14:53:11

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

Reply

Marsh Posté le 26-03-2010 à 09:08:54

Normalement...

Reply

Recaler du texte de plusieurs lignes contre une image

Sujets relatifs:

Leave a Replay