[Résolu] Problème surprenant avec float

Là je dis "waouh" j'ai encore jamais eu ce problème : ce que je voulais faire avec float marche sous IE et pas sous Firefox. Bravo moi.

Alors voilà j'ai un header avec dedans normalement :
- collés à gauche, trois onglets
- collé à droite un autre "grand onglet" (accès rapide)

<div id="barresup">
  <ul id="onglet">
    <li>Premier onglet</li>
    <li>Deuxième onglet</li>
    <li>Troisième onglet</li>
  </ul>

  <!-- Barre d'accès rapide -->
  <ul id="acces-rapide">
    <li id="titre">Acc&egrave;s rapide :</li>
    <li>[un-formulaire-de-recherche-avec-juste-un-input]</li>
    <li>Un lien vers l'a FAQ</li>
    <li>Un lien vers l'aide</li>
  </ul>
</div>

Oilà, oilà.
CSS de la barre : ça marche.

#barresup{
	width:90%;
	margin-left:5%;
	
	font-size:7pt;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	
	background-color:#556699;
}

CSS de la liste #onglet : ça ne marche pas sous FF, en fait cette liste sort de #barresup, qui puisqu'il n'y a pas d'indication de taille et plus rien dedans disparaît. Quand je fais DOM inspector, #barresup est bien là, fait bien 90%, est bien positionné, mais invisible.
Et je vois même pas comment c'est possible que ça sorte d'un contenant. Jamais vu ça.

#onglet{
	float:left;
	list-style:none;
}
#onglet li{ display:inline; }

Aperçu du DOM qui clignote :


Comme on peut le voir le rouge c'est #barresup, or il devrait entouré les onglets et mettre un fond bleu (puisque c'est dans la css).

La partie grisée c'est le menu (de gauche normalement) qui est remonté puisqu'il est sensé être dans le flux suivant (#barresup prenant tout l'espace).

Aperçu sous IE : les onglets sont biens dans #barresup qui a donc une bonne hauteur et donc on voit son background-color.


Quid?

Oui je sais c'est moche mais les fonds sont juste là pour voir les zones pour l'instant
Modifié le 30 Oct 2004 - 12:16

je n'ai pas bien compris ton probleme. TU ne peux pas faire un screenshot sous IE ou ca marche , ou nous donner une adresse ?

Ok c'est fait pour IE.
Modifié le 29 Oct 2004 - 19:29

alors, si la barre d'accès rapide apparait à droite, apparament, c'est car les onglets ont un float:left; .
Plutot que

#onglet{

	float:left;

	list-style:none;

}

#onglet li{ display:inline; }

il te faudrait je pense

#onglet{
	list-style:none;
}
#onglet li{ 
	display:inline;
	float:left;
	background-color:#556699;
 }

Ca devrait faire que ta barre d'accès rapide se mette en dessous (je ne teste pas les codes que j'envoie , je laisse ça au conditionnel ^^)

Pour la barre rouge, c'est étrange. Vérifie que il n'y a pas ce rouge quelque part dans ta page, si oui, dis nous ou .
Enfin, pour le background, je t'ai mis le code si dessus, ce devrais tout te résoudre, j'espère ! Bonne continuation dans tout les cas

<hors_sujet>

harry potter a écrit :
Windows, c'est comme la cigarette. C'est de la merde mais on peut pas s'en passer !

Ah bon ? J'en suis pas sûr du tout :-)
MacOsX + Fedora core 2 (avec Gnome) Powa ;-)

Windows, je passe des semaines sans le toucher moa =)
</hors_sujet>
Modifié le 29 Oct 2004 - 22:54

Non mais euuuh non. La barre rouge c'est le DOM inspector de Firefox qui permet de faire clignoter n'importe quel élément du DOM. Et là en l'occurence je faisais clignoter le <div> #barresup qui comme on peut le voir, est réduit à néant alors que les onglets sont à l'intérieur dans le html.
La partie en gris c'est pas la barre d'accès rapide c'est le menu normal du site qui doit se trouver comme dans IE.
La barre d'accès rapide je ne l'ai pas mise dans cet exemple (sauf dans le code html) car ça merde déjà rien qu'en mettant le <ul> #onglet.

Euuuh ma question est difficile? Ya moins d'affluence que sur les autres sujets de ce forum

Je vais peut-être dire une énormité, mais ta div tu pourrais/devrais pas t'en passer ?

Laurent Denis a écrit :
Avant d'aller plus loin:
- Donne un exemple de code complet, ou une url de test.

Pas évident avec juste des images.
Voici une piste de solution.

Le code HTML

<div id="barresup">
  <ul id="onglet">
    <li>Premier onglet</li>
    <li>Deuxième onglet</li>
    <li>Troisième onglet</li>
  </ul>

  <!-- Barre d'accès rapide -->
  <ul id="acces-rapide">
    <li id="titre">Acc&egrave;s rapide :</li>
    <li>[un-formulaire-de-recherche-avec-juste-un-input]</li>
    <li>Un lien vers l'a FAQ</li>
    <li>Un lien vers l'aide</li>
  </ul>
</div>

Le code CSS

#barresup { 
   width: 90%; 
   margin-left: 5%; 
   font-size: 7pt; 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   background-color: #556699; 
}

#onglet { 
   float: left; 
   width: 60%; 
}

#onglet li {
   display: inline; 
   list-style-type: none; 
}

#acces-rapide { 
   float: right; 
   width: 30%; 
}

MaximuS a écrit :
<hors_sujet>

Ah bon ? J'en suis pas sûr du tout
MacOsX + Fedora core 2 (avec Gnome) Powa

Windows, je passe des semaines sans le toucher moa =)
</hors_sujet>

De plus, linux, j'ai jamai réussi à l'installer, l'ai l'impression qu'il reconnait pas mon lecteur CD, bref, un vrai foutoir !

RastaPopoulos a écrit :
Euuuh ma question est difficile? Ya moins d'affluence que sur les autres sujets de ce forum

@Rastapopulos > En fait, c'est toujours dur de travailler avec des images et du code ^^ Cela impliquerai que l'on fasse les tests chez nous, mais , je ne sais pas pour les autres, mais je suis un gros féneant . Non,si tu nous envoyais l'URL, ou au moins une URL de test, ca nous permettrais de voir ce qui ne va pas, et dans le cas contraire, de voir le contexte et de te trouver une alternative. EN tout cas, lorsque ca marche chez FF et pas IE,, je dis pas, mais si ca marche chez IE, mais pas FF, alors c'est de ton code que ca vient ^^
Modifié par Sylvain (11 Feb 2013 - 11:47)

Bon je sais bien qu'il faut mettre une URL de test je le demande moi-même à chaque fois, mais là c'est pour un intranet, et en plus tout est généré dynamiquement donc je n'ai pas de quoi le mettre vraiment sur internet.

Pour les largeurs je suis tout à fait d'accord avec vous, c'est ce que j'avais commencé à faire en vérité.

Et dans ce cas j'ai bien les onglets qui prennent 60%, la barre d'accès rapide (qu'on ne voit pas sur mes screenshots) qui prend bien 40% (donc le reste de l'écran).
---> Du coup le menu (avec le fond gris) passe bien en dessous sous FF.
MAIS, je dis bien MAIS, il n'en reste pas moins que les onglets et la barre d'accès rapide sont en dehors de #barresup qui a toujours une hauteur de 0 alors que tout est à l'intérieur dans le code. Le test avec le DOM inspector donne le même résultat, et donc pas de fond bleu derrière comme ça devrait être le cas.

La preuve en image avec des width : le DOM inspector entoure ici de rouge #barresup, or ça ne donne qu'une ligne... et pourtant ce qui est en dessous est sensé être dedans.

#onglet{
	width:60%;
	float:left;
	list-style:none;
}
#onglet li{ display:inline; }
#acces-rapide{
	width:40%;
	float:right;
	height:40px;
	list-style:none;
	background:white url(IMG/acces_rapide_fond.gif) repeat-x;
}

As-tu essayé :

#acces-rapide { 
   width: 30%; 
}

au lieu de 40%?

Oui, et ça fait pareil. Vraiment je ne comprend RIEN à ce qui se passe. Ca fait deux jours que je fais des tests dans tous les sens, que j'enlève ou je rajoute des trucs limite au hasard, parce que je ne vois pas de logique dans ce qui se passe.
Et j'ai pas envie de passer en absolute... rien que parce qu'en principe c'est sensé marcher.
Modifié le 30 Oct 2004 - 11:23

Je ne suis pas certain de comprendre le problème...

En gros tu as un conteneur qui contient tes onglets en flottant ?
Et tu te plaint que ce conteneur ait 0 de hauteur...
Bah c'est normal puisque tes éléments sont flottant à l'intérieur.

Si ton contenu (onglet) est variable en hauteur, rajoute un <hr /> dans le conteneur avec clear: both; et visibility: hidden;
Si ton contenu (onglet) est fixe en hauteur, spécifie simplement la hauteur de ton conteneur.

Enfin la solution est tellement simple que je n'ai pas dû comprendre le problème...

Oulaaaaaaaaaaaa nonnnn paaaas le pixeeeeeel toumépaça. C'est destiné à un intranet d'établissement scolaire, visible pour les élèves et les profs. Et comme chacun sait, un prof voit mal. Et s'il fait "augmenter la taille de la police" alors que c'est en pixel... la cata pour la mise en page, c'est illisible après. Pour ce projet je travaille essentiellement en % et em, surtout pour les largeurs.

En tout cas merci beaucoup d'essayer de m'aider.

ElMoustiko a écrit :
Je ne suis pas certain de comprendre le problème...

En gros tu as un conteneur qui contient tes onglets en flottant ?
Et tu te plaint que ce conteneur ait 0 de hauteur...
Bah c'est normal puisque tes éléments sont flottant à l'intérieur.

Si ton contenu (onglet) est variable en hauteur, rajoute un <hr /> dans le conteneur avec clear: both; et visibility: hidden;
Si ton contenu (onglet) est fixe en hauteur, spécifie simplement la hauteur de ton conteneur.

Enfin la solution est tellement simple que je n'ai pas dû comprendre le problème...

lol ah déjà je pense que ça s'approche beaucoup de ça. Depuis que je fais du css, une des rares propriétés qui reste encore abstraite dans ma tête c'est le clear:both permettant de nettoyer le flux...
Alors comme je comprend pas trop, je ne l'utilise pas.

Je teste un truc comme ça, je bois un jus d'oranges pressée, et je reviens.
Modifié le 30 Oct 2004 - 11:38

Euh là c'est brutal... pourquoi tu met un div et encore dedans un hr ??

div tout seul suffit, c'est moyen moyen parceque ca ajoute du code inutile

hr seul suffit aussi, c'est "moins pire" parceque un hr peut etre utile pour distinguer plusieurs zones d'une page.

hr
{
 clear: both ;
 visibility: hidden ;
}

Par ailleurs, margin: 0 ; padding: 0 ; sur le div ne sert à rien... à moins que tu ais spécifié des marges pour tes divs...

Pour ce qui est du clear: both ; ca te permet de positionner l'element SOUS les éléments qui le précède pour récuperer en quelque sort l'alignement du flux classique sans float.