CODEWITHSUNDEEP
css
user4490434
user4490434

Reputation:

Positioning horizontal menu inside header

I'm trying to make a website template and I just started with the header and navbar. I'm trying to position a div with some text inside the #header div. I set the position to relative and I used the top property but it's just not moving. Can someone explain to me why?

Upvotes: 0

Views: 697

Answers (3)

Robin James Kerrison
Robin James Kerrison

Reputation: 1777

You need to remove the semicolon after the #header block in your CSS as this is preventing the browser from reading the next rule in the file:

#header {
  width: 100%;
  height: 700px;
  background-image: url("poro.jpg");
  background-size: 100%;
  text-align: center;
};

That last semicolon shouldn't be there. The same is true of your semicola following the #navbar li and #header-msg blocks.

#header {
	width: 100%;
	height: 700px;
	background-image: url("poro.jpg");
	background-size: 100%;
	text-align: center;
}
#navbar {
	position: relative;
	width: 75%;
	height: 100px;
	top: 100px;
}
#navbar li {
	display: inline;
	padding-right: 40px;
	color: blue;
	position: relative;
	left: 350px;
}
#header-msg {
	position: relative;
	top: 300px;
}
<!DOCTYPE html>
<html>
<head>
	<title>
		Experimenting
	</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
	
	<div id="header">

		<div id="navbar">
			<ul>
				<li class="button">Home</li>
				<li class="button">Shop</li>
				<li class="button">Offers</li>
				<li class="button">FAQ</li>
			</ul>
		</div>

		<div id="header-msg">
			<h1>We sell stuff.</h1>
			<h3>You buy stuff.</h3>
		</div>

	</div>

</body>

</html>

Note: I made the #navbar li have blue text in the snippet so they stand out from the white background.

Upvotes: 1

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

I just gave an extra space after the semicolon.

#header {
	width: 100%;
	height: 700px;
	background-image: url("poro.jpg");
	background-size: 100%;
	text-align: center;
};

#navbar {
	position: relative;
	width: 75%;
	height: 100px;
	top: 100px;
};

#navbar li {
	display: inline;
	padding-right: 40px;
	color: white;
	position: relative;
	left: 350px;
};

#header-msg {
	position: relative;
	top: 500px;
};
<!DOCTYPE html>
<html>
<head>
	<title>
		Experimenting
	</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
	
	<div id="header">

		<div id="navbar">
			<ul>
				<li class="button">Home</li>
				<li class="button">Shop</li>
				<li class="button">Offers</li>
				<li class="button">FAQ</li>
			</ul>
		</div>

		<div id="header-msg">
			<h1>We sell stuff.</h1>
			<h3>You buy stuff.</h3>
		</div>

	</div>

</body>

</html>

Upvotes: 0

Dawid Pawłowski
Dawid Pawłowski

Reputation: 162

First delete semicolons after all { }. Next try to set 

#header {
   width: 100%;
   height: 700px;
   background-image: url("poro.jpg");
   background-size: 100%;
   text-align: center;
   position: relative;
}

and change position of #header-msg to absolute:

#header-msg {
   position: absolute;
   top: 300px;
}

Upvotes: 0

Related Questions