18041 sujets

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

Problème de centrage de menu

Bonjour, je suis toute nouvelle sur ce forum et j'ai déjà une question Smiley ohwell .

En fait, je suis actuellement en train de faire un kit graphique pour l'utiliser éventuellement pour faire un site. J'ai trouvé que c'était une bonne idée de mettre un menu "interactif" avec les sous menus. Celui-ci pour être précis.
J'ai modifié le CSS pour que, quand on ne survol plus un menu, son sous-menu se retire automatiquement, chose qu'il ne faisait pas auparavant. Mais j'ai un problème de centrage... Quand j'élargi la fenêtre de mon navigateur, mon header reste centré quelque soit la taille mais pas le menu. J'ai essayé de le centrer avec plusieurs méthode en vain alors j'en appel à votre gentillesse.

Vous pouvez voir ce dont je parle ici (ca sera certainement plus clair).

Merci d'essayer de m'aider
Modifié par darkscythe (06 Sep 2008 - 16:01)
Je suis débutant, je connais le XHTML et le CSS depuis quelques mois, alors j'ai peu d'expérience mais je m'en sors assez bien...

En faite déjà dans ta page XHTML, il y a une "div", qui est repéré à l'aide de l'attribut "id" comme étant le menu : <div id="menu">, donc dans ta feuille de style, il faut modifier les lignes qui suivent le #menu...

Pour l'instant c'est :
#menu {
position: absolute;
left: 222px;
top: 230px;
}


En effet, il est fixé à 222pixels de la gauche et 230 pixels à partir d'en haut
Mais teste avec ça :
#menu {
margin: auto;
}

Normalement ça marche avec du texte ou autre mais avec des <dt> et <ul> peut-être qu'il faudra modifier autre chose, genre des "float: left" ou autre... enfin tu verras, teste comme ça... pour l'instant

Je ne promets pas que ça marche, mais en tout cas... il faut supprimer ces lignes qui donnent la position de ton menu dans la page...
Modifié par Lux (06 Sep 2008 - 19:03)
Merci de m'avoir répondu

j'avais essayer également mais dans ce cas la mon menu se retrouve au dessus de mon header, or j'aurai voulu qu'il se trouve au dessous.

Voici ce que tu m'as dit de faire >> ici.

C'est pas top... Smiley confus
Modifié par darkscythe (06 Sep 2008 - 19:25)
Oui je vois c'est pas top, il manque des trucs et il faudra changer des trucs, mais quoi ??

Il me semble que pour utiliser "margin: auto;" il faut donner une largeur fixe...
Je cherche en intra avec des tests de faire à ce que ton menu passe dessous et que tu ais un centrage...
Merci de me consacrer du temps en tout cas ca me fait plaisir en attendant je cherche également de mon côté ^^
Bonjour et bienvenue sur le forum,

darkscythe a écrit :
Bonjour, je suis toute nouvelle sur ce forum et j'ai déjà une question Smiley ohwell .
C'est un peu l'idée ! Smiley ravi

Tout d'abord on peu noter, et c'est d'ailleurs précisé en préambule, que ce menu est un peu vieillissant et une nouvelle version est en cours de rédaction...

Sinon tu n'as pas indiqué de DOCTYPE alors que c'est essentiel si tu souhaites avoir le même rendu sur tous les navigateurs. Ensuite tu te sers d'une table de mise en forme ainsi que d'attributs comme align et bgcolor obsolètes : les CSS sont faits pour ça (s'occuper de la présentation).

Pour ce qui est de centrer une page horizontalement il suffit de placer tous les éléments (entre <body> et </body>) dans une DIV à laquelle on attribue une largeur (width) et un margin-left et margin-right auto (par exemple margin: 10px auto).

Concernant le positionnement absolute, les attributs top et left se réfèrent au dernier ancêtre positionné. Il suffit donc par exemple de rajouter un position:relative à cette DIV globale.

Le mieux serait peut-être de reprendre du début (idem pour toi Lux Smiley lol ). Un petit tour sur cet article : Comment débuter et trouver l'information, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

Bonne continuation Smiley smile .
Modifié par Heyoan (06 Sep 2008 - 21:17)
Voila je trouve des solutions qui marchent pour les menus mais par pour les sous-menu ou inversement...
Pourtant ça parait simple à faire...

Tu peux essayer avec ça, mais c'est pas joyeux car les sous-menus ne se mettent pas à la suite... j'ai essayer plusieurs trucs mais ça marche pas

Voila la partie de code qu'il te suffit de coller à la place de l'autre...

<style type="text/css">
<!--
body {margin: 0px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li {
list-style-type: none;
list-style:none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
margin-left:auto;
margin-right:auto;
top: 230px;
left: 0;
width: 600px;
}

#menu dl {
float: left;
text-align: center;
}

#menu a {
text-decoration: none;
color: #006DBC;
background: #161410;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
font-size: 0.7em;
border-top: 1px solid #363430;
position: absolute;
left: -1;
margin-top: 10px;
width: 100%;
}

-->
</style>


EDIT : Le temps d'écrire et voila que Heyoan arrive...
Tout à fait d'accord, c'est obsolète, il manque de trucs (DOCTYPE...), c'est 100 fois mieux de mettre les feuilles de style à part, dans un fichier .css...
Modifié par Lux (06 Sep 2008 - 21:05)
il est vrai que je débute la dedans mais je voulais commencer à faire une bonne base (au moins l'header le menu et une partie du corps pour faire le CSS et tester.
Désolée lux mais je vais retester avec ma version du début parce queca ne fais plus du tout ce que j'espèrais... Smiley murf

Merci heyoann je vais essayer d'appliquer ce que tu dis j'essairai de vous remontrer le résultat...


... si j'y arrive un jour Smiley lol
Modifié par darkscythe (06 Sep 2008 - 21:14)
Sujet clos
Aller à