flottant dans un div

aidez moi

Anonyme

11 juillet 2006 à 22:28:36

Donc j'aimerais faire flotter, des élément a l'intérieur de mon div mais ca ne marche pas. IL il y as un bug d'affichage.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="/css/global.css" media="screen" type="text/css" title="default" rel="stylesheet"/>
</head>
<b
ody>

<div id="menu">
<p class="smenu">
1 2 3
</p>
<p class="smenu">
4 5 6
</p>
</div>
</body>

</html>

et le

#menu {
border: 1px solid black;
}

#menu .smenu {
float: left;
background: red;
}

J'aimerais savoir pourquoi, les bordures n'encadrent pas les textes ?...

Riko

11 juillet 2006 à 23:41:31

Salut, il faut que tu spécifies une hauteur pour ton bloc #menu.

atly

11 juillet 2006 à 23:45:06

Heu... A quoi sert le flottant ici ?

Sinon, rajoute un overflow:hidden à #menu.

hypnos

12 juillet 2006 à 14:06:45

salut je n'es pas testé ton code mais je croit voir ton probleme d'affichage et j'ai une solution a te proposer.

Il suffit d'utiliser la technique dite du spacer.

c'est a dire que tu doit rajouter un block div vide juste avant la fermeture de ton menu qui contient des element flottant.
je te donne d'abord le code à rajouter puis je t'explique.

.spacer{
clear:both;
}

Le clear:both du spacer va empecher les element flottant de depasser de ton cadre. car a cause de cette propriete CSS les element flottant doivent forcement apparaitre au dessus du spacer et non par-dessus...

sinon si tu souhaite aligner tes paragraphe a gauche dans ton menu pourquoi ne pas mettre dans ton CSS de #menu la propriété : text-align:left; ? et tu n'aurai plus besoin de flottant...

@++