Aide pour placement de menu au centre

Nouveau WRInaute
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; } }
 
Nouveau WRInaute
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>
 
Nouveau WRInaute
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
 
Nouveau WRInaute
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>
 
Nouveau WRInaute
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; } }
 
Nouveau WRInaute
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>
 
Nouveau WRInaute
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) {
 
Nouveau WRInaute
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à
 
Discussions similaires
Haut