Menu

Problème HTML/CSS

Messages postés
1
Date d'inscription
samedi 5 janvier 2019
Dernière intervention
5 janvier 2019
-
Bonjour,
Je débute en HTML/CSS et j'ai quelques problèmes avec les exemples de sites internet sur lesquels je m'entraine, que je m'entraine à créer.
Mon problème est le suivant :
- Dans tous les sites que j'ai "codé" j'usqu'à maintenant, les bords ne collent pas au bords de la page web.
J'inscris le code HTML : (je débute hein :) )
<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style/style.css">
   <title>Accueil</title>
     <link rel="apple-touch-icon" sizes="57x57" href="Fav-Icon/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="Fav-Icon/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="Fav-Icon/apple-icon-72x72.png">
     <link rel="apple-touch-icon" sizes="76x76" href="Fav-Icon/apple-icon-76x76.png">
     <link rel="apple-touch-icon" sizes="114x114" href="Fav-Icon/apple-icon-114x114.png">
     <link rel="apple-touch-icon" sizes="120x120" href="Fav-Icon/apple-icon-120x120.png">
     <link rel="apple-touch-icon" sizes="144x144" href="Fav-Icon/apple-icon-144x144.png">
     <link rel="apple-touch-icon" sizes="152x152" href="Fav-Icon/apple-icon-152x152.png">
     <link rel="apple-touch-icon" sizes="180x180" href="Fav-Icon/apple-icon-180x180.png">
     <link rel="icon" type="image/png" sizes="192x192"  href="Fav-Icon/android-icon-192x192.png">
     <link rel="icon" type="image/png" sizes="32x32" href="Fav-Icon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="Fav-Icon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="Fav-Icon/favicon-16x16.png">
     <link rel="manifest" href="Fav-Icon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="Fav-Icon/ms-icon-144x144.png">
     <meta name="theme-color" content="#ffffff">
   <div id="Nomsite"><p>PIRATE-LAB</p></div>
  </head>
  <body>
   <div id="menu">
    <ul>
     <li><a href="Index.html">INDEX</a></li>
     <li><a href="Produits.html">PRODUITS</a></li>
     <li><a href="téléchargements.html">TÉLÉCHARGEMENTS</a></li>
    </ul>
   </div>
   <div id="contenu">
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra iaculis felis ut ultricies. Duis porta dapibus nisl at finibus. Duis efficitur magna nec est vehicula suscipit. Etiam orci tellus, aliquet sit amet ligula ut, mollis dictum eros. Etiam commodo condimentum est. Suspendisse sit amet velit vel felis aliquet blandit sit amet sit amet enim. Donec euismod tortor ut lobortis vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus.

    </p>
   </div>
   <div id="footer">
    <p>Master | All rights reserved</p>
   </div>

  </body>
 </html>


Puis le CSS : ( je débute aussi ;) )
#head {
 margin: 0;
 float: left;
 position: relative;
}

#body {
 float: left;
 margin: 0;
 position: relative;
}


#menu {
 width: 100%;
 height: 100px;
 position: relative;
 background-color: #242424;
 display: block;

}

#menu ul {
 float: left;
 position: relative;
 margin-left: -60px;
 left: 50%;
}

#menu ul li {
 list-style-type: none;
 margin-left: 80px;
 float: left;
 padding-top: 10px;
 position: relative;
 left: -50%;
}

#menu ul li a {
 text-decoration: none;
 position: relative;
 color: white;
 display: inline-block;
 height: 35px;
 width: 170px;
 background-color: #3F3D3D;
 text-align: center;
 padding-top: 15px;
}

#menu ul li a:hover {
 background-color: black;
 transition: 1s;
}

#Nomsite {
 display: block;
 text-align: center;
 margin-top: 0;
 background-color: black;
 width: 100%;
 height: 100px;
 color: white;
 padding-top: 30px;


}

#contenu {
 float: left;
 width: 900px;
 text-align: center;
}

#footer {
 float: left;
 width: 100%;
}


EDIT : Ajout des balises de code

Donc voilà, si quelqu'un sait pourquoi les bords de #menu ne collent pas je suis preneur !
Merci d'avance


Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
Messages postés
5238
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
14 janvier 2019
1767
1
Merci
Salut

et bien pour commencer dans le css enleve le # a body !!!

dans ton exemple body est une balise et n a pas d'id ,ce qui d'ailleur est la regle puisque il ne peut y avoir q un seul body dans une page html , donc inutile de lui donner une id ou une class ! meme chose si tu avais mis une balise
html
dans ton css elle non plus n a pas besoin d'id ou de class

a+


♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 56106 internautes nous ont dit merci ce mois-ci

Commenter la réponse de RAD ZONE
Messages postés
4962
Date d'inscription
mercredi 30 octobre 2013
Dernière intervention
19 janvier 2019
923
0
Merci
Bonjour
il faut déjà préciser a quoi tu veux que ton menu colle. car avec toutes les amrges que tu as mis, difficile de savoir où tu veux positionner ton menu
Commenter la réponse de elgazar