CODEWITHSUNDEEP
htmlcss
Jad
Jad

Reputation: 3

Why it doesn't appear

Before 1 min I started in developing a website.

At first I started in making the position of the header fixed then I made the wrapper div that called "all" but this div didn't appear please give me a solution.

body {
  margin: 0px;
  padding: 0px;
  font-size: 1.5em;
  font-family: Haettenschweiler;
}

#header {
  height: 60px;
  background: #363333;
  position: fixed;
  width: 100%;
}

.header {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

#logo {
  float: left;
  font-size: 40px;
  color: white;
}

#menu {
  float: right;
  margin-right: 200px;
}
.menu{
	list-style-type:none;	
}
.menu li{
	float:right;
	font-size:24px;
	display:block;
	min-width:125px;	
	text-align:center;
	margin-left:5px;
}
.menu li a{
	min-width:125px;
	display:block;
	color:white;
	text-decoration:none;	
}

#all {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  font-family: Gloucester MT;
}
#left{
	float:left;
	background:yellow;
	width:13%;
}
#right{
	float:right;
	background:yellow;
	width:13%;
}
#center{
	margin-left:auto;
	margin-right:auto;
	background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="header">
	<div class="header">
		<div id="logo">1111</div>
		<div id="menu">
			<ul class="menu">
				<li><a href="1.php">1</a></li>
				<li><a href="2.php">2</a></li>
				<li><a href="3.php">3</a></li>
				<li><a href="4.php">4</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="all">
	<div id="left">sadf</div>
	<div id="right">sasadf</div>
	<div id="center">sadf</div>
</div>
</body>
</html>

Upvotes: 0

Views: 38

Answers (3)

jussius
jussius

Reputation: 3274

Because your #header div has position:fixed it will not affect the positioning of other elements (i.e #all div). So the divs get rendered on top of each others. Try removing position:fixed from header if there's no need for it. Otherwise you have to manually move the #all div downwards a bit.

Upvotes: 0

Francisco Romero
Francisco Romero

Reputation: 13199

Display your .all div with position: relative; and set a top value equals to the height of the header.

This is because if you do not set position: relative; it is being displayed taking as reference the parent(the webpage) so it is the reason why your .all div is displayed in the top-left corner of your webpage.

The header is displayed above of your .all div because it is fixed, and fixed elements goes out of the normal flow.

body {
  margin: 0px;
  padding: 0px;
  font-size: 1.5em;
  font-family: Haettenschweiler;
}

#header {
  height: 60px;
  background: #363333;
  position: fixed;
  width: 100%;
}

.header {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

#logo {
  float: left;
  font-size: 40px;
  color: white;
}

#menu {
  float: right;
  margin-right: 200px;
}
.menu{
	list-style-type:none;	
}
.menu li{
	float:right;
	font-size:24px;
	display:block;
	min-width:125px;	
	text-align:center;
	margin-left:5px;
}
.menu li a{
	min-width:125px;
	display:block;
	color:white;
	text-decoration:none;	
}

#all {
  position: relative;
  top: 60px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  font-family: Gloucester MT;
}
#left{
	float:left;
	background:yellow;
	width:13%;
}
#right{
	float:right;
	background:yellow;
	width:13%;
}
#center{
	margin-left:auto;
	margin-right:auto;
	background:red;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="header">
	<div class="header">
		<div id="logo">1111</div>
		<div id="menu">
			<ul class="menu">
				<li><a href="1.php">1</a></li>
				<li><a href="2.php">2</a></li>
				<li><a href="3.php">3</a></li>
				<li><a href="4.php">4</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="all">
	<div id="left">sadf</div>
	<div id="right">sasadf</div>
	<div id="center">sadf</div>
</div>
</body>
</html>

Upvotes: 1

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

The #all div is sitting behind the #header div.

It's concealed by the height of this div because when you set an element's position to absolute or fixed you're taking it out of the flow of the document.

Declaring a padding-top rule, equal to, or great than the height of #header will push #all down far enough into view.

Example:

#all {
    padding-top: 60px;
}

In-browser Developing & Troubleshooting Tip
If you inspect these elements through your browser's developer tool you can see how they stack in relation to each other. For example, chrome will highlight the element on your screen when you hover over the mark-up of said element in the developer tool console/IDE.

Upvotes: 0

Related Questions