Comment mettre le aiside a gauche HTML5/CSS3

Résolu/Fermé
mobrobot Messages postés 173 Date d'inscription vendredi 13 janvier 2017 Statut Membre Dernière intervention 8 mai 2023 - Modifié le 7 avril 2017 à 21:06
mobrobot Messages postés 173 Date d'inscription vendredi 13 janvier 2017 Statut Membre Dernière intervention 8 mai 2023 - 8 avril 2017 à 06:11
Bonsoir s'il vous plais, je voudrais votre aide. je suis bloquer a ce niveau je voudrais mettre le aside de mon site a gauche et la section au milieu voici les code de ma page: 

<!DOCTYPE html>
<html>
 <head>
  <title>Mon Site Datamobmee</title>
  <meta charchet="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <header>
   <h1>Datamobmee</h1>
  </header>
   <nav>
    <div class="table">
     <ul>
      <li class="menu-acc">
         <a href="Acceuil.html" rel="nofollow noopener noreferrer" target="_blank">Acceuil</a>
      </li>
      <li class="menu-jeu">
       <a href="jeux.html" rel="nofollow noopener noreferrer" target="_blank">Jeux</a>
      </li>
      <li class="menu-and">
       <a href="android.html" rel="nofollow noopener noreferrer" target="_blank">Android</a>
      </li>
      <li class="menu-win">
       <a href="logiciel.html" rel="nofollow noopener noreferrer" target="_blank">Windows</a>
      </li>
      <li class="menu-mac">
       <a href="mac_os.html" rel="nofollow noopener noreferrer" target="_blank">Mac OS</a>
      </li>
      <li class="menu-act">
       <a href="actuallite.html" rel="nofollow noopener noreferrer" target="_blank">Tech New</a>
      </li>
      <li class="menu-for">
       <a href="forume.html" rel="nofollow noopener noreferrer" target="_blank">Forum</a>
      </li>
      <li class="menu-con">
       <a href="contact.html" rel="nofollow noopener noreferrer" target="_blank">Contact</a>
      </li>
      <li class="menu-apr">
       <a href="apropos.html" rel="nofollow noopener noreferrer" target="_blank">Apropos</a>
      </li>
     </ul>
   </nav>
 <article>
      <section id="document">
        <div class="right">
          <h2 class="vert">SanDisk Ultra Fit 64Go</h2>
         <p>Performance indentiques au modele prececedent mais ergonomie</p>
         <p>totalement differente. Cette cle minuscule seulement deux</p>
         <p>centimetre et comporte un capuchon protecteur transparent.quand</p>
         <p>la cle est inseree dans l'ordinateur on apercoit une petite piece en</p>
         <p>plastique portant le logo de SanDisk, qui depasse a peine et dont la</p>
         <p>taille est juste suffisante pour que l'on puisse la saisir.</p>
        
  
            <h2 class="east">Decouvrez le Samsung Galaxy S8</h2>
         <p>Côte MVNO, NRJ Mobile propose le Galaxy S8 au prix de 349,99 euro</p>
         <p>en cas de souscription a un forfait 20 Go (64,99 euros par mois,</p>
         <p>engagement de 24 mois). Les clients optant pour un forfait 10 Go</p>
         <p>(42,99 euros par mois) pourront avoir le smartphone pour 469,99</p>
         <p>euros,tandis que les personnes souscrivant à un forfait 5 Go ou 3 Go</p>
         <p>l'auront pour 579,99 euros</p>
      
               <h2 class="ouest">Les Jeux Android Les Plus populaire</h2>
               <h3>Jeux Action</h3>
               <p>Modem Combat 3, Moderm Combat 4, Moderm Combat 5</p>
               <p>GTA SA Pour telecharger ces jeux vidéo cliquer ici<a href="http://play.mob.org" rel="nofollow noopener noreferrer" target="_blank">Play Mob</a></p>
            <h3>Jeux Sport</h3>
            <p>PES 2017 , NBA 2k17 ,Need For Speed , WWE 2k17</p>
            <P>Pour telecharger ces jeux vidéo cliquer ici<a href="http://play.mob.org" rel="nofollow noopener noreferrer" target="_blank">Play Mob</a></P>
           </div>
      </section>
 </article>
 <article>
  <section>
   
  </section>
 </article>

 <aside>
  <div id="main">
       <ul>
        <li><h2 class="prope">Genre De Jeux</h2></li>
        <li><a href="#action" rel="nofollow noopener noreferrer" target="_blank">Action</a></li>
        <li><a href="#sport" rel="nofollow noopener noreferrer" target="_blank">Sport</a></li>
        <li><a href="#adventure" rel="nofollow noopener noreferrer" target="_blank">dventure</a></li>
        <li><a href="#arcade" rel="nofollow noopener noreferrer" target="_blank">Arcade</a></li>
        <li><a href="#Board" rel="nofollow noopener noreferrer" target="_blank">Board</a></li>
        <li><a href="#fighting" rel="nofollow noopener noreferrer" target="_blank">Fighting</a></li>
        <li><a href="#gambling" rel="nofollow noopener noreferrer" target="_blank">Gambling</a></li>
        <li><a href="#racing" rel="nofollow noopener noreferrer" target="_blank">Racing</a></li>
        <li><a href="#bulls" rel="nofollow noopener noreferrer" target="_blank">Bulls</a></li>
        <li><a href="#logic" rel="nofollow noopener noreferrer" target="_blank">Logic</a></li>
        <li><a href="#simulation" rel="nofollow noopener noreferrer" target="_blank">Simulation</a></li>
        <li><a href="#sport" rel="nofollow noopener noreferrer" target="_blank">Sport</a></li>
        <li><a href="#strategy" rel="nofollow noopener noreferrer" target="_blank">Strategy</a></li>
        <li><a href="#rpg" rel="nofollow noopener noreferrer" target="_blank">RPG</a></li>
        <li><h2 class="propi">Popular Tag:</li>
        <li><a href="#puzzle" rel="nofollow noopener noreferrer" target="_blank">Puzzle</a></li>
        <li><a href="#runner" rel="nofollow noopener noreferrer" target="_blank">Runner</a></li>
        <li><a href="#pixel_art" rel="nofollow noopener noreferrer" target="_blank">Pixel Art</a></li>
        <li><a href="#time_killer" rel="nofollow noopener noreferrer" target="_blank">Time Killer</a></li>
        <li><a href="#match_3" rel="nofollow noopener noreferrer" target="_blank">Match 3</a></li>
        <li><a href="#platformer" rel="nofollow noopener noreferrer" target="_blank">Platformer</a></li>
        <li><a href="#cars" rel="nofollow noopener noreferrer" target="_blank">Cars</a></li>
        <li><a href="#strategy_rpg" rel="nofollow noopener noreferrer" target="_blank">Strategy RPG</a></li>
        <li><a href="#physics" rel="nofollow noopener noreferrer" target="_blank">Physics</a></li>
       </ul>
        </div>
    </aside>

  

   <footer>
    <p>Copyright 2017 - Tout Reproduction Interdite Datamobmee</p>
   </footer>
  <style>
 body{
  font-family:'Century Gothic', Colibri, serif;
  font-size: 13px;*
  margin: 0px;
  padding: 0px;
 }
    h1{
  font-size: 40px;
  font-weight:normal;
  text-align:center;
 }
 header{
  height: 100px;
  }
 footer{
  height: 100px;
  padding-top: 30px;
  text-align:center;
  background-color: #C5C5C5;
  border-bottom:2px solid #AAA;
  clear:both;
  margin-bottom: 0;

 }

   }
 nav li{
  list-style-type: none;
  float: center;
 }
 nav ul{
  margin: 0px;
  padding: 0px;
  display:flex;
     flex-wrap:wrap;

 }
 nav{
  width:2200px;
  background-color: red;
 }
 nav a{
  display: inline-block;
  text-decoration: none;
  padding: 20px 30px;
  color: #FFF;
  text-transform: uppercase;
  font-size: 15px;
    }
    section{
  width:70%;
  margin: 10px;
  padding: 10px;
  float:right;
  margin:0 1.5%;
  

}
  aside{
  float:left;
  padding: 2px;
  margin: 2px;
  width:90px;
  height:0px;
 }

}
#main{
 border:4px;
 margin: 2px;
 padding: 2px;
 background-color:#FF0;
 border-bottom: 2px solid black;
 float:left;
 width:100px;
 
}
.menu-acc:hover{
 border-top:5px  ;
 background-color: #808080;
}
.menu-jeu:hover{
 border-top:5px ;
 background-color:#808080;
}
.menu-and:hover{
 border-top:5px ;
 background-color: #808080;
}
.menu-win:hover{
 border-top: 5px ;
 background-color: #808080;
}
.menu-mac:hover{
 border-top:5px ;
 background-color: #808080;
}
.menu-act:hover{
 border-top:5px;
 background-color: #808080 ;
}
.menu-for:hover{
 border-top:5px ;
 background-color: #808080;
}
.menu-con:hover{
 border-top: 5px ;
 background-color: #808080;
}
.menu-apr:hover{
 border-top:5px;
 background-color: #808080;
}

}
.right{
 float:center;
 width:70%;


}
#document{
 border-top: 5px ;
 background-color: teal;
 
  }

    </style> 
 </body>
</html>

merci d'avence
EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

2 réponses

Réponse 1 / 2
ludo512000 Messages postés 1 Date d'inscription vendredi 7 avril 2017 Statut Membre Dernière intervention 7 avril 2017
7 avril 2017 à 21:03
bsr désolé trop compliquer pour moi
0
Réponse 2 / 2
mobrobot Messages postés 173 Date d'inscription vendredi 13 janvier 2017 Statut Membre Dernière intervention 8 mai 2023 1
8 avril 2017 à 06:11
s'il vous plais aidez moi a résoudre ce problème
0

Discussions similaires

problème de pixel
bernie33260 -
contrariness -

14 réponses
Clic gauche fonctionne très mal
bru561 -
bru561 -

5 réponses
Tous les paragraphes sont considérés comme des titres
FranckS -
romain -

3 réponses
Message d'erreur : ce paramètre source rentre en conflit...
chiwawa38 -
chiwawa38 -

2 réponses
Fonction SI et GAUCHE
lagranderobert -
louiseprout -

4 réponses