18041 sujets

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

Menu css => problème de positionnement (débutant)

Bonjour,

Bravo pour votre site, il est vraiment trés bien pour apprendre plein de chose mais voilà, j'ai mes limites et je planche sur mon problème de menu depuis hier, j'en ai pas beaucoup dormi, et c'est pour cette raison que j'ai pris la décision de vous demander un peu d'aide, s'il vous plait.

Mon problème est un menu sur une page htm + un css (des grands mots pour moi) ^^ que je n'arrive pas à le positionner comme je le souhaiterai.

1. Je n'arrive pas (et ne comprends pas) comment remonter mon menu, j'ai essayer de modifier chaque valeur du css, mais sans résultats.

2. Je n'arrive pas à centrer correctement mon menu.

3. Lorsque je place ma souris sur les menus, les sous menus s'ouvrent mais sont décallés sur la droite, je voudrais bien qu'ils s'ouvrent juste en dessous de leurs menus respectifs.

Vous pouvez voir de visu mon travail de cochon : http://amiborg.free.fr
Le fichier css: http://amiborg.free.fr/menu.css

En vous remerçiant, je vous souhaite une bonne journée (ou une bonne soirée).

--
Amiborg Smiley smile
Modifié par Amiborg (09 Dec 2009 - 23:39)
Pour le menu qui ne remonte pas, tu as un padding 20px 20px 10px;sur le div qui contient ton menu.
D'ailleurs ton style s'appliquant à tous les div tel que tu l'as écrit, ça risque de poser beaucoup de problèmes de mise en page si tu ajoutes d'autres div. Il vaut mieux mettre un id="monNomDeStyle" avec ton div et dans ton code css un style avec #monNomDeStyle qui ne s'appliquera qu'a cet unique div.

Pour le menu déroulant essaye de modifier le 170 px dans ce style :
#menu li ul ul
{margin: -22px 0 0 170px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */}

Au passage, évite de mettre des tableaux pour le contenu du texte mais plutôt de structurer ta page avec des div, cela apporte plus de souplesse et est en accord avec les standards de développement actuel du web.
Bonjour Sihafu,

Merci pour ta réponse. J'avoue ne pas avoir écrit ce css (j'en suis tout à fait imcapable), je l'ai trouvé sur le net, quand à apporter les modifications que tu me donnes, pour "padding" , et "Il vaut mieux mettre un id="monNomDeStyle" avec ton div et dans ton code css un style avec #monNomDeStyle qui ne s'appliquera qu'a cet unique div"...

C'est chaud là, je ne vois pas quelle ligne modifier et quoi y mettre Smiley decu
Tes conseils sont pour moi du chinoix...

Sinon, j'ai modifier #menu li ul ul {margin: -22px 0 0 170px ; mais c'était déja comme cela mise a part la structure des lignes, mais ca ne change rien, les menus s'ouvrent toujours décallés en dessous.
Ha ! Désolé, je pensais que tu avais déjà modifié une partie du code.
Il faudrait que tu vois un peu les bases du développement web si tu veux comprendre comment modifier ton site. Regarde par ici pour un tuto synthétique avec des exemples.
Igor, merci pour ton aide.

Sihafu, merci de nouveau pour ton aide.
J'ai lu l'article du site du zero que tu m'as mis en lien, donc j'ai bien compris ceci:
"L'alignement ne fonctionne que sur des balises de type block (p, div, blockquote, h1, h2, ...)"

J'ai donc ajouter :

div
{
text-align: center;

Mais rien. Apparement, si j'ai bien compris, text-align: center; fonctionne pour l'alignement d'un texte, tout est bien centré dans mon menu, mais c'est le menu en lui même qui ne l'ai pas, par rapport à la page.

Désolé, je n'ai jamais écrit la moindre ligne de code, je suis tout juste arrivé à modifier les textes et les couleurs.
Changer les texte et la couleur, c'est un bon début, mais tu risques de très vite avoir besoin de faire un minimum de code.

dans ton code, c'est le padding:20px 20px 10px; de cet élément : 

div {
border:0 solid #848686;
margin-bottom:10px;
margin-right:5px;
margin-top:0;
overflow:hidden;
padding:20px 20px 10px;
text-align:left;
}

qui empêche ton menu de remonter, remplace-le par padding:0 20px 10px 20px; et il devrait se placer correctement.
Bonjour Sihafu,

Je te remerçie pour la modification du padding:0 20px 10px 20px;
Le menu reste au même endroit, avec les sous-menu décallés.

Ce n'est pas grave, je vais m'orienter sur un autre style de menu.

Bonne journée.
Amiborg a écrit :
Ce n'est pas grave, je vais m'orienter sur un autre style de menu.

Si j'avais vu ce sujet plus tôt, ma réponse aurait été: quand on n'est pas intégrateur web (donc un professionnel ou un amateur passionné avec de fortes compétences en HTML, CSS et JavaScript), on ne fait pas de menu de navigation complexe.

C'est donc l'occasion rêvée de se poser la question d'une navigation simplifiée, peut-être avec une modification de l'architecture des contenus. Au final ce serait plutôt une bonne nouvelle pour toi et les utilisateurs du site. Smiley cligne
Sujet clos
Aller à