Bug d'affichage sous FireFox, surement due à un Float !

Je ne comprend plus... aidez moi...

29 août 2006 à 12:10:38

Bonjout à tous amis zér0 !
Je viens de créer un nouveau site pour des pôtes et moi. Mes codes PHP sont corrects, la navigation est correcte aussi mais j'ai un problème d'affichage ! Et à ma grande surprise pour une fois c'est sous FIreFox que ça bug un p'tit peu...
La situation : j'ai deux menus sur le côté avec un float: left; et au centre j'ai un bloc principale qui contient les pages. L'affichage est une fois de plus correct mais le problème survient quand j'aissayer d'appliquer un float dans les contenu du bloc central ! Là je vois mon image qui descend tout en bas de ma page sans comprendre pourquoi :s ! J'ai pensé que ça venait du float left des deux menus mais bon normalement ça s'applique à mon div central et pas à son contenu ! Enfin bon je vous montre des exemples en image et je vous donne mon côde source.
Là, la page d'accueil qui fonctionne bien car pas de float dans son contenu
et
là la page qui foire complètement... enfin l'image est tout en bas alors qu'elle devrai être entourée par le texte.
Voilà c'es problème est ultra chiant parce que tu coup mon affichage est ultra limité et pour faire quelque chose de design ça devient chaud...
Voici mon code Html

<div id="banniere"></div>

<div id="menu_long"><h4>Menu :</h4>
<ul><li><a href="INDEX.php?inc=presentation">Présentation</a></li>
<li><a href="INDEX.php?inc=Diapo">Dessins</a></li>
<li><a href="INDEX.php?inc=video">Vidéos</a></li>
<li><a href="INDEX.php?inc=photos">Photos</a></li>
<li><a href="INDEX.php?inc=musiques">Musiques</a></li>
<li><a href="blog.php">Blog</a></li></ul></div>

<div id="menu_court"><h4>Navigation :</h4>
<ul><li><a href="index.php?inc=Accueil">Accueil</a></li></ul></div>

<div id="main_bloc">
<!--ici côde php qui sert à inclure les pages dans ce blocs--!>
<!-- c'est ce même blocs qui déconne --!></div>

Et voici mon Css :

#menu_long {
width: 181px;
height: 316px;
background-image: url("../images/Blocs/Grand_Menu.gif");
margin-top: 1em;
float: left;
color: white;
}

#menu_long p, h4, li{

margin-top: 22px;
padding-left: 10px;
padding-right: 5px;}

#menu_long li{
margin-top: 20px;
list-style-type: none;}

#menu_court {
list-style-type: none;
color: white;
clear: both;
width: 174px;
height: 109px;
background-image: url("../images/Blocs/Petit_Menu.gif");
margin-top: 2em;
float: left;
}

#main_bloc {

color: white;
width: 732px;
height: 462px;
margin-left: 200px;
background-image: url("../images/Blocs/Main_Bloc.gif");
margin-top: 20px;
}

Voilà en espérant que quelqu'un de plus expérimenté que moi passe par là et puisse m'aider

Parce que là ça me bloc vraiment dans l'avancement du site ! Et comme il doit être prêt avant la rentrée des classe bé faut qu'jle finisse vite

Ps: Tant qu'a faire si il vous prend l'envi de juger le design, ça ne serait pas de refus !

Merci d'avance !

Léon

29 août 2006 à 12:22:54

Salut,

Je pense que tu t'embrouilles dans les float:left et les clear:both ... ça fait un peu brouillon ton css.
Tu devrais y aller progressivement en supprimant le contenu des styles et en les remettant au fur et à mesure !

Bilbou

29 août 2006 à 12:23:17

Hop !

Essaie ceci :

#menu_court {
list-style-type: none;
color: white;
clear: left;
width: 174px;
height: 109px;
background-image: url("../images/Blocs/Petit_Menu.gif");
margin-top: 2em;
float: left;
}

clear: both; ==> clear: left;

Mais c'est sans convictions... :euh:

Anacondange

29 août 2006 à 12:24:44

Mmmm D'accord mais si je ne met pas les floats left, mes blocs ne s'aligne pas :§ c'est plutôt ennuyeux... a moins que j'aissaye avec un display: inline... enfin bon j'aissaierai ça si personne ne trouve de solution

Merci pour la réponse.

Je n'avais pas vu la réponse de Bilbou ! J'ai aissayé mais ça ne marche pas :s

Léon

29 août 2006 à 12:27:56

je te demande pas de ne pas les mettre, au contraire, tu es obligé mais tu a trop joué avec, tu devrais recommencer progressivement

Bilbou

29 août 2006 à 12:29:50

Je me disais aussi que c'était pas gagné !

Je te proposerais d'englober tous tes menus flottants à gauche dans un conteneur, et d'appliquer un float: left; à ce conteneur uniquement, dans ce cas !

Parce que c'est vrai que c'est un peu brouillon là !

Anacondange

29 août 2006 à 12:30:43

Mmm oké

je mange et j'aissaye après mais je pense que si je fais ça je vais refaire exactement pareil >_<

enfin j'èspere pas

J'my met tout à l'heure mais si quelqu'un a une réponse à ce problème là je suis encore preneur

Merci

Bilbou

29 août 2006 à 12:32:58

Je suis fatigué... :-°

Regarde ces deux codes :

Ton image :

Le CSS qui s'y rapporte :

.float_left
{
clear: both;
float:left;
padding-left: 15px;
padding-right: 15px;
margin-top : 0px;
}

Qu'est-ce que fait un clear: both; ici ? o_O

Enlève-le, tout rentrera sûrement dans l'ordre !

Enfin, j'espère !