28221 sujets

CSS et mise en forme, CSS3

Débordement de menu horizontal

Bonjour

J'essaye depuis un certain temps (il est 4h du mat quand même Smiley smile ) d'obtenir un menu horizontal avec onglet qui tient sur la page. J'ai réussi à faire tout ce que je voulais, sauf que je viens de m'appercevoir que le menu dépasse sur la droite.

Il est en float: left et en width: 100%

Voici un lien pour vous rendre compte:
http://forumzp.free.fr/TESTCSS/

Si quelqu'un a une suggestion ...

Soyez indulgents: c'est ma première création entièrement en CSS et je suis déjà content de pouvoir valider Smiley lol

Bon j'vous laisse j'vais aller me reposer 3h avant de repartir pour une nouvelle journée Smiley biggol
Modifié le 13 Jan 2005 - 04:08
Alors le problème est le suivant : tu as, dans ton menu du haut, la ligne suivante :
padding-left: 250px

Il se trouve que quand tu donnes un width, tu donnes la dimensions de la zone de contenu d'un élément. Donc si tu rajoutes soit du padding, soit une bordure ou encore une margin, tu rajoutes ce que t'ajoutes à la width. Donc dans ton cas, ton menu va prendre 100% de larges, 100% auxquels vont se rajouter les 250 px. Donc ton menu va dépasser de 250px à droite.
C'est le problème du modèle de boîte standard : impossible de donner une taille en pourcentage, et de rajouter une bordure ou un padding. Dans ce cas, le modèle de boîte Microsoft est beaucoup mieux, il t'aurait permis de faire ce que tu veux plus simplement. Ce sera possible en CSS3, avec box-sizing.
Sinon pour que ça fonctionne, essaye de virer le width: 100%;, un div par défaut va prendre toute la largeur possible. Si tu ne spécifies pas de largeur en plus, l'ajout d'un padding ne changera pas la largeur totale : le div va toujours prendre 100%, mais avec un padding de 250px, et sans déborder à droite Smiley smile
J'ai eu aussi le même problème !
Je débute en CSS alors je ne sais pas si je te donne une bonne solution mais pourquoi ne pas créer une div en width 100% pour le background (celle que tu as) et positionner a l'interieur de celle-ci ton menu en float left.

en gros comme ce que tu as fait mais en donnant la classe "floatleft" (donc float left) a ton attribut ul du genre <ul id="floatleft">


mais bon encore une fois je débute alors....
Merci de ces réponses. J'ai pas le temps de regarder tout mais je verrais ça ce soir.

a écrit :
essaye de virer le width: 100%;, un div par défaut va prendre toute la largeur possible


Le problème c'est que le menu gauche est aussi en flotant et ça n'a pas l'air d'aller car le menu horizontal ne prends pas 100%.

De plus j'aimerais garder une bordure orange sur le bas qui fasse toute la longueur et qui ne soit pas visible sur l'onglet courant. Et avoir les onglets allignés sur le bas (j'arrive pas trop à faire un pseudo vertical-align) mais je veux garder la hauteur du div contenant le <ul> du menu plus grande. Et bien sur je veux pouvoir garder un décalage à gauche pour les onglets par rapport aux bords.

A moins que je fasse un padding-top. Bon je verrais ça ce soir.

Voici le lien pour ce que ça donne sans le width 100%:
http://forumzp.free.fr/TESTCSS/

J'avais oublié que IE gérait mal les transparences sur PNG.

Merci encore pour vos réponses rapides.
Modifié le 13 Jan 2005 - 14:37
Bon bah j'ai essayé quelques trucs et je suis arrivé à 2 version:

La première se fait sans width=100% mais pour cela je dois abandonner le float du conteneur de la liste. Cela marche plutôt bien sauf que j'ai des problèmes au bas des onglets bour les aligner avec la bande orange du bground de la barre du menu horizontal. Et quand on agrandi la police l'écart s'agrandie et j'aimerais bien faire en sorte de ne pas avoir ces écarts. Mais là je sèche après avoir essayé pas mal de combinaisons. (On voit bien la différence entre le bas du bord gauche plus bas que le reste de l'onglet en zoomant beaucoup)


La 2 eme je suis reparti du menu existant et j'ai enlevé le padding-left de 250px. Et j'ai rajouté un id sur chaque item de la liste pôur ajouter un margin-left de 250px sur le premier des items. Cela marche bien mais sous IE il est décalé beaucoup plus que sur tous les autres navigateurs. Et là je ne comprends vraiment pas pourquoi! J'ai bien fixé en px et non en em ou autre!
http://forumzp.free.fr/TESTCSS/2004-01-13/test1/


Autrement j'ai testé avec un float rigth mais je me retrouve avec les éléments dans l'ordre inverse alors que j'aimerais bien avoir accueil en premier sans changer le .htm (ce qui ne serait pas logique sémantiquement)
http://forumzp.free.fr/TESTCSS/2004-01-13/test2/

Voili voilou.

Si vous avez d'autres commentaires (les derniers m'ont permis de bien avancer!)
Une petite précision sur ton code qui contient un doctype xhtml 1.1. Est-ce bien nécessaire d'utiliser celui-ci ? Tu as quelques éléments de réponse ici et dans quelques posts du forum.

Tu le fais également précédé d'un prologue xml, celui-ci n'est pas nécéssaire si l'utilisation de xhtml se limite à envoyer tes pages comme text/html (c'est la majorité des cas) et non xml. La présense ce prologue a aussi pour conséquence de faire basculer IE en mode quirks et de le faire se comporter en particulier pour le modèle de boîte comme le modèle Microsoft et pas le modèle standard. Ceci a une importance capitale. Smiley cligne
Merci bien pour les liens vers les articles.
Après avoir lu tout ça je me suis dit c'est cool c'est surement ça l'erreur sur windows ... et bien non. Je suis même passé en HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Mais finalement il y a toujours une différence entre l'espace gauche du menu horizontal (attribut margin-left: 100px; sur le <li>) sous IE/Windows et sur tous les autres. IE doit bien faire un espace de 200px au lieu de 100px sur tous les autres navigateurs. Pourquoi Smiley decu Serait ce un bug de IE?

Lien vers la page html

Lien vers le CSS de la page
Personne n'as une idée de la raison de cette différence d'interprétation avec IE, quelqu'un a t'il déjà rencontré ce genre de problème?
Parceque là je sèche Smiley bawling
C'est le modèle de boîte différent, comme expliqué par exemple sur OpenWeb. Le seul moyen de contourner ça, est de réécrire le code en XHTML 1.0 Strict, en enlevant le prologue XML.
Modifié le 14 Jan 2005 - 16:37
Sujet clos
Aller à