1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

MON MENU CSS ne centre pas

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par garancetosello, 1 Décembre 2014.

  1. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Bonjour (re)
    Et voilà c'est encore moi mais avec un nouveau sujet.
    Mon menu ne se centre pas et le sous menu est en escalier
    Quelqu'un pourrait me dire où je me suis plantée
    J'ai pris des petits bouts de codes à droite à gauche et je me mélange les pinceaux
    Merci d"avance
    Code:
    <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>
    [​IMG]
     
  2. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    643
    J'aime reçus:
    1
    Salut,
    envoie le css aussi :)
     
  3. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    Juste une question même pas hors sujet : "Procéder au paiement" c'est une option réelle de ton "futur menu" ?
    Car si c'est le cas autant te dire tout de suite que vue là où tu bloque maintenant, vaux mieux changer des options que tu as pris à la base car a ce stade tu gérera plu rien depuis longtemps et tout sera du mandarin pour toi :wink:

    C'est pas que je veuille te décourager mais avoir les pieds sur terre c'est bien aussi et je sais de quoi je parle j'ai vécu 7 ans sur l'eau et passé 20 ans dans l'air ...
     
  4. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    32 136
    J'aime reçus:
    272
    Bonjour,

    Complément :
    Il y a deux articles intéressants sur AlsacréationS à ce sujet :
    - Créer des menus simples en CSS
    - Centrer les éléments ou un site web en CSS
    .

    Cordialement.
     
  5. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    J'ai tout changé et ca plante encore
    Je vais tout renvoyer (merci de m'avoir répondu)
     
  6. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Oui ça explique comment le paiement va se dérouler.
    Mes clients ne payent pas de suite
    Je leur fais une maquette et si elle leur plait, ils l'achètent.
    Quand ils valident leur commande un lien de ma banque, par mail, leur est envoyé
     
  7. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Bonjour,

    Autant vous dire que je bidouille car je ne connais rien en CSS
    Donc j'y vais pas à pas, mais là ca fait juste 3H20 que je galère et j'ai grave besoin de vous.
    Voilà, j'ai pris un tuto sur http://www.frogweb.fr/menu-deroulant-horizontal/
    Je l'ai bidouillé à ma sauce et bien sûr tt plante

    Déjà voici mes pages
    http://www.votre-faire-part.com/test.htm
    http://www.votre-faire-part.com/feuille.css

    PROBLEME 1
    J'ai rencontré un problème de centrage. Mon menu était bien centré au niveau de la page mais il n'était pas centré au niveau de la hauteur pour se faire j'ai remplacé les balises
    Code:
    #menu-demo2 a{
    text-decoration:none;
    display:block;
    padding:18px 22px;
    Et je l'ai remplacé par celui ci
    Code:
    #menu-demo2 a{
    text-decoration:none;
    display: table-cell;
    vertical-align: middle;
    padding: 22px;
    Et les problèmes ont commencé
    - AU SURVOL DU LIEN "FETES"
    le background s'est rétréci et du coup j'ai les liens sur 2 lignes et sur certains navigateurs les liens écrits dans le sous menu ne sont pas centrés

    PROBLEME 2
    Je voudrais mettre une maison en guise d'accueil dans le menu, mais je ne sais pas comment procéder ?
    Quelqu'un peut m'aider ?

    Et enfin le PROBLEME 3
    Entre la maison et lien, j'ai mis un lien "Faire part pas cher" qui n'a pas de sous menu
    Est-ce que mon code est juste stp ?
    Code:
    <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>
    SVP AIDEZ MOI, je suis au bord de la rupture !!
    Merci merci merci
     
  8. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    Insomnie quand tu nous tiens...

    En reprenant le premier "gros" menu que tu nous a donné, pour avoir quelquechose de plus réaliste, on pourrait avoir un html qui ressemble à:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document sans nom</title>
    <link rel=stylesheet href='page.css'>
    <link rel=stylesheet href='menu.css'>
    </head>
    <body>
    <div id=principal>
            <div id=haut><img src="image/menu-haut.jpg" width="1130" height="329" /></div>
      <div id=menu-principal>
    
    <ul id="menu">
        <li><img src="image/accueil.jpg" />
        <li><a href="#">ACCUEIL</a></li>
        <li><a class=twolines href="#">FAIRE PART<br>PAS CHER</a></li>
        <li><a href="#">BAPTEME</a></li>
        <li><a href="#">MARIAGE</a></li>
        <li><a href="#">NAISSANCE</a></li>
        <li><a href="#">MARIAGE</a></li>
        <li><a href="#">COMMUNION</a></li>
        <li><a href="#">REMERCIEMENT</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">FÊTES</a>
        <ul>
        <li><a href="#">Anniversaire enfant</a></li>
        <li><a href="#">Anniversaire adulte</a></li>
        <li><a href="#">Noël et Voeux</a></li>
        <li><a href="#">Halloween</a></li>
        </ul></li>
        <li><a href="#">CARTES</a>
        <ul>
        <li><a href="#">Carte simple 10.5 X 14 CM</a></li>
        <li><a href="#">Carte double 10.5 X 21 CM (Pliée)</a></li>
        <li><a href="#">Carte longue 10 .5 X 21 CM (Pliée)</a></li>
        <li><a href="#">Carte double couleur 15.8 X 22 (Pliée)</a></li>
        <li><a href="#">Carte double couleur 18 X 25 (Pliée)</a></li>
        </ul></li>
        <li><a class=twolines href="#">PRODUITS<br>ASSORTIS</a>
        <ul>
        <li><a href="#">Poster</a></li>
        <li><a href="#">Dragées</a></li>
        <li><a href="#">Calendrier</a></li>
        <li><a href="#">Set de table</a></li>
        <li><a href="#">Marque place</a></li>
        <li><a href="#">Etiquette adhésive</a></li>
        </ul></li>
        <li><a href="#">A SAVOIR</a>
        <ul>
        <li><a href="#">Témoignage</a></li>
        <li><a href="#">Coup de coeur</a></li>
        <li><a href="#">Nouveautés</a></li>
        <li><a href="#">Tarifs</a></li>
        </ul></li>
        <li><a href="#">AIDE</a>
        <ul>
        <li><a href="#">Exemple de texte</a></li>
        <li><a href="#">Exemple d' écriture</a></li>
        <li><a href="#">Exemple de visualisation</a></li>
        <li><a href="#">Exemple de postures</a></li>
        <li><a href="#">Gabarit à télécharger</a></li>
        <li><a href="#">Procéder au paiement </a></li>
        </ul></li>
    </ul>
    
    </div>
            <div id=contenu> </div>
            <div id=footer> au pied </div>
    </div>
    </body>
    </html>
    
    ... donc on a viré les balises en double introduites par les copier/coller sous dreamweaver, nettoyé les nombreaux noms de classe css qui n'apportaient pas grand chose et séparé le html du css, un fichier "page.css" pour le layout général, et un fichier "menu.css" pour que tu puisses expérimenter (et tu le feras) avec l'un sans impacter l'autre.

    Pour le page.css, on a:
    Code:
    #principal {
    margin: auto;
    width:1130px;
    height:1576px;
    }
    #haut {
    height:329px;
    }
    #menu-principal {
    height:64px;
    background-image: url(image/menu.jpg);
    }
    #contenu {
       margin: auto;
       height:850px;
       background-color: #FFFFFF;
       }
    #footer {
    height:329px;
    background-image: url(image/footer.jpg);
    }
    body {
    background-image: url(image/shutterstock_123635434.jpg);
    }
    
    Pour le menu.css, on a:
    Code:
    ul#menu {
    	margin: 0; padding: 0 10px;
    }
    ul#menu li, ul#menu ul {
    	padding: 0;
    }
    ul#menu li {
    	list-style: none;
    	display: block; float: left;
    	position: relative;
    }
    ul#menu a {
    	font-size: 11px;
    	display: block; 
    	line-height: 64px;
    	height: 64px;
    	padding: 0 10px;
    	text-decoration: none; color: #fff;
    	text-align: center;
    }
    ul#menu ul a {
    	text-align: left;
    }
    ul#menu a.twolines {
    	line-height: 14px;
    	height: 30px;
    	padding: 17px 5px;
    }
    ul#menu li img {
    	padding-top: 17px;
    }
    ul#menu ul li:last-child{	
    padding: 0 0 10px 0;
    border-radius:0 0 8px 8px;
    }
    ul#menu ul{
    	position:absolute;
    	max-height:0;
    	left: -20px;
    	width: 240px;
    	overflow:hidden;
    	-moz-transition: .8s all .3s;
    	-webkit-transition: .8s all .3s;
    	transition: .8s all .3s;
    }
    ul#menu li:hover ul{
    	max-height: 30em;
    }
    ul#menu ul li {
    	background:#fc6fb8;
    }
    ul#menu ul li a {
    	width: 150px;
    	line-height: 12px;
    	height: auto;
    	padding: 15px 20px;
    }
    ul#menu li:hover li a {
    	color: #fff;
    }
    ul#menu li:hover a, ul#menu li li:hover a {
    	color: #000;
    }
    
    Alors, quelques petites remarques à la volée:
    • j'ai dû franchement réduire la taille de caractères: 11px pour afficher toute la barre --> as-tu réellement besoin d'autant de menus de premier niveau?
    • le positionnement du sous-menu est loin d'être top: quand on est trop à droite, il déborde, ce serait à corriger (css / js / plusieurs possibilités)
    • certains menus doivent être repris sur deux lignes pour gagner un peu de place, j'ai ajouté une classe "twolines". On aurait pu travailler avec du inline-block et un vertical align, mais ça m'évoque de douloureux souvenir de tests de compatibilité cross-browser, donc non
    • tu n'as pas de couleur de fond par défaut pour #menu-principal, ce qui fait que si l'image ne se charge pas... on ne voit rien du tout
     
  9. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Olala Cduray tu m'as tt fait !!
    Je t'adore je t'adore !! Merci merci merci
    Tu as raison le menu en haut est trop long
    je vais rebidouiller et j'aurai ss doute encore besoin de toi !!
    Merci merci merci merci
    Merci merci merci merci
    Merci merci merci merci
     
  10. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    N'exagérons rien, je suis marié ;-)

    Pas de souci, c'était avec plaisir
     
  11. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    Hello,
    Je l'ai bidouillé à ma sauce et suivi vos conseils à la lettre
    http://www.votre-faire-part.com/page.html
    http://www.votre-faire-part.com/page.css
    http://www.votre-faire-part.com/menu.css

    - Pour la balise image,
    vous m'aviez dit :
    Code:
      <li><img src="image/accueil.jpg" border="0" />
    il manque un </li>, non ?
    J'ai mis donc ça :
    C'est juste ?
    Code:
    <li><a href=index.html><img src="image/accueil.jpg" border="0" /></a></li>
    - Pour le menu déroulant, ca ne serait pas mieux de ne pas faire de saut de ligne entre les liens mais les uns en dessous des autres ?
    Pouvez-vous me dire dans quel bloc je peux modifier svp ?

    Anniversaire enfant
    Anniversaire adulte


    et non
    Anniversaire enfant
    (saut de ligne)
    Anniversaire adulte
    (saut de ligne)


    - Le menu n'est pas centré sur la longueur
    Dois-je rajouter ?

    display: table-cell;
    vertical-align: middle;

    Mais je ne sais pas où?


    - Et enfin, je voudrais espacer mes liens entre eux,
    et comme d'hab je ne sais pas où ?


    Je suis désolée de vous ennuyer mais je suis une VRAIE débutante.
    J'ai appris le html en tatonant et maintenant je le taperai les yeux fermés
    J'espère qu'il en sera de même pour le CSS
     
  12. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    586
    J'aime reçus:
    0
    pour info, sur mon écran de pc de bureau, j'ai une barre de défilement horizontale à cause de l'image du haut, contenant du texte, qui impose une largeur minimale trop grande.
     
  13. zikeur54
    zikeur54 WRInaute impliqué
    Inscrit:
    15 Juin 2010
    Messages:
    584
    J'aime reçus:
    35
    Félicitations pour une débutante. J'ai abandonné l'apprentissage du html depuis longtemps. Pour le css si ça vous intéresse, je me souviens avoir recopié durant des jours, les pages d'un livre donnant les définitions des propriétés en css 2. Si ça n'est pas trop dépassé, vous pouvez aller y jeter un oeil : http://www.minded.fr/langage/style/.
     
  14. cduray
    cduray Nouveau WRInaute
    Inscrit:
    7 Avril 2008
    Messages:
    38
    J'aime reçus:
    0
    le </li> est optionnel en HTML5, mais tu peux le mettre, ça ne fera pas de mal. Le lien est bon aussi.

    Dans le CSS, la règle
    Code:
    ul#menu ul li a {
            width: 150px;
            line-height: 12px;
            height: auto;
            padding: 15px 20px;
    }
    
    => remplace padding 15px 20px; par padding 5px 20px;

    Je ne suis pas très partisan du table-cell, tu pourrais définir plutôt une margin-left: 30px; (ou plus) sur ul#menu.

    Dans ul#menu a, rajoute margin-left: 10px; par exemple.

    Commence par les bases, box model, cascade, positionnement. Madrileño a mentionné AlsaCréations, c'est une bonne source d'info en ligne
     
  15. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
    pff je suis encore au boulot et jusqu'à tard. J'espère avoir la otiviation pour tester tout ce que vous m'avez dit :?
    Merci pour tout les amis
     
  16. garancetosello
    garancetosello WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    166
    J'aime reçus:
    0
  17. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    T'as déjà 4 polices de caractère différentes sur ta page qui est encore vide c'est franchement pas top (logo, header, menu, contenu) une ou deux c'est bien.
    Ton image de fond est un vrai poster (3 351px × 2 865px 8O ), ça dois pouvoir se faire avec une toute petite image en repeat.
    Le Menu est en majuscule c'est pas top tu devrais imposer ça en CSS si tu y tiens mais garder une présentation normale dans le code.

    Bon après ça fait un peut "fifille" mais je suppose que c'est voulu même si perso je suis pas fan pour deux ronds.
     
  18. Madrileño
    Madrileño Membre Honoré
    Inscrit:
    7 Juillet 2004
    Messages:
    32 136
    J'aime reçus:
    272
    Bonjour,

    Ici le menu est bien au centre.

    Cordialement.
     
Chargement...
Similar Threads - MENU CSS centre Forum Date
Mieux vaut-il un select ou un menu déroulant CSS Développement d'un site Web ou d'une appli mobile 15 Mars 2017
MENU VERTICAL CSS (3 minis questions) Développement d'un site Web ou d'une appli mobile 4 Décembre 2014
[résolu] Elargir un menu en CSS à 100% du contenant Développement d'un site Web ou d'une appli mobile 6 Octobre 2014
Menus déroulants (html + css) et Référencement Débuter en référencement 11 Septembre 2013
Indexation avec fil d'ariane composé de menus déroulants css Référencement Google 27 Avril 2013
(CSS) diffréntes couleur pour liens menu Développement d'un site Web ou d'une appli mobile 18 Janvier 2012
Menu déroulant sur image css Développement d'un site Web ou d'une appli mobile 5 Janvier 2012
Probleme Menu JS + CSS Développement d'un site Web ou d'une appli mobile 24 Février 2011
menu horizontal défilant en css...un problème d'alignement Développement d'un site Web ou d'une appli mobile 1 Novembre 2010
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice