Aide pour placement de menu au centre

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par youandyourclothes, 28 Février 2015.

  1. youandyourclothes
    youandyourclothes Nouveau WRInaute
    Inscrit:
    24 Septembre 2014
    Messages:
    31
    J'aime reçus:
    0
    Bonjour,

    J'espère que la communauté pourra m'aider. Voilà sur mon blog qui est sous Wordpress, j'ai choisi le thème Toutatis que je trouvais bien. Et il me convient à un seul détail que je n'arrive pas à modifier: le menu.
    Je souhaiterai centrer le menu et mettre une bannière afin d'avoir un homme moderne au dessus.
    Je vous remercie d'avance pour ceux qui m'aideront et je vos donne le site: http://www.unhommemoderne.fr et le code:

    Code:
    site-header {
      z-index: 500;
      width: 100%;
      font-weight: bold;
      border-bottom: 1px solid rgba(56, 69, 91, 0.1); }
      .site-header .toutatis-logo {
        width: 30%;
        float: left;
        text-align: left;
        padding: 30px 0; }
        @media only screen and (max-width: 800px) {
          .site-header .toutatis-logo {
            width: 100%;
            padding: 20px 0; } }
        .site-header .toutatis-logo a.logo-text {
          font-size: 26px;
          color: #38455b;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: -1px;
          padding: 3px 0;
          display: inline-block; }
        .site-header .toutatis-logo a.logo-img img {
          max-height: 3000px; }
      .site-header #toggle-menu-icon {
        display: none; }
        @media only screen and (max-width: 800px) {
          .site-header #toggle-menu-icon {
            z-index: 100;
            display: block;
            color: #38455b;
            font-size: 26px;
            float: right;
            padding: 0;
            margin: 0px auto;
            cursor: pointer;
            opacity: 1;
            max-height: 36px;
            transition: 0.1s color ease-in; } }
      .site-header .main-menu {
        width: 70%;
        float: left;
        font-family: 'Quicksand', 'sans-serif'; }
        @media only screen and (max-width: 800px) {
          .site-header .main-menu {
            text-align: center;
            float: none;
            width: 100%; } }
        .site-header .main-menu ul.top-level-menu {
          list-style: none;
          z-index: 10;
          position: relative;
          float: right; }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu ul.top-level-menu {
              float: left;
              display: none;
              width: 100%;
              overflow: hidden; } }
          @media only screen and (min-width: 800px) {
            .site-header .main-menu ul.top-level-menu {
              display: block !important; } }
        .site-header .main-menu li {
          display: inline-block;
          position: relative; }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu li {
              display: block;
              padding: 0; } }
          .site-header .main-menu li:last-child {
            padding-right: 0; }
          .site-header .main-menu li:hover > a {
            color: #ff625b;
            box-shadow: -10px -13px 0px -10px #ff625b inset; }
            @media only screen and (max-width: 800px) {
              .site-header .main-menu li:hover > a {
                box-shadow: none !important; } }
          .site-header .main-menu li:hover .sub-menu {
            display: block; }
          @media only screen and (min-width: 800px) {
            .site-header .main-menu li.current-menu-item a {
              color: #ff625b;
              box-shadow: -10px -13px 0px -10px #ff625b inset; }
     }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu li.current-menu-item a {
              color: #ff625b;
              box-shadow: none !important; }
     }
        .site-header .main-menu a {
          display: inline-block;
          color: #38455b;
          padding: 40px 10px;
          text-decoration: none;
          font-size: 16px; }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu a {
              display: block;
              padding: 20px 0px 17px; } }
    
    .site-header .sub-menu {
      position: absolute;
      background: #fff;
      left: 0;
      right: 0;
      top: 100%;
      display: none;
      min-width: 200px;
      border: 1px solid rgba(56, 69, 91, 0.1);
      border-top: none; }
      @media only screen and (max-width: 800px) {
        .site-header .sub-menu {
          display: block;
          position: static;
          padding-top: 0;
          border: none;
          border-left: 2px solid rgba(56, 69, 91, 0.1); } }
      .site-header .sub-menu li {
        opacity: 1;
        display: inline-block;
        width: 100%; }
        .site-header .sub-menu li:hover > a, .site-header .sub-menu li.current-menu-item a {
          box-shadow: none; }
        @media only screen and (min-width: 800px) {
          .site-header .sub-menu li:hover > a {
            padding-left: 1em; }
     }
      .site-header .sub-menu a {
        color: #38455b;
        font-size: 14px;
        padding: 12px 10px 14px 10px;
        transition: 0.2s color ease-out;
        transition: 0.2s padding ease-out; }
    
    .site-header .sub-menu a {
      font-size: 16px; }
      @media only screen and (max-width: 800px) {
        .site-header .sub-menu a {
          padding-left: 30px;
          opacity: 1; } }
     
  2. concombre
    concombre Nouveau WRInaute
    Inscrit:
    14 Juillet 2014
    Messages:
    41
    J'aime reçus:
    0
    Salut,

    PHP:
    <span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br />.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    z</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">index</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 500</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 100</span><span class="syntaxkeyword">%;<br /></span><span class="syntaxdefault">    font</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">weight</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> bold</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    border</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">bottom</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 1px solid rgba</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">56</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> 69</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> 91</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> 0.1</span><span class="syntaxkeyword">);</span><span class="syntaxdefault"> <br /></span><span class="syntaxkeyword">}<br /><br />.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">toutatis</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">logo </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">/*width: 30%;<br />    float: left;*/<br /></span><span class="syntaxdefault">    float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">/*text-align: left;*/<br /></span><span class="syntaxdefault">    padding</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 30px 0</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br /><br />    text</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">align</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">center</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br />    width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;<br />}<br /><br />[...]<br /><br />.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">main</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">menu </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">/*width: 70%;<br />    float: left;*/<br /></span><span class="syntaxdefault">    display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    font</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">family</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> </span><span class="syntaxstring">'Quicksand'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'sans-serif'</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br /></span><span class="syntaxkeyword">}<br /></</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /><br /><br /></span><span class="syntaxdefault"> </span>
     
  3. youandyourclothes
    youandyourclothes Nouveau WRInaute
    Inscrit:
    24 Septembre 2014
    Messages:
    31
    J'aime reçus:
    0
    Salut, merci pour ta réponse.
    Donc à ce que j'ai compris il faut que je supprime le float: left que je modifie widht: 30% et que je passe à 100%. Texte align, je met quoi à la place du left?

    Par contre pour le menu, je ne sais pas quoi faire... Peux tu me le détailler si cela ne te dérange pas.

    Merci encore
     
  4. concombre
    concombre Nouveau WRInaute
    Inscrit:
    14 Juillet 2014
    Messages:
    41
    J'aime reçus:
    0
    En fait, tu as déjà tout. Y aura peut-être qqls réglages à faire sur la partie Media Queries, mais ça doit marcher comme ça.

    Tu as juste à remplacer.

    PHP:
    <span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /><br /></span><span class="syntaxcomment">/*      ------------------------------- *\<br />        Logo<br />\*      ------------------------------- */<br /><br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">toutatis</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">logo </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">            float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            padding</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 30px 0</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br />            text</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">align</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">center</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> </span><span class="syntaxcomment">/* centrage du titre, le h1 hérite */<br /></span><span class="syntaxdefault">            width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">}<br /><br /><br /></span><span class="syntaxcomment">/*      ------------------------------- *\<br />        Menu<br />\*      ------------------------------- */<br /><br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">main</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">menu </span><span class="syntaxkeyword">{<br /><br /></span><span class="syntaxdefault">            display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            font</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">family</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> </span><span class="syntaxstring">'Quicksand'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'sans-serif'</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br />        </span><span class="syntaxkeyword">}<br /><br /><br /></</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span>
     
  5. youandyourclothes
    youandyourclothes Nouveau WRInaute
    Inscrit:
    24 Septembre 2014
    Messages:
    31
    J'aime reçus:
    0
    Bon alors j'ai fait ce que tu m'as dit mais ça donne quelques choses de bizarre je dois t'avouer... Parce que le logo parfait mais le menu et les titres pas du tout. Est ce que tu pense que je me suis trompé quelques part?

    Code:
    .site-header {
      z-index: 500;
      width: 100%;
      font-weight: bold;
      border-bottom: 1px solid rgba(56, 69, 91, 0.1); }
      .site-header .toutatis-logo {
      float:none
       display:block;
        padding: 30px 0; 
        text-align:center; /* centrage du titre, le h1 hérite */
        width:auto;
        @media only screen and (max-width: 800px) {
    	
        .site-header .toutatis-logo a.logo-text {
          font-size: 26px;
          color: #38455b;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: -1px;
          padding: 3px 0;
          display: inline-block; }
        .site-header .toutatis-logo a.logo-img img {
          max-height: 3000px; }
      .site-header #toggle-menu-icon {
        display: none; }
        @media only screen and (max-width: 800px) {
          .site-header #toggle-menu-icon {
            z-index: 100;
            display: block;
            color: #38455b;
            font-size: 26px;
            float: right;
            padding: 0;
            margin: 0px auto;
            cursor: pointer;
            opacity: 1;
            max-height: 36px;
            transition: 0.1s color ease-in; } }
      .site-header .main-menu {
    		display:block;
    		float:none;
            font-family: 'Quicksand', 'sans-serif'; 
            }
    
        @media only screen and (max-width: 800px) {
          .site-header .main-menu {
            text-align: center;
            float: none;
            width: 100%; } }
        .site-header .main-menu ul.top-level-menu {
          list-style: none;
          z-index: 10;
          position: relative;
          float: right; }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu ul.top-level-menu {
              float: none;
              display: block;
              width: 100%;
              overflow: hidden; } }
          @media only screen and (min-width: 800px) {
            .site-header .main-menu ul.top-level-menu {
              display: block !important; } }
        .site-header .main-menu li {
          display: inline-block;
          position: relative; }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu li {
              display: block;
              padding: 0; } }
          .site-header .main-menu li:last-child {
            padding-right: 0; }
          .site-header .main-menu li:hover > a {
            color: #ff625b;
            box-shadow: -10px -13px 0px -10px #ff625b inset; }
            @media only screen and (max-width: 800px) {
              .site-header .main-menu li:hover > a {
                box-shadow: none !important; } }
          .site-header .main-menu li:hover .sub-menu {
            display: block; }
          @media only screen and (min-width: 800px) {
            .site-header .main-menu li.current-menu-item a {
              color: #ff625b;
              box-shadow: -10px -13px 0px -10px #ff625b inset; }
     }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu li.current-menu-item a {
              color: #ff625b;
              box-shadow: none !important; }
     }
        .site-header .main-menu a {
          display: inline-block;
          color: #38455b;
          padding: 40px 10px;
          text-decoration: none;
          font-size: 16px; }
          @media only screen and (max-width: 800px) {
            .site-header .main-menu a {
              display: block;
              padding: 20px 0px 17px; } }
    
    .site-header .sub-menu {
      position: absolute;
      background: #fff;
      left: 0;
      right: 0;
      top: 100%;
      display: none;
      min-width: 200px;
      border: 1px solid rgba(56, 69, 91, 0.1);
      border-top: none; }
      @media only screen and (max-width: 800px) {
        .site-header .sub-menu {
          display: block;
          position: static;
          padding-top: 0;
          border: none;
          border-left: 2px solid rgba(56, 69, 91, 0.1); } }
      .site-header .sub-menu li {
        opacity: 1;
        display: inline-block;
        width: 100%; }
        .site-header .sub-menu li:hover > a, .site-header .sub-menu li.current-menu-item a {
          box-shadow: none; }
        @media only screen and (min-width: 800px) {
          .site-header .sub-menu li:hover > a {
            padding-left: 1em; }
     }
      .site-header .sub-menu a {
        color: #38455b;
        font-size: 14px;
        padding: 12px 10px 14px 10px;
        transition: 0.2s color ease-out;
        transition: 0.2s padding ease-out; }
    
    .site-header .sub-menu a {
      font-size: 16px; }
      @media only screen and (max-width: 800px) {
        .site-header .sub-menu a {
          padding-left: 30px;
          opacity: 1; } }
    
    .header-bar {
      font-weight: bold; }
      .header-bar .header-bar-title {
        padding: 50px 0;
        font-size: 28px;
        font-weight: bold;
        color: #38455b;
        text-transform: uppercase;
        letter-spacing: -1px; }
      .header-bar #site-breadcrumbs {
        margin: -40px 0 50px;
        font-size: 14px; }
        .header-bar #site-breadcrumbs a {
          text-decoration: none; }
          .header-bar #site-breadcrumbs a:hover {
            text-decoration: underline; }
    
    body.admin-bar .site-header {
      top: 32px !important; }
    
    .menu-toggle {
      background: none;
      border: none;
      font-size: 30px;
      display: none; }
      @media only screen and (max-width: 800px) {
        .menu-toggle {
          display: block; } }
    
     
  6. concombre
    concombre Nouveau WRInaute
    Inscrit:
    14 Juillet 2014
    Messages:
    41
    J'aime reçus:
    0
    Oui tu as oublié une }

    PHP:
    <span class="syntaxdefault">&nbsp;&nbsp;</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header&nbsp;</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">toutatis</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">logo&nbsp;</span><span class="syntaxkeyword">{<br />&nbsp;&nbsp;</span><span class="syntaxdefault">float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none<br />&nbsp;&nbsp;&nbsp;display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">padding</span><span class="syntaxkeyword">:&nbsp;</span><span class="syntaxdefault">30px&nbsp;0</span><span class="syntaxkeyword">;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">text</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">align</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">center</span><span class="syntaxkeyword">;&nbsp;</span><span class="syntaxcomment">/*&nbsp;centrage&nbsp;du&nbsp;titre,&nbsp;le&nbsp;h1&nbsp;hérite&nbsp;*/<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxcomment">/*}*/<br /><br />&nbsp;</span><span class="syntaxdefault"></span>
     
  7. youandyourclothes
    youandyourclothes Nouveau WRInaute
    Inscrit:
    24 Septembre 2014
    Messages:
    31
    J'aime reçus:
    0
    Je viens de la mettre de cette manière et ça change rien. Désolé d'être si mauvais. :(

    Code:
    .site-header {
      z-index: 500;
      width: 100%;
      font-weight: bold;
      border-bottom: 1px solid rgba(56, 69, 91, 0.1); }
      .site-header .toutatis-logo {
      float:none
       display:block;
        padding: 30px 0; 
        text-align:center; /* centrage du titre, le h1 hérite */
        width:auto;  }
        @media only screen and (max-width: 800px) {
     
  8. youandyourclothes
    youandyourclothes Nouveau WRInaute
    Inscrit:
    24 Septembre 2014
    Messages:
    31
    J'aime reçus:
    0
    Ne te prends plus la tête, n'y arrivant pas, j'ai décidé de changer de thème afin de simplifier le problème et vu que l'on m'a dit que le mieux c'était de le changer voilà
     
Chargement...
Similar Threads - Aide placement menu Forum Date
Aide mémoire de fin d’étude Le café de WebRankInfo 12 Août 2022
Une aide pour une fonction récursive... Développement d'un site Web ou d'une appli mobile 18 Juillet 2022
Aide petite regex Développement d'un site Web ou d'une appli mobile 28 Juin 2022
Aide données structurées produits Woocommerce Débuter en référencement 4 Mai 2022
WordPress A l'aide ! Mon site est spammé, mon domain rating prend un sacré coup Débuter en référencement 26 Avril 2022
WordPress Concours SEO : aide pour référencer site sur Boinmadig Demandes d'avis et de conseils sur vos sites 31 Mars 2022
Pose de liens : Besoin d'aide d'ordre technique et besoin d'éclairage Netlinking, backlinks, liens et redirections 9 Mars 2022
De l'aide pour ma localisation dans les balises SEO Demandes d'avis et de conseils sur vos sites 23 Février 2022
Comparateur de prix de bien commun - Aide / partenariat Demandes d'avis et de conseils sur vos sites 23 Décembre 2021
Avis et aide sur quel-canape Demandes d'avis et de conseils sur vos sites 13 Décembre 2021
Besoin d'aide pour le lancement de mon Application Demandes d'avis et de conseils sur vos sites 12 Août 2021
Besoin d'aide pour la compréhension d'une application Développement d'un site Web ou d'une appli mobile 1 Août 2021
J’ai disparu de la SERP… A l’aide Débuter en référencement 25 Juillet 2021
M'aider à comprendre... Demandes d'avis et de conseils sur vos sites 16 Juin 2021
Comment devenir freelance à l’aide d’internet ? Google : l'entreprise, les sites web, les services 17 Mai 2021
Besoin d'aide SEO pour mon site Débuter en référencement 13 Mai 2021
[AIDE] Diffuser des publicités vidéo (pre-roll) avec Ad Manager Monétisation d'un site web 12 Mai 2021
Aide SEO pour mon site investirbordeaux.fr Demandes d'avis et de conseils sur vos sites 3 Mai 2021
Demande d'aide pour mon nouveau site Demandes d'avis et de conseils sur vos sites 12 Avril 2021
Besoin d'aide pour soucis avec le certbot chez OVH - VPS URL Rewriting et .htaccess 6 Avril 2021