Problème avec mes "float" !!

Ne fonctionnent pas!

25 octobre 2006 à 21:52:51

Alors, voici mon code source XhTml ...

Citation : CODE SOURCE :::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="floatoupe.css" />
</head>
<body>
<img src="images/flash.gif" class="imagefloat" alt="image qui flotte" />

Cette méthode a tous les défauts : non seulement le CSS sera peu lisible à l'intérieur des balises, mais en plus ça ne nous permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un clic.
Bref, je vous ai montré la méthode seulement pour que vous ne soyez pas perdus si vous la voyez.
Voilà, vous venez de voir quelles sont les 3 méthodes que l'on peut utiliser pour insérer du CSS (de la meilleure à la pire).
L'idéal est donc d'utiliser une feuille de style externe (= mettre son CSS dans un fichier .css) et c'est cette méthode que je vais utiliser dans la suite du cours.
</body>
</html>

Et son code source CSS ...

Citation : CODE SOURCE CSS::

.imagefloat
{
float: left;
}

Cependant je me retrouve avec mon texte en dessous de l'image avec un certain écart !
Pourquoi?
Où est la faute?

Merci d'avance mes très chers Zer0s

Inst@nce

25 octobre 2006 à 22:29:00

Pour moi, c'est parce que l'image n'est pas dans le meme "" que le texte. Du coup une ligne saute est tout marche pas.

Riko

25 octobre 2006 à 22:40:44

Salut, ton css fonctionne il ?

Pour essayer change la ouleur de fond de ta page car chez moi ton code fonctionne.

Bogoris

25 octobre 2006 à 22:44:47

Oui, en plus ton image doit être de type block : on ne peut faire flotter que les éléments de type block.
Tu dois donc faire un display: block; sur ton .imagefloat

Riko

25 octobre 2006 à 22:54:17

tu peux également faire flotter ton auquel tu auras mis ta
class .image flottante

EDIT:

Citation : Bogoris

Oui, en plus ton image doit être de type block : on ne peut faire flotter que les éléments de type block.

Je ne crois pas : http://www.yoyodesign.org/doc/w3c/css2/visuren.html#float-position