Signaler

Comment mettre le aiside a gauche HTML5/CSS3 [Résolu]

Posez votre question mobrobot 28Messages postés vendredi 13 janvier 2017Date d'inscription 5 octobre 2017 Dernière intervention - Dernière réponse le 8 avril 2017 à 06:11 par mobrobot
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.
Utile
+0
plus moins
bsr désolé trop compliquer pour moi
Donnez votre avis
Utile
+0
plus moins
s'il vous plais aidez moi a résoudre ce problème
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !