Aide Postionnement article/aside

Aide Postionnement article/aside - HTML/CSS - Programmation

Marsh Posté le 05-12-2014 à 11:09:04    

Bonjour,  
 
Voila mon problème est que je n'arrive pas a positionner mon aside sur la meme ligne que mon article, il ce positionne bien mais reste sur la ligne d'en dessous.
Help Me pliz
 
Mon code HTML :  

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf8" />
  5. <link rel="stylesheet" href="css.css" />
  7. </head>
  8. <body>
  9.  <header><img src="Images\Titre.jpg" alt="">
  10.             </header>
  11.  <nav id="Menu">
  12.                <ul id="Menu01">
  13.   <li id="liste"><a href="Acceuil.html">Acceuil</a> </li>
  14.                   <li id="liste"><a href="Membres.html">Membres</a> </li>
  15.                   <li id="liste"><a href="Pvp.html">Pvp</a></li>
  16.                   <li id="liste"><a href="Pve.html">Pve</a></li>
  17.                   <li id="liste"><a href="Events.html">Events</a></li>
  18.                   <li id="liste"><a href="Contact.html">Contact</a></li>
  19.            </ul>
  20.             </nav>
  22.             <section id="carroussel">
  23.                   <p> carroussel du site SALUT SALUT SALUT SALUT SALUT SALUTSALUT SALUT SALUTSALUT SALUT SALUTSALUT SALUT SALUTSALUT SALUT SALUTSALUT SALUT SALUTSALUT SALUT SALUT</p>
  24.             </section>
  26.             <section>
  28.  <article id="Article">
  29.    <p> Bonjour à tous et bienvenue,</br></br>
  32.                               La guilde " The Dark Angel" est une guilde Pvp/Pve placer sur le serveur Confrérie du Thorium côté Alliance.</br>
  34.                               Il s'agit d'une guilde plutot recente ayant pour objectif de rapidement agrandir ses rangs afin de manger du hordeux en Champs de Batailles côtès ou de sauver Azeroth en Raid.
  35.                               Seulement deux mot sont de rigeur dans notre guilde Entraide et Sympathie, effectivement une personne jouant qui n'aide pas son prochain ne doit pas esperer monter en puissance dans ce jeux.</br>
  37.                               Pour nous rejoindre il ne faut pas avoir un niveau d'objet quelconque, ou etre de tel et tel classe, il faut juste etre sympathique et nous envoyer un mail grâce a l'onglet contact. Vous serez recontacter en jeux sous 24h, il vous faut pour cela fournir votre nom de personnage, votre serveur, un petit message de motivation, votre demande sera traité et vérifier par les chef de la guilde.</br>
  39.                               Vous pouvez aussi allez voir nos prochaines sortie dans l'onglet Events, voir nos membre de Pvp et Pve ansi que chaque personnage presents dans notre guilde avec l'onglet Membres</br>
  42.                               Bonne visite et en esperant que vous nous rejoindrai.</br>
  43.                               MudGuys, GuildMaster
  45.    </p> 
  46.           </article>
  47.           <aside id="Aside">
  48.                         <h4>Connexion</h4>
  49.            <label>Nom de compte :<input type="text" size="22" placeholder="Pseudo"/></label> <br>
  50.            <label>Mot de passe  :<input type="Password" size="22" placeholder="Password" /></label><br>
  51.            <input type="button" name="Validation" value="Connection"></input>
  52.                         <label>  <a href="reinti.html">Mot de passe oublié?</a> <br>
  53.                   </aside>
  54.          </section>
  55.      
  56.          <footer>
  57.                   <h3>Partenaires</h3>
  58.                   <ul id="partnaire">
  59.                         <li><a href="">World Of Warcraft</a> </li>
  60.                         <li><a href="">Millenium</a> </li>
  61.                         <li><a href="">WowHead</a> </li>
  62.                         <li><a href="">Acceuil</a> </li>
  63.                   </ul>
  64.             </footer>
  66. </body>
  67. </html>


 
Mon Code CSS

Code :
  1. html{
  2. /*background-image:url(Images/fond01.jpg) ;*/
  3. background-repeat: no-repeat;
  4. background-position: center;
  5. background-attachment: fixed;
  6. background-size: 100%
  7. }
  9. body{
  10. border: 5px solid black;
  11. margin-left: 160px;
  12. margin-right: 160px;
  13. margin-top: 12px;
  14. }
  17. /*////////////Menu Horizontal////////////*/
  18. #Menu01 {
  19. padding:0;
  20. margin:0;
  21. list-style-type:none;
  22. }
  23. #liste {
  24. margin-left:2px;
  25. float:left;
  26. border-left:1px solid black;
  27. }
  28. #Menu01 #liste a {
  29. display:block;
  30. float:left; 
  31. width:100px;
  32. line-height:50px; /*hauteur de l'image de fond*/
  33. background:black url(images/noir-1.png) repeat-x;
  34. color:#DCDCDC;
  35. text-decoration:none;
  36. text-align:center;
  37. }
  38. #Menu01 #liste a:hover {
  39. background:black url(images/noir-2.png) repeat-x;
  40. color:white;}
  43. section{
  44.  border: 1px solid black;
  45.  float: left;
  46.  max-width: 2000px;
  47.  min-width: 700px;
  48.  margin-top: 12px;   }
  50.  article{
  51.  border: 1px solid black;
  52.  float: left;
  53.  padding: 1em;
  54.  width: 75%;
  55.   }
  57.  aside{
  58.  border: 1px solid black;
  59.  float: right;
  60.  padding: 1em;
  61.  margin-left: 80%;
  62.   }
  65. footer{
  66. border: 1px solid black;
  67.  float: left;
  68.  width: 100%;
  69.  max-width: 2000px;
  70.  min-width: 700px;
  71.  margin-top: 12px;
  72.  margin-bottom: 12px;
  73.   }


 
D'avance Merci
Icdk76800

Reply

Marsh Posté le 05-12-2014 à 11:09:04   

Reply

Marsh Posté le 11-12-2014 à 11:23:17    

Dans ton css tu vires le margin-left de ta balise aside car t'as mis un float:right du coup ça sert à rien à part passer le flux en dessous de ta balise article... et tu fixes la largeur de ton aside avec un width.
 
Je viens de voir un truc degueu aussi:
un id ne s'applique qu'une fois et je vois que t'as mis le même id à toutes tes lignes de ta liste, faut transformer ça en class.


Message édité par FBZ le 11-12-2014 à 11:27:34

---------------
[Feed-back]
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed