28172 sujets

CSS et mise en forme, CSS3

[Réglé] Problème Image & texte côte à côte

Merci pour ta réponse Heyoan.

En fait c'est pour un site web dynamique avec affichage de plusieurs blocs du même type à la suite avec des images de hauteurs variables. Ca suppose donc de récupérer le height de chaque image et de créer un style pour chaque bloc de façon à fixer la propriété min-height adaptée au height de l'image du bloc...

C'est une solution mais peut-on faire plus simple ?

-Fly06
Vu le contexte je te déconseille d'utiliser le positionnement absolu. Tu pourrais par exemple utiliser des flottants :
<p>
	<img src="une_image.jpg" alt="" />
	<span>Quid enim tam absurdum quam delectari multis inanimis.</span>
</p>
p {
	width: 300px;
	border: 1px solid black;
	text-align: right;
	padding: 5px;
	overflow: hidden;
}

p span {
	float: left;
	width: 160px;
}

p img {
	float: right;
}
Oui Heyoan mais pour les mêmes raisons, je ne peux pas fixer le width du bloc 'p span' et sans width il s'affiche sur toute la largeur du conteneur en dessous l'image...

-Fly06
Bonsoir,

on peut se passer du positionement absolu , encadrer le texte d'une balise neutre de façon a avoir deux balises adajacentes (img et span) , faire usage du float et des contextes de formatage (englobage/decalage des flottants) et garder un truc fluide .

ex:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
/* test */
p {border:solid;}
img{float:right;}
/* contexte de formatage modifié , ainsi que le layout pour les versions de IE 6 antérieur */ 
p , span {display:block;overflow:hidden;zoom:1;}
/* makup */
p {background:#ccc;}
img{margin:1em;}
p , span {margin:1.5em 1em;}
</style>
</head>
<body>
<p> 
    <img alt="" src="http://forum.alsacreations.com/skins/common/kiwiz.jpg" height="100"  /> 
    <span>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
    irure dolor in reprehenderit in voluptate velit esse cillum 
    dolore eu fugiat nulla pariatur. </span>
</p>
</body>
</html>

ça c'est tu ne veut pas que le texte passe sous l'image.

Si tu veut que le texte passe sous l'image , le span devient inutile (ou ne necessite pas de : display:block;overflow:hidden;zoom:1;)

Je suis assez d'accord sur le fait que le positionement absolue n'est pas justifié , ni les tableau d'ailleurs . La construction est assez simple pour se passer de ces deux la Smiley smile

GC
gc-nomade a écrit :

p , span {display:block;overflow:hidden;zoom:1;}


jarrive pas a comprendre : overflow:hidden;zoom:1;
a écrit :
/* contexte de formatage modifié , ainsi que le layout pour les versions de IE 6 antérieur */

p , span {display:block;overflow:hidden;zoom:1;}



http://www.google.fr/search?q=contexte+de+formatage et http://www.google.fr/search?hl=fr&q=layout+IE&btnG=Rechercher&meta=lr%3Dlang_fr
par exemple .

Ces concepts sont utiles a connaitre , ainsi que leur utilisation .
(tout comme les tableaux et les div , ou les span , il ne faut pas en abuser Smiley smile au risque de s'y perdre ... )
Merci gc-nomade pour ta soluce.

Par contre, je ne comprends pas non plus le rôle de 'overflow:hidden;zoom:1;'.

Il semble que 'zoom:1;' ne sert à rien tout comme le 'display: block;' sur la balise p qui est de type block par défaut.

La version épurée donne les résultats attendus dans son contexte réel d'utilisation (site dynamique) sous IE6/7, FF3 et Opera 9.

Merci à tous pour votre aide.

-Fly06
bonsoir

Dans l'exemple , Le zoom:1; s'adresse a IE 6 et moins , car aucune autre regle css presente n'active le haslayout , si par exemple une largeur est appliqué , il y a double emploi , donc inutile Smiley smile . Cette regle est une regle "made in " microsoft IE , et est completement neutre ailleurs .

L'overflow:hidden , modifie le contexte de formatage . Les element dans le flux recevant cette regle vont alors se degager ou englober les element adjacent ou enfant qui sont positioner en "flottant" .

Le display:block , s'adresse au span dans l'exemple , pour p , c'est deja sa valeur par defaut en effet .Mais , l'overflow n'a d'effet et de pertinence que sur des element de type 'block' Smiley smile d'ou la modification a l'encontre du span .

Cette page teste les effets et regles qui agissent/modifie le "contexte de formatage" , a noter qu'un tableau (html) est doté par défaut de se comportement Smiley smile .
<edit> lien : http://yidille.free.fr/plux/valign/?17-modifie-le-contexte-de-formatage </>
GC
Modifié par gc-nomade (18 Oct 2009 - 19:39)
Bonjour,
robin59 a écrit :
C'est vrai que IE est vraiment énervant à la fin
Smiley decu

C'est tellement constructif que ça me ferait presque pleurer...

Fly06, si tu considère le problème comme étant [résolu], merci d'éditer ton premier message et de l'indiquer dans son titre.
Sujet clos
Aller à