Sujet Précédent Sujet Suivant

Problème HTML/CSS

Résolu/Fermé
Ipa_ Messages postés 1 Date d'inscription samedi 5 janvier 2019 Statut Membre Dernière intervention 5 janvier 2019 - Modifié le 5 janv. 2019 à 17:55
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 6 janv. 2019 à 10:51
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


A voir également:

2 réponses

Réponse 1 / 2
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié le 6 janv. 2019 à 11:06
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+

1
Réponse 2 / 2
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
5 janv. 2019 à 16:50
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
0

Discussions similaires

&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses