Problème avec mon menu

Kaais
Les bases HTML/CSS

Bonjour, Bonsoir.

J'ai un problème d'affichage avec mon menu j'ai fait deux menu en 1 avec à gauche "Accueil, Equipe etc..." et à droite "Connexion et Inscription" Sauf que mon problème c'est que mes deux menus ne sont pas bien aligner et j'ai un second problème c'est que j'ai un peu de marge au dessus de mon menu.

Mon menu :

http://prntscr.com/ex1l9g

Code HTML :

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Premier Menu -->
<div class="top-bar">
   <div class="nav-left">
      <ul>
      <li><a href="index">Accueil</a></li>
         <li><a href="#">Staff</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Boutique</a></li>
        </ul>
    </div>

<!-- Deuxième Menu -->
   <div class="nav-right">
      <ul>
    <!-- Non Connecté -->
       <?php if(empty($_SESSION['id'])){ ?>
          <li><a href="login">Connexion</a></li>
            <li><a href="register">Inscription</a></li>
        <?php } ?>

    <!-- Connecté -->
       <?php if(!empty($_SESSION['id'])){ ?>
          <li><a href="profil.php?id=<?php echo $_SESSION['id']; ?>">Mon Profil</a></li>
          <?php if($rang >= 700){ ?>
            <li><a href="admin/">Administration</a></li>
        <?php } ?>
           <li><a href="logout">Déconnexion</a></li>
        <?php } ?>

</ul>
   </div>
</div>

Code CSS :

@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700');

body{
   margin: auto;
    padding: auto;
}

.top-bar{
   width: auto;
    height: 80px;
    background-color: #22313F;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}

.top-bar a{
   color: white;
}

.top-bar .nav-left ul{
   list-style-type: none;
}

.top-bar .nav-left li{
   display: inline-block;
    margin-left: 5px;
}

.top-bar .nav-left ul li a{
   float: left;
    text-decoration: none;
    text-transform: uppercase;
}

.top-bar .nav-right ul{
   list-style-type: none;
    float: right;
}

.top-bar .nav-right li{
   padding-right: 15px;
    display: inline-block;
}

.top-bar .nav-right ul li a{
   text-decoration: none;
    text-transform: uppercase;
}

Je vous remercie d'avance.
Passez une bonne journée/soirée.
Cordialement, Kais

2 réponses

Benjamin Derepas
Réponse acceptée

Alors premier problème, tu dois enlever les marges de tes éléments par défaut. Utilises un normalize, un reset ou simplement : 

html{
box-sizing:border-box;
}
*,*:before,*:after{
box-sizing:inherit;
margin:0;
padding:0;
}

Ensuite pour aligner verticalement tes menus, tu peux sois définir une line-height qui ai la valeur du conteneur, sois utiliser flexbox (ce qui t'évitera les float, ils ne sont pas faits pour ça mais pour faire flotter un texte à coté d'une image .
Avec flexbox , tu pourra jouer sur la propriété align-itemssur le parent pour centrer tout ça .

Kaais
Auteur

Merci beaucoup :D