Aligner logo à gauche du menu par LilyWoopii - page 1

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>

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 :)

LilyWoopii

13 juin 2018 à 17:01:31