Float:left

julio113 · Message par **julio113** » 13 nov. 2007, 16:55

Bonjour,

Je m'interroge sur la dernière version de Firefox : il me semble qu'en utilisant la css suivante :

#fondblanc{
background:#FFFFFF;
}

#fondvert{
background: #00FF00;
}

#gauche{
float:left;
}

#droite{
float:left;
}

Et en plaçant le code suivant dans la page html:

<div id="fondblanc">un texte
<div id="fondvert">
<div id="gauche">un texte à gauche</div>
<div id="droite">un texte à droite</div>
</div>
</div>

On obtient un background transparent pour le div fontvert. L'erreur est corrigée si j'enlève float:left du div gauche, mais le texte "un texte à droite" ne flotte plus à gauche du texte "un texte à gauche".

J'utilise a peu prés ce code à l'adresse htpp://www.locmorgat.com

Pouvez-vous me dire s'il s'agit d'une erreur de ma part ou bien d'un bug de firefox ?

Autre pb : http://www.locmorgat.com/photos.php

Avez-vous une idée de ce qui se passe ?

Merci d'avance pour vos réponses.

Roulio

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

Message par **jpj** » 13 nov. 2007, 22:36

Bonsoir,

Je déplace dans "Développement web". jpj.

Asumbaa · Message par **Asumbaa** » 14 nov. 2007, 09:05

Salut,

Tu as pas mal d'erreurs de syntaxe, qui potentiellement peuvent entraîner des tas d'effets. Il faudrait que tu commences par les corriger (à l'aide du validateur W3C par exemple ; tu peux aussi te servir des extensions HTML Validator et Web Developer)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

SB · Message par SB » 17 nov. 2007, 12:31

La propriété float est connue pour induire des débordements et être difficile à maitriser. De plus tu multiplies tellement les div imbriquées dans ta page qu'il est dur de s'y retrouver et que tu ouvres la voie aux erreurs des navigateurs. Tu dois pouvoir utiliser d'autres balises que <div>. Par exemple dans le cas que tu cites on peut obtenir ce que tu veux par

Code : Tout sélectionner

<style type="text/css">
p {
margin:0
}

#fondblanc{
background:#FFFFFF;
}

#fondvert{
background: #00FF00;
}

#gauche{
float:left;
}
</style>

et

Code : Tout sélectionner

<body>
<p id="fondblanc">un texte</p>
<div id="fondvert">
<p id="gauche">un texte à gauche</p>
<p>un texte à droite</p>
</div>
</body>

Pour ta page de photos, je préconise la bonne vieille technique du spacer qui a fait ses preuves.

Dans les css tu rajoutes «clear:both;» à #titrephotos et dans le html un «<hr style="clear:both; visibility:hidden">» après le dernier <div id="photo3">

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9

Geckozone

Float:left

Float:left

Qui est en ligne ?