Page 1 sur 1

Mes débuts en CSS : souci de calque

Publié : 19 janv. 2005, 11:19
par 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... :oops:

Re: Mes débuts en CSS : souci de calque

Publié : 19 janv. 2005, 14:28
par 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.

Re: Mes débuts en CSS : souci de calque

Publié : 19 janv. 2005, 18:03
par Gillou
SB a écrit :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

Publié : 19 janv. 2005, 18:16
par SB
Ben si t'as tout simplement

Code : Tout sélectionner

float:none

Publié : 19 janv. 2005, 18:23
par Gillou
SB a écrit :Ben si t'as tout simplement

Code : Tout sélectionner

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

Publié : 19 janv. 2005, 18:50
par SB

Publié : 19 janv. 2005, 18:53
par Gillou
merci 8)