18041 sujets

Questions générales et questions de débutants

Comportement d'une boîte flottante différent d'une page à l'autre

Bonjour,

Après avoir passé un certain nombre d'heures à décortiquer vos excellents tutoriels, j'ai decidé de laisser tomber les tableaux pour utiliser les CSS pour la mise en page de mon nouveau site. Malheureusement je suis confrontée à un problème insoluble et bizarre:
une boite, la boite "menu", au lieu de rester à côté de l'élément "contenu", grâce à son "float: left;"
passe parfois en dessous (pas toujours, sur certaines pages - j'utilise des includes - il reste bien à sa place) et je n'arrive pas à savoir pourquoi.

Voici les définitions CSS des 3 éléments incriminés:

[i]/* PARENT --Sert à contenir toute la partie centrale et à dessiner la ligne bleue entourant cette partie à droite et à gauche */[/i]
[b].milieu [/b]{
margin-left: auto;
margin-right: auto;
width: 902px;
height: auto;
background-image: url(images/fond.gif);
}

[i]/* ENFANT DE "milieu" et FRERE DE "menu" --Sert à contenir le texte principal, couleur définie dans la page elle-même en fonction de la section choisie */[/i]
[b]#contenu [/b]{
margin-left: 20px;
width: 580px;
padding: 10px;
min-height: 400px;
float: left;
}

[i]/* ENFANT DE "milieu" et FRERE DE "contenu" --Contenant le menu secondaire à droite de la page, est contenu dans le .milieu et à la droite de #contenu */[/i]
[b]#menu [/b]{
margin-left: 20px;
margin-top: 20px;
width: 190px;
min-height: 200px;
padding: 10px;
border-style: outset;
border-color: #432222;
float: left;
}

[i]/* ENFANT DE "menu" --Définit le style de texte du menu */[/i]
[b]a.textemenu [/b]{
font-style: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
line-height: 1.7;
}
[i]/*ENFANT DE "contenu" --Définit le style du texte principal */[/i]
[b].texteprincipal [/b]{
font-style: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:12px;
}


Si quelqu'un pouvait m'aider, j'apprécierais vraiment vraiment beaucoup !

A+ Smiley confus
Modifié par Bigineuse (03 Nov 2008 - 00:47)
Bonsoir.
J'ai eu un problème similaire sur un blog, l'élément flottant était assez instable avec l'élément qui se trouvait à côté de lui. En faite j'avais utilisé la propriété float sur les deux éléments. Essayez de mettre un "float: right;" à l'élément "contenu" et ne rien mettre à l'élément "menu".
Bonsoir,

Merci de la suggestion. J'ai essayé mais ça ne fonctionne toujours pas, mon élément "menu" vient se positionner en dessous de l'élément "contenu" au lieu de rester à côté et cela uniquement sur la page qui affiche les résultats de la recherche (c'est un petit moteur de recherche interne).
Si quelqu'un a une autre idée....je suis preneuse...je ne vois vraiment pas quoi faire pour régler ce bug.
Merci d'avance
Bonjour,
J'avais fait un test tout simple avec le code CSS présent dans le premier poste et l'affichage était correct. Voici le code :


<html>
<head>
<style type="text/CSS">
.milieu {
margin-left: auto;
margin-right: auto;
width: 902px;
height: auto;
}
#contenu {
margin-left: 20px;
width: 580px;
height: 800px;
padding: 10px;
min-height:400px;
float: right;
background: #ff0000;
}
#menu {
margin-left: 20px;
margin-top: 20px;
width: 190px;
height: 800px;
min-height: 200px;
padding:10px;
border-style:outset;
border-color: #432222;
}
</style>
</head>
<body>
  <div class='milieu'>    
    <div id='contenu'>
    </div>
    <div id='menu'>
    </div>
  </div>
</body>
</html>


La seule difference est le "float: right;" donc je vous parlais. Aussi Il me semble qu'il est nécessaire de mettre un "clear: both;" dans l'élément qui arrive après le menu.
Modifié par Majimerse (31 Oct 2008 - 11:52)
peut être que le code (php ?) du moteur de recherche qui génère le code html des réponses ne ferme pas correctement une balise.

fait une recherche, une fois la page du résultat affichée clic droit et affiche le code source dans ton navigateur pour vérifier que toutes les balises soient bien fermées

si tu utilise par exemple include moteur.php
vérifie que dans moteur.php il n'y ai pas de head ni de balise <body>
Modifié par scott54 (31 Oct 2008 - 12:00)
Hello,

Décidément, rien n'y fait, merci de vos suggestions, j'ai tout essayé sans succès, c'est toujours la cata sur IE, bien que l'affichage soit ok sur FF et cela seulement sur la page d'affichage des résultats de la recherche. Je n'y comprends rien de rien et je desespère vraiment.

J'ai édité mon message en mettant le code correctement, merci de l'info, je saurai pour la prochaine fois.

Bonne nuit.... Smiley decu
Sujet clos
Aller à