Recaler du texte de plusieurs lignes contre une image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Recaler du texte de plusieurs lignes contre une image

toum_toum

Vivons masqués

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

Publicité

olivthill

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

Marc Harnist

Rascabrole

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

gatsu35

Blablaté par Harko

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

toum_toum

Vivons masqués

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

toum_toum

Vivons masqués

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

Message cité 1 fois

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

gatsu35

Blablaté par Harko

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

toum_toum

Vivons masqués

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

Marc Harnist

Rascabrole

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!

Marc Harnist

Rascabrole

toum_toum a écrit :

les tableaux étant le mal

! :sarcastic:

Message cité 1 fois

Publicité

toum_toum

Vivons masqués

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

Marc Harnist

Rascabrole

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

gatsu35

Blablaté par Harko

Marc Harnist a écrit :

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

Marc Harnist

Rascabrole

Normalement...

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 page	Texte limité dadns un textarea
Centrer tableau mais aligner texte à gauche	Selection et tri sur plusieurs tables avec memes colonnes
Extrusion dynamique selon un texte FLASH CS4	VBA 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

Page générée en 0.077 secondes