28172 sujets

CSS et mise en forme, CSS3

Problème de float

Bonjour à tous et belle et merveilleuse année

Pour ce premier coup de pouce que je vous demande, j'attaque avec un souci de float

J'ai plusieurs div avec bords arrondis ombrés (générés grace a CSSpie)

je voudrais aligner une image dans le coin inférieur droit du div, jusque là pas de problème) , mais je voudrais aussi que le texte du div s'aligne autour de l'image, or apparemment le position:absolute empeche cela

Le resultat en image :

upload/42698-exemple2.png


voici le code des conteneurs

#threecol1, #threecol3, #threecol2 {
	width:273px;
	margin-bottom:20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #666;
	position:relative;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: #666 0px 2px 3px;
	-moz-box-shadow: #666 0px 2px 3px;
	box-shadow: #666 0px 2px 3px;
	background: #E9E9E9;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E9E9E9), to(#FDFDFD));
	background: -webkit-linear-gradient(#E9E9E9, #FDFDFD);
	background: -moz-linear-gradient(#E9E9E9, #FDFDFD);
	background: -ms-linear-gradient(#E9E9E9, #FDFDFD);
	background: -o-linear-gradient(#E9E9E9, #FDFDFD);
	background: linear-gradient(#E9E9E9, #FDFDFD);
	-pie-background: linear-gradient(#E9E9E9, #FDFDFD);
	behavior: url(js/PIE.htc);
	text-align: justify;
	padding: 20px;
	float: left;
}


et le code de l'image a l'interieur 


#threecol1 img{
	position:absolute;
	width: 138px;
	float:right;
	bottom:0;
	right:0;
}


et le code html du cadre



  <div id="threecol1">
  
    <h2>Titre</h2>
    <p>Integer turpis ipsum, pharetra eget malesuada vel, condimentum id velit. Sed condimentum, mi eu sollicitudin vehicula, libero mi lacinia sem, sit amet tincidunt sapien dui nec ipsum. Maecenas eget scelerisque turpis. Sed enim mi, suscipit eu gravida eget, viverra sed purus. Integer turpis ipsum, pharetra eget malesuada vel, condimentum id velit. Sed condimentum, mi eu sollicitudin vehicula, libero mi lacinia sem, sit amet tincidunt sapien dui nec ipsum. Maecenas eget scelerisque turpis. Sed enim mi, suscipit eu gravida eget, viverra sed purus.</p>
      <img src="images/sophie2.png" />
    </div>


En vous remerciant pour vos lumières éclairées (sic)

Serge
Modifié par Serge Hipontoise (07 Jan 2012 - 13:46)
Kaelig a écrit :
Je crains que tu ne doives appliquer un padding-right supplémentaire au conteneur.


J'y avais pensé mais ça donne ça :

upload/42698-exemple3.png

ce n'est pas du tout ce que je cherche à faire
Modifié par Serge Hipontoise (07 Jan 2012 - 14:37)
a écrit :
ce n'est pas du tout ce que je cherche à faire


Que cherches-tu alors...? Que le texte suive la découpe de la silhouette ?
La position absolue, sortant ton élément du flux, fera à tout coup en sorte qu'un bloc utilisant ce type de positionnement superposera les autres éléments. Et alors, comme on t'a dit plus haut, la solution la plus simple serait de déclarer un padding pour que ton texte ne se retrouve pas chevauché.

Comme ce n'est pas l'effet que tu semble rechercher, tu devras laisser tomber l'utilisation de la propriété CSS "position" et n'utiliser que le float (mais ton élément dépendra alors du padding de son parent et ne se positionnera peut-être pas tout en bas à droite - à toi d'arranger le CSS en fonction).

Cependant, la propriété "float" repoussera quand même la texte en forme de rectangle autour de ton image (car ton image est un rectangle évidemment).

À ce jour, aucune propriété CSS en version finale et implémentée dans les navigateurs ne te laissera entourer une image de texte en suivant une forme non rectangulaire. (Une propriété à l'état d'ébauche vise cependant l'ajout futur de telle possibilité, mais ce ne sera probablement pas avant plusieurs années)

Si tu y tiens mordicus cependant, tu n'as qu'à placer ton image en background et à utiliser des <br /> pour donner l'impression (manuellement) que le texte entour l'image. Mais, ce ne sera pas du tout flexible, et j'aurais tendance à te le déconseiller.
Merci de vos réponses

Cependant, non, je ne cherche pas a suivre le contour de l'image (non rectangulaire) comme le dit G3ronim0, je sais que ce n'est pas possible, mais simplement que le texte entoure l'image rectangulaire, comme pour n'importe quel float.

Utiliser l'image en fond ne le permettrait bien sur pas

Le padding right m'obligerait a avoir une colonne de texte trop courte...
Si tu veux que le texte passe légèrement au dessus de l'image sans la recouvrir complètement, tu pourrais la mettre en fond (background) et appliquer le padding-right pour ajuster le texte au plus prêt de la silhouette.
oui je l'ai relue après, je vais chercher dans ce sens
j'ai commencé à tatonner mais sans succès encore
je vous tiendrai au courant

Merci
Modifié par Serge Hipontoise (08 Jan 2012 - 13:41)
Créé un nouvel exemple Dabblet ou fournit un exemple en ligne pour une aide plus extensive.

Vérifie bien les dimensions de ton image également (la transparence PNG est considéré comme faisant partie intégrale d'une image).
Sujet clos
Aller à