Menu qui float pas.

Bonjour,

Je me permets de venir vous embéter pour un chti soucis.

tout d'abord, toutes mes confuses mais après être passée par la recherche je n'ai pas trouvé solution à mon problème.

Mon soucis, sans doute simple, est celui-ci :

je suis en train de faire un thèmes pour Drupal 5.x en css
tout marche parfaitement sous IE7, mais sous Firefox le div de contenu s'affiche en dessous du div de menu au lieu de se coller à ses côtés.

le menu de gauche doit faire 206px, et le contenu prendre l'ensemble de la place restante en largeur...

voici mon css :

.head_sousD{
        float: right;
	margin: 0px auto;         
	background: #fff url("blah.gif") repeat-x;
}
.head_sousG{
        float: left;
	margin: 0px auto;
        width: 206px;
	background: url("blah.gif") repeat-x;
}

ton contenu doit contenir (outch) un élément dont la largeur (fixée ou induite) dépasse la largeur disponible à droite du menu. par exemple un paragraphe de texte qui, sans largeur fixe, va chercher à "s'étaler" sur toute la largeur disponible.

à priori, sans voir la structure html, une solution sûre consiste à fixer une largeur au bloc contenu.

euh, ben oui mais euh non ^^

je ne souhaite pas que la largeur soit fixe, vu que le site doit s'adapter à la largeur de l'écran du visiteur.

n'y a-t-il aucun moyen de régler cela autrement en css ?

sinon bah je devrais mettre un <table> certes considéré comme disgracieux au niveau du code mais tellement fonctionnel dans ce cas là...

j'essaye de comprendre pourquoi et d'utiliser css tant que je peux mais si ça marche pas...

edit:
quelque soit la valeur de largeur que je donne au contenu cela ne change rien, le conteneur s'affiche toujours sous le menu....

il n'est pas possible de lui demander de remplir l'espace restant sans qu'il s'enfuit en dessous ?
Modifié par maosalia (29 Mar 2007 - 12:46)

salut,

Non il n'est pas nécessaire de spécifier une largeur au contenu global, il vaudrait peut être mieux dans un premier temps que tu essaye de voir si un élément n'a pas une largeur fixée qui ferait s'agrandir ta colonne droite.

Ce problème survient-il en petite résolution, ou quelle que soit la résolution ?
Il est évident qu'une page en ligne aiderait plus à se rendre compte du problème

quelle que soit la résolution.

bon en supprimant float: right; sur .head_sousD{ ça passe mieux mais le contenu coule sous le menu quand il le dépasse en hauteur.

je cherche comment le contraindre la hauteur du menu.. je dois avoir loupé ou pas compris quelque chose, je creuse sur le site et sur le livre.
Modifié par maosalia (29 Mar 2007 - 13:22)

Ne pas mettre div.head_sousD en float: right. Bien le placer en second dans le code HTML (c'est à dire après div.head_sousG), et utiliser, au choix :
- une marge à gauche de la largeur de div.head_sousG, ou plus large si on veut créer un écart ;
- un contexte de formatage via un overflow: auto ou overflow: hidden empêchera div.head_sousD de glisser sous le flottant. Il viendra alors se loger bien gentiment dans l'espace laissé libre par le flottant. Pour information, Internet Explorer 6.0 ne crée pas de contexte de formatage dans ces conditions (ça marche par contre avec IE7), il lui faudra donc un correctif.

Avec une marge c'est plus simple à mettre en place si on ne maitrise pas les CSS.

ah merci Florent tu es mon sauveur !

le contexte de formatage semble bugouiller, je testerai cella plus avant

la marge marche nickel (je suis stupide j'aurais du y penser....)

edit:

en fait overflow: hidden; c'est vraiment du bonheur, merchi encore.

rah c'est fun le css, j'adore.
Modifié par maosalia (30 Mar 2007 - 09:10)