Cydo Entis Cydo Entis - 8 days ago 4
CSS Question

Website layout not positioning right

I am trying to make a template for my website from scratch and everything was going good until I wanted to make a news bar underneath my navbar and welcome message bar. For some reason the spot that would be for news goes above the navbar and I can't figure out why!

Screen shot



body {
margin: 0;
background: #0e0e0f;
font-family: Impact;
font-size: 22px;
}
#navbar {
text-align: left;
margin-top: 55px;
}
#navbar ul li {
display: inline;
text-align: center;
}
#navbar ul li {
margin: 10px;
color: rgba(255, 255, 255, 0.2);
text-transform: uppercase;
}
#navbar ul li a {
text-decoration: none;
}
#navbar ul li a:hover {
color: yellow;
}
#navbar ul li a:visited {
text-decoration: none;
color: rgba(255, 255, 255, 0.2);
}
#navbar ul li a:visited:hover {
text-decoration: none;
color: yellow;
}
#top-container {
margin: 0;
background: black: ;
background: linear-gradient(black, grey);
width: 100%;
height: 650px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
}
#welcome-message {
margin: 250px 150px 100px 300px;
color: white;
}
.main-content {
width: 100%;
height: 650px;
background: #1f1f21;
background-size: cover;
margin-top: 700px;
}

<!DOCTYPE html>
<html>

<head>
<title>Placeholder</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div id="top-container">
<nav id="navbar">
<ul>
<li><a href="#Home" class="active">Place Holder</a>
</li>
<li><a href="#">Place Holder</a>
</li>
<li><a href="#">Place Holder</a>
</li>
<li><a href="#">Place Holder</a>
</li>
<li><a href="#">Place Holder</a>
</li>
<li><a href="#">Place Holder</a>
</li>
</ul>
</nav>
<h1 id="welcome-message">Welcome to<br>
Place holder!</h1>
</div>
<div class="main-content">
<h1>News Placeholder</h1>
</div>
</body>

</html>




Answer

I removed position:absolute from #top-container and margin-top: 700px; from .main-content.

You have bug in background: black:; inside #top-container. Remove : to fix it.

Your code is not pretty but this solved your problem. Here is live example:

body {
	margin: 0;
	background: #0e0e0f;
	font-family: Impact;
	font-size: 22px;
}
h1 {
    margin-top: 0;
}
#navbar{
	text-align: left;
	margin-top: 55px;
}

#navbar ul li{
	display: inline;
	text-align: center;
}


#navbar ul li{
    margin: 10px;
    color:rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

#navbar ul li a{
    text-decoration: none;
}

#navbar ul li a:hover{
	color: yellow;
}
#navbar ul li a:visited{
    text-decoration: none;
    color:rgba(255, 255, 255, 0.2);
}
#navbar ul li a:visited:hover{
    text-decoration: none;
    color: yellow;
}

#top-container{
	margin: 0;
	background: black;
	background: linear-gradient(black, grey);
	width: 100%;
	height: 650px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#welcome-message{
	margin: 250px 150px 100px 300px;
	color: white;
}

.main-content{
	width: 100%;
	height: 650px;
	background: #1f1f21;
	background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
  <title>Placeholder</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
	<div id="top-container">
	<nav id="navbar">
	  <ul>
	    <li><a href="#Home" class="active">Place Holder</a></li>
	    <li><a href="#">Place Holder</a></li>
	    <li><a href="#">Place Holder</a></li>
	    <li><a href="#">Place Holder</a></li>
	    <li><a href="#">Place Holder</a></li>
	    <li><a href="#">Place Holder</a></li>
	  </ul>
	</nav>
		<h1 id="welcome-message">Welcome to<br>
		Place holder!</h1>
	</div>
	<div class="main-content">
		<h1>News Placeholder</h1>
	</div>

</body>
</html>

Edit:

To remove bar of space between both content areas remove margin from h1. Check updated code.