Partage
  • Partager sur Facebook
  • Partager sur Twitter

Aligner logo à gauche du menu

    13 juin 2018 à 17:01:31

    Bonjour,

    J'aimerais avoir dans mon header à gauche mon logo puis, à la droite du logo un menu, mais pour l'instant je n'y arrive pas, mon logo se superpose au menu.

    Voici mon code:

    <html >
    <head>
    <meta charset="UTF-8" />
    <title>Team</title>
    </head>
    <body>
      <header>
       <div id="logoheader">
          <img id="logo" src="Images/logo.png" alt="logo""/>
       </div>
      
      <nav>
        <ul>
          <li class="menu_project"><a href="project.html">Project</a>
    	<ul class="submenu">
    	  <li><a href="#">Description</a></li>
    	  <li><a href="#">Design</a></li>
    	  <li><a href="#">Experiments</a></li>
    	  <li><a href="#">Notebook</a></li>
    	  <li><a href="#">Interlab</a></li>
    	  <li><a href="#">Model</a></li>
    	  <li><a href="#">Results</a></li>
    	  <li><a href="#">Demonstrate</a></li>
    	  <li><a href="#">Improve</a></li>
    	  <li><a href="#">Attrinutions</a></li>
    	  </ul>
          </li>
          
          <li class="menu_team"><a href="team.html">Team</a>
    	<ul class="submenu">
    	  <li><a href="#">Team Members</a></li>
    	  <li><a href="#">Collaborations</a></li>
    	</ul>
          </li>
          
          
          <li class="menu_parts"><a href="parts.html">Parts</a>
    	<ul class="submenu">
    	<li><a href="#">Parts Overview</a></li>
    	<li><a href="#">Basic Parts</a></li>
    	<li><a href="#">Composite Parts</a></li>
    	<li><a href="#">Part Collection</a></li>
    	</ul>
          </li>
          
        
          <li class="menu_hp"><a href="humanPractices.html">Human Practices  </a>
    	<ul class="submenu">
    	  <li><a href="#">Human Practices</a></li>
    	  <li><a href="#"> Education & Engagement</a></li>
    	  </ul> 
          </li>
         
    	
        
          <li class="menu_safety"><a href="safety.html">Safety</a></li>
          
          <li class="menu_judgingForm"><a href="judgingForm.html">Judging Form</a></li>
          
          <li class="menu_awards"><a href="awards.html">Awards</a>
    	<ul class="submenu">
    	  <li><a href="#">Applied Design</a></li>
    	  <li><a href="#">Entrepreneurship</a></li>
    	  <li><a href="#">Hardware</a></li>
    	  <li><a href="#">Measurement</a></li>
    	  <li><a href="#">Model</a></li>
    	  <li><a href="#">Plant</a></li>
    	  <li><a href="#">Software</a></li>
    	  </ul>
          </li>
          
          
        </ul>
      </nav>
      
    </header>
    </body>
    </html>
    
    

    et 

    body{
        font-family:Helvetica,serif;
        margin:0px;
        padding:0px;
    }
    
    nav > ul{
        margin: 0px;
        padding:0px;
       
        
    }
    
    
    /* On affiche seulement les éléments li correspondant à
    nos onglets de menus en ligne (côte à côte) */
    nav > ul > li{
        float:left;
      position:relative;
       
    }
    
    /* On enlève les puces devant tous les éléments li
    appartement à notre élément nav */
    
    nav li{
        list-style-type: none;
    }
    
    .submenu{
        display: none;
    }
    
    nav{
        width:100%;
        background-color:#424558;
        display:inline-block;
        vertical-align:top;
      
    }
    
    nav >ul::after{
        content:"";
        display:block;
        clear: both;
    }
    
    nav a {
        display: inline-block;
        text-decoration:none;
    }
    
    nav > ul > li > a {
        padding: 20px 30px;
        color: #FFF;
    }
    
    nav li:hover .submenu{
        display: inline-block;
        position: absolute;
        top:100%;
        left:0px;
        padding:0px;
        z-index:100000;auto
    }
    
    .submenu li{
        border-bottom: 1px solid #CCC;
    }
    
    .submenu li a {
        padding: 15px 30 px;
        font-size: 13 px;
        color:#222538;
        width:270px;
    }
    
    .menu_project:hover{
        border-top: 5 px solid #e44d26;
        background-color: RGBa(228, 77, 38, 0.15);
    }
    
    .menu_team:hover{
        border-top: 5px solid #0070bb;
        background-color: RGBa(000, 112, 192, 0.15);
    }
    
    .menu_parts:hover{
        border-top:  5px solid #f1dc4f;
        background-color: RGBa(241, 211, 79, 0.15);
    }
    
    .menu_hp:hover{
        border-top: 5px solid #BBB;
        background-color: RCBa(220,220, 220, 0.15);
    }
    
    .menu_awards:hover{
        border-top: 5px solid #e6ccff;
        background-color: RCBa(245,236, 20, 0.15);
    }
    
    
    
    
    #logo{
    position:absolute;
    top:10px;
    left:10px; 
    width:90px;
    height:90px; 
    }
    
    
    

    Pouvez-vous m'aider? merci :) 

    • Partager sur Facebook
    • Partager sur Twitter
      15 juin 2018 à 12:51:34

      Bonjour,

      Ton logo doit être dans le même ul que ton menu.

      Ensuite, tu pourras appliquer la propritété css display: flex ou display: inline-block sur ton menu pour l'afficher correctement.

      • Partager sur Facebook
      • Partager sur Twitter
      "Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain
        15 juin 2018 à 13:42:44

        Salut,

        Ou plus simplement, applique un display: flex; sur ton header.

        • Partager sur Facebook
        • Partager sur Twitter
        Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
          15 juin 2018 à 18:46:29

          Bonjour LilyWoopii,

          Un exemple mais pas flexbox, c'est cela que tu voulais?

          https://codepen.io/Zonecss/pen/jKGaBm

          Il faut juste déplacer le background-color sur le header et mettre #logoheader et nav en  display:inline-block

          -
          Edité par AliasDmc 15 juin 2018 à 18:52:44

          • Partager sur Facebook
          • Partager sur Twitter
          Découvrez les Css avec la zonecss.fr

          Aligner logo à gauche du menu

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown