Problème HTML/CSS
Résolu
Ipa_
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention -
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 :) )
Puis le CSS : ( je débute aussi ;) )
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
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:
- Problème HTML/CSS
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- Html download - Télécharger - HTML
2 réponses
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
a+
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
htmldans ton css elle non plus n a pas besoin d'id ou de class
a+
