I have a header.php file that serves as the header for every webpage on my website. I include it on every page, but on the index page, it covers the entire screen. How can I adjust the height of the header so that it only appears at the top of the webpage? I want the height of the header to be 150px and the width to span the full page.
body {
font-family: Arial, Helvetica, sans-serif;
padding: 20px 2px 150px;
font-size: 13px;
text-align: right;
background: #E3CAA1;
}
ul {
font-size:15px;
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
z-index:100;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 15px;
background: #6ec749;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 140px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul>li:last-child ul {
right: 4px;
left: auto;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #666;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
li{
font-size:20px;
}
a {
outline: none;
text-decoration: none;
padding: 2px 1px 0;
color:white;
a:link {
color: red;
}
a:visited {
color: purple;
}
a:focus, a:hover {
border-bottom: 1px solid;
color: purple;
}</head>
<body>
<?php include('includes/header.php');?>
<!-- <?php include('includes/sidebar.php');?>-->
<main class="mn-inner">
<div class="row" style="display: block; margin-left: auto; margin-right: auto;">
<div class="col s12">
<h4 style="text-align:center;">Change Password</h4>
</div>
<div class="col s6 m6 " style="position:fixed;margin: auto; background-color: #f3f3f3;top: 40%; left: 25%;" >
<div class="card" >
<div class="card-content">
<div class="row">
<form class="col s12" name="chngpwd" method="post">
<?php if($error){?><div class="errorWrap"><strong>ERROR</strong>:<?php echo htmlentities($error); ?> </div><?php }
else if($msg){?><div class="succWrap"><strong>SUCCESS</strong>:<?php echo htmlentities($msg); ?> </div><?php }?>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate" autocomplete="off" name="password" required>
<label for="password">Current Password</label>
</div>
<div class="input-field col s12">
<input id="password" type="password" name="newpassword" class="validate" autocomplete="off" required>
<label for="password">New Password</label>
</div>
<div class="input-field col s12">
<input id="password" type="password" name="confirmpassword" class="validate" autocomplete="off" required>
<label for="password">Confirm Password</label>
</div>
<div class="input-field col s12">
<button type="submit" name="change" class="waves-effect waves-light btn indigo m-b-xs" onclick="return valid();">Change</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</div>
<div class="row">
<?php include('includes/footer.php');?>
<div>
<!-- Javascripts -->
<script src="assets/plugins/jquery/jquery-2.2.0.min.js"></script>
<script src="assets/plugins/materialize/js/materialize.min.js"></script>
<script src="assets/plugins/material-preloader/js/materialPreloader.min.js"></script>
<script src="assets/plugins/jquery-blockui/jquery.blockui.js"></script>
<script src="assets/js/alpha.min.js"></script>
<script src="assets/js/pages/form_elements.js"></script>
</body>
</html>
<?php } ?>