Mes débuts en CSS : souci de calque

[Gillou]

B'jour
Je débute avec les calques et j'ai un souci. Voilà, j'ai une classe feature définie comme ci-dessous

Code : Tout sélectionner

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
}

.feature img{
	float: left;
	padding: 10px 10px 0px 0px;
}

qui me permet de caser une image sur la gauche de ma page et d'écrire à droite de l'image :
--------
| I | Ici, du texte...
| M | Blablabla
| A | Blablabla
| G | Blablabla
| E | Blablabla
-------- Blablabla

suivant ce code :

Code : Tout sélectionner

<div class="feature">
<img src="image.jpg" alt="image">
<p>TEXTE </p>
</div>

Mon souci est le suivant : j'ai besoin de caser une petite image à l'intérieur du texte. Comme elle se retrouve au milieu de la classe feature, elle est logiquement interprétée en feature img et flotte à gauche alors que je veux qu'elle soit au milieu du texte, exactement là où je mets la balise. Evidemment je peux la placer en position:absolute et alors ça va, mais je ne veux justement pas utiliser position:absolute (si je décale le texte, l'image ne bouge pas et ce n'est plus au bon endroit).

Comment dois-je faire pour placer l'image où je veux au milieu du texte ? Il n'y a pas à ma connaissance d'attribut "no-float" ou "inline" ou un truc comme ça...

[SB]

Il existe une sous classe qui te rendrait service mais je crois qu'elle n'est pas supportée par IE. Il me semble que c'est:

Code : Tout sélectionner

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
}

.feature img:first-child{
	float: left;
	padding: 10px 10px 0px 0px;
}

Ainsi seule la première image du div a la propriété float:left.
La seule autre solution que je vois c'est de mettre un Id ou une classe à ta première image pour lui attribuer ses propriétés.

[Gillou]

Il existe une sous classe qui te rendrait service mais je crois qu'elle n'est pas supportée par IE. Il me semble que c'est:

Code : Tout sélectionner

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
}

.feature img:first-child{
	float: left;
	padding: 10px 10px 0px 0px;
}

Ainsi seule la première image du div a la propriété float:left.

J'ai fait quelques recherches, effectivement c'est à peu près ça mais 2 inconvénients :

• incompatible avec IE
• si je veux mettre plusieurs images à la suite verticalement avec du texte à côté, ça m'oblige à chaque fois à refermer et rouvrir mon div class="feature" car sinon seule la 1ère image serait correctement positionnée.

Il n'y aurait pas une classe que je pourrais mettre sur la 2ème image (celle que je veux au milieu du texte) pour lui dire de ne pas tenir compte de la classe dans laquelle elle est imbriquée ?
Thx

[SB]

Ben si t'as tout simplement

Code : Tout sélectionner

float:none

[Gillou]

Ben si t'as tout simplement

Code : Tout sélectionner

float:none

Tout simplement
Merci c'est exactement ce que je cherchais, comme quoi c'était pas compliqué mais quand on ne connait pas tous les attributs...

[SB]

Une adresse utile : http://fr.selfhtml.org/css/proprietes/

[Gillou]

merci 8)