0
J'ai essayé de mettre le margin-bottom de mon entête div à 0 et margin-top à 0 pour mon div de navigation. Rien ne semble fonctionner.J'ai un espace/espace inconnu entre mon nom et les divs de navigation. J'ai essayé de chercher des réponses mais rien ne semble offrir de correctif
Lorsque je définis ma marge-bas sur mon div de navigation, je peux sûrement ajouter de l'espace entre ma navigation et le conteneur div pas de problème.
Je semble n'avoir aucun contrôle sur le mouvement de mon div de navigation par rapport à mon cap.
* {
box-sizing: border-box;
}
a:link {
color: black;
}
a:hover {
color: white;
}
ul {
padding: 0;
list-style-type: none;
}
.container {
width: 1000px;
background: red;
margin: 0 auto;
}
.heading {
height: 100px;
background: beige;
text-align: center;
font-size: 20pt;
text-shadow: 0.1em 0.1em white;
font-family: "cookie";
}
.navigation {
height: 50px;
width: 1000px;
background: lightblue;
font-family: sans-serif;
line-height: 50px;
text-align: center;
}
.navigation ul li {
display: inline;
margin: 0 40px;
}
.navigation ul li a {
text-decoration: none;
}
.content {
min-height: 600px;
background: beige;
width: 666px;
float: left;
margin-bottom: 10px;
padding: 0 15px;
text-align: center;
font-family: sans-serif;
}
.content-heading {
font-family: sans-serif;
min-height: 50px;
line-height: 50px;
text-align: center;
}
.sidebar-heading {
min-height: 50px;
width: 334px;
background: lightgreen;
float: right;
text-align: center;
font-family: sans-serif;
}
.sidebar-content {
width: 334px;
min-height: 550px;
background: lightgreen;
float: right;
padding: 0 15px;
text-align: center;
font-family: sans-serif;
margin-bottom: 10px;
}
.footer {
clear: both;
background: lightblue;
height: 50px;
text-align: center;
font-family: sans-serif;
}
.heading-child {
line-height: 100px;
}
.sidebar-heading-child {
line-height: 50px;
}
.footer-child {
line-height: 50px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Cookie:regular"]
}
});
</script>
</head>
</head>
<body>
<div class="container">
<div class="heading">
<h1 class="heading-child">All I Want is Whirled Peas!</h1>
</div>
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<div class="content-heading"><strong>Welcome</strong></div>
This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content of the content section. This is content
of the content section. This is content of the content section. This is content of the content section. This is content of the content section.
</div>
<div class="sidebar-heading">
<div class="sidebar-heading-child"><strong>Additional Info</strong></div>
</div>
<div class="sidebar-content">
Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello this is sidebar content. Hello
this is sidebar content. Hello this is sidebar content.
</div>
<div class="footer">
<div class="footer-child">Website created by Josh © 2017</div>
</div>
</div>
</body>
</html>
utilisez Google pour les marges et vous effondrant comprendre pourquoi la réponse ci-dessous est correcte – Pete