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.
Afficher la suite