28220 sujets

CSS et mise en forme, CSS3

Salut tout le monde,

J'essaie de positionner une image pour que le texte encadre celle-ci. Habituellement, rien de plus facile, je mets mon image en float: left, et mes paragraphes <p> se disposent autour.

Mais là, çà marche pas. C'est comme si la règle n'était pas pris en compte et le plus bizarre c'est que si je mets l'image en float: right çà marche. Smiley eek

Mon image et mon texte sont compris dans une cellule de tableau.

Ma question est : "comment retrouver la trace du bug, est ce qu'il existe une règle qui a pu modifié le comportement des <p> de telle façon que mon float: left ne soit plus reconnu ou je sais pas trop quoi"

Si vous avez la moindre piste, n'hésitez pas please ; je suis preneur. Car ma feuille de style est déjà bien chargée et je tourne en rond en la lisant.

Merci d'avance.
Modifié par nab_ (08 Jun 2005 - 17:29)
Administrateur
Salut,

Un petit exemple visuel, ou un code feraient le plus grand bien Smiley smile

A tout hasard, je rappelle les caractéristiques du positionnement flottant :
a écrit :
Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.
Administrateur
nab_ a écrit :
Tout d'un coup, un gros doute m'envahit Smiley eek .

Est ce que les <p> sont des blocs ou pas ???

Oui Smiley cligne
Modifié par Raphael (07 Jun 2005 - 17:43)
Je comprend plus rien moa.. Smiley rolleyes

Pourquoi çà marche ce bout de code alors ? Smiley eek


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Float</title>
<meta http-equiv="content-type"
    content="text/html; charset=iso-8859-1" />
<style type="text/css">
.leftimg {
	float: left;
}
</style>
</head>
<body>
<h1>Chinese style stuffed peppers</h1>
				<img src="peppers1.jpg" width="319" height="255" alt="peppers" class="leftimg" />
				<p>These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.</p>
				<p>Heat the oil in a wok. Add the garlic and stir fry until golden.</p>
				<p>Reduce the heat down and then add the ginger and the mince. Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.</p>
				<p>Core and remove the seeds of the peppers and cut them into quarters.</p>
				<p>Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish</p>
				<p>Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.</p>
	
</body>
</html>


P.s : j'ai l'impression que plus le fils de discussion avance, plus je passe pour un bon gros gogole ! Smiley biggol
Administrateur
Hmm il marche très bien chez moi ce code (IE6 / FF / Moz / Opera) : l'image est à gauche, et le texte l'entoure à droite.
re-bonjour,

désolé d'avoir coupé court à la discussion hier.

En effet ce bout de code marche, c'est pour çà que je ne comprends pas pourquoi çà marche pas sur la page que je developpe.

Bon, j'ai pas eu l'autorisation de montrer le code, mais une copie d'écran çà fait de mal à personne.

sur cette copie d'écran mon img (éléphant) porte la class leftimg avec un float left, mais mon image continue à s'intercaller entre les <p>. Smiley bawling


upload/1365-Image-1.jpg

et ce qui me rend fou Smiley eek , c'est que si j'applique à cette image la class rightimg avec un float right, çà marche , cf copie d'écran Smiley eek

upload/1365-Image-3.jpg
bon,

je ne sais absolument pas pourquoi, mais la logique a fini par reprendre ses droits et le float: left, s'est remis à marcher comme par magie !!