18041 sujets

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

J'arrive pas à centrer mon menu et autre ...

Bonjour,
J'ai un hic, je n'arrive pas à centrer mon menu et le sous menu est en escalier.
Je suis débutante et je n'arrive pas à trouver l'erreur.
Quelqu'un peut-il m'aider ?
Merci d'avance
<ul class="nav">
    <li class="nav-item"><a href="#">ACCUEIL</a></li>
    <li class="nav-item"><a href="#">FAIRE PART PAS CHER</a></li>
    <li class="nav-item"><a href="#">BAPTEME</a></li>
    <li class="nav-item"><a href="#">MARIAGE</a></li>
    <li class="nav-item"><a href="#">NAISSANCE</a></li>
    <li class="nav-item"><a href="#">MARIAGE</a></li>
    <li class="nav-item"><a href="#">COMMUNION</a></li>
    <li class="nav-item"><a href="#">REMERCIEMENT</a></li>
    <li class="nav-item"><a href="#">MENU</a></li>
    <li class="nav-item"><a href="#">FÊTES</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Anniversaire enfant</a></li>
    <li class="sub-nav-item"><a href="#">Anniversaire adulte</a></li>
    <li class="sub-nav-item"><a href="#">Noël et Voeux</a></li>
    <li class="sub-nav-item"><a href="#">Halloween</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">CARTES</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Carte simple 10.5 X 14 CM</a></li>
    <li class="sub-nav-item"><a href="#">Carte double 10.5 X 21 CM (Pliée)</a></li>
    <li class="sub-nav-item"><a href="#">Carte longue 10 .5 X 21 CM (Pliée)</a></li>
    <li class="sub-nav-item"><a href="#">Carte double couleur 15.8 X 22 (Pliée)</a></li>
    <li class="sub-nav-item"><a href="#">Carte double couleur 18 X 25 (Pliée)</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">PRODUITS ASSORTIS</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Poster</a></li>
    <li class="sub-nav-item"><a href="#">Dragées</a></li>
    <li class="sub-nav-item"><a href="#">Calendrier</a></li>
    <li class="sub-nav-item"><a href="#">Set de table</a></li>
    <li class="sub-nav-item"><a href="#">Marque place</a></li>
    <li class="sub-nav-item"><a href="#">Etiquette adhésive</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">A SAVOIR</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Témoignage</a></li>
    <li class="sub-nav-item"><a href="#">Coup de coeur</a></li>
    <li class="sub-nav-item"><a href="#">Nouveautés</a></li>
    <li class="sub-nav-item"><a href="#">Tarifs</a></li>
    </ul></li>
    <li class="nav-item"><a href="#">AIDE</a>
    <ul class="nav sub-nav">
    <li class="sub-nav-item"><a href="#">Exemple de texte</a></li>
    <li class="sub-nav-item"><a href="#">Exemple d' écriture</a></li>
    <li class="sub-nav-item"><a href="#">Exemple de visualisation</a></li>
    <li class="sub-nav-item"><a href="#">Exemple de postures</a></li>
    <li class="sub-nav-item"><a href="#">Gabarit à télécharger</a></li>
    <li class="sub-nav-item"><a href="#">Procéder au paiement </a></li>
    </ul></li>
</ul>

upload/56923-a-effacer.jpg
Merci d'avance Smiley biggrin
Bonsoir,

Il y a probablement un code CSS associé, non ?
Une page en ligne serait vraiment un vrai plus Smiley cligne
Merci c'est trop gentil de me répondre.
LIENS DES PAGES
http://www.votre-faire-part.com/test.htm
http://www.votre-faire-part.com/feuille.css

J'ai changé le code car il me paraissait trop compliqué pour moi mais le truc là aussi pas centré.
Il est centré sur la page mais pas au milieu du menu / hauteur (je ne sais pas si je suis clair)
Et en plus sur DREAM les liens se présent les uns en dessous des autres et ca me gêne (ce qui en bleu).
 Il y a pas un moyen de le placer dans son emplacement ?

upload/56923-aaa.jpg

Ne me criez pas dessus, je suis nulle de nulle.
Je viens à peine de me mettre au CSS, avant je faisais tout sous forme de table.
Encore une chose, par exemple Accueil n'a pas de sous menu, je le présente comment ?
 
 <ul id="menu-demo2">
        <li><a href="#">ACCUEIL</a></li>
    <li><a href="#">FAIRE PART PAS CHER</a></li>  
	<li><a href="#">Lien menu 1</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>

Bon en 1ER lieu comprendre pourquoi le menu ne se centre pas (ggrrrr Smiley fache )

Merci vraiment de m'avoir répondu en général, jamais on me répond Smiley sweatdrop
Merci merci
Bonjour GaranceT et bienvenue sur le forum Smiley smile
GaranceT a écrit :
Et en plus sur DREAM les liens se présent les uns en dessous des autres et ca me gêne (ce qui en bleu).

Pour résumer simplement : le mode "création" et/ou fractionnéde Dreamweaver, tu t'en fiche et tu l'oublie Smiley smile
De toute façon il n'est pas fidèle à ce que tu verras dans ton navigateur et pire : il peut même t'induire en erreur bien trop souvent. Ne conserve que le mode code (si tu veux garder ce logiciel, ce qui est une autre histoire : vu son intérêt par rapport à son coût prohibitif, autant en changer…).

Bref.
GaranceT a écrit :
Bon en 1ER lieu comprendre pourquoi le menu ne se centre pas (ggrrrr Smiley fache )

Si tu ajoute une marge interne (padding-top) de 15 pixels à ton élément #menu-demo2 (liste parente du menu), tu obtiendras bien le positionnement désiré. Pour rappel, text-align:center ne permet pas d'aligner verticalement Smiley cligne
Modifié par audrasjb (01 Dec 2014 - 23:18)
GaranceT a écrit :
Merci vraiment de m'avoir répondu en général, jamais on me répond

Tu peux constater que la communauté Alsacréations prend soin de ses nouveaux arrivants Smiley jap

Smiley ravi
Modifié par audrasjb (01 Dec 2014 - 23:20)
Je serais moi aussi très intéressé à avoir un code commenté présentant un menu centré sans utiliser de tables ou de calcul du positionnement par JavaScript. J'ai essayé plusieurs fois sans succès, et je me suis replié sur du JavaScript.
Hello,

Il est vrai que ma solution rapide à la question soulevée par GaranceT ne répond pas parfaitement à la question : en effet, ça ne marche plus parfaitement si le texte du lien passe sur deux lignes. Mais les solutions élégantes (plus qu'un traitement JS en tout cas Smiley cligne ) existent, et ne sont pas très compliquées à mettre en place Smiley smile

Pour aller plus loin, on peut commencer par lire ce tutoriel sur Alsa concernant le centrage vertical des éléments en général.

Mais la manière la plus élégante restera tout de même d'utiliser les propriétés CSS suivantes, qui règlent parfaitement bien le problème de l'alignement vertical :
display: table-cell;
vertical-align: middle;

Supported since IE8 Smiley murf
Modifié par audrasjb (01 Dec 2014 - 23:56)
Super ca marche !!
Mais sur l'IPAD non par exemple !
Vous êtes un magicien (lol) Smiley biggrin Smiley biggrin
En revanche vous ne m'avez pas dit pour Accueil, par exemple qui n'a pas de sous menu
comment je l'introduis ?

Accueil n'a pas de sous menu, je le présente comment ?
<ul id="menu-demo2">
<li><a href="#">ACCUEIL</a></li> /* si je le présente comme ca certains sous menus d'autres liens ne marche plus*/

<li><a href="#">Lien menu 1</a> /* Iici commence le lien avec le sous menu*/
<ul>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
</ul>

Et j'ai un conseil à vous demander, est ce que vous pensez qu'il vaut mieux que je déplace mon menu de vertical en horizontal en faisant des menus déroulants ou je reste pareil ?
C'est quoi le mieux pour l'internaute ? Avoir tout en horizontal ou horizontal / Vertical ?

Encore un truc, est-ce que vous connaissez un tuto SIMPLE et COMPATIBLE avec ts les navigateurs qui explique comment créer des tableaux ?

Merci de ne pas m'avoir laissé tomber !! Merciiii
Hello GaranceT,
Pas le temps de répondre tout de suite, mais il serait bien que tu créé un nouveau topic pour les soucis qui ne concernent pas ton menu.
Idem, PapyJP, tu dois créer un nouveau de fil pour ton problème / ta question qui concerne spécifiquement ton code / ton site…
Merci Papy JP j'y vais de suite
Audrasjb, Le truc c'est que ca concerne tjrs le même sujet du menu
Je suis allée voir sur l'ordi de mes parents et le menu ne se centre pas.
Ca mache sur Safari, Opera, mais pas IE et pas non plus IPAD.

Pour Accueil, par exemple qui n'a pas de sous menu
comment je l'introduis ?

Accueil n'a pas de sous menu, je le présente comment ?
<ul id="menu-demo2">
<li><a href="#">ACCUEIL</a></li> /* si je le présente comme ca certains sous menus d'autres liens ne marche plus*/

<li><a href="#">Lien menu 1</a> /* Iici commence le lien avec le sous menu*/
<ul>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
</ul>

Audrasjb tu pourras me répondre ce soir quand tu auras le temps stp ?
Merci aussi à JP
Bonjour,

Peux-tu mettre à jour ta page de tests avec un menu intégrant l'item accueil, pour que les forumeurs puisse constater le souci ?
Oui bien sûr et encore merci de me répondre
http://www.votre-faire-part.com/test.htm
http://www.votre-faire-part.com/feuille.css

Audrasjb, j'ai suivi tes conseils au niveau du centrage
J'ai enlevé mes balises
#menu-demo2 a{
text-decoration:none;
display:block;
padding:18px 22px;


que j'ai remplacé par tes balises
#menu-demo2 a{
text-decoration:none;
display: table-cell;
vertical-align: middle;
padding: 22px;


PROBLEME 1
ET LE MENU A L'AIR DE BIEN SE CENTRER, MAIS AU SURVOL DU LIEN "FETES"
le background s'est rétréci et du coup j'ai les liens sur 2 lignes !

PROBLEME 2
La maison (accueil) ne se centre pas avec le menu
D'ailleurs il est juste mon code pour insérer une image dans le menu ?
Je ne l'ai pas faire en CSS car je ne savais pas si c'était possible

Et enfin le PROBLEME 3
Entre la maison et lien, j'aimerai mettre un nouveau lien MAIS qui n'a pas de sous menu "Faire part pas cher"
Est-ce que mon code est juste stp ?
<ul id="menu-demo2">
  <img src="image/accueil.jpg" />
      <li><a href="#">FAIRE PART PAS CHER</a></li>
	<li><a href="#">FÊTES</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li>
</ul>


ENCORE MERCI POUR TOUT !!
Sujet clos
Aller à