Теги <style></style> должны входить только в часть <head></head> документа.Вы также хотите избежать встроенных стилей.Лучше, чем использовать <style></style>, вы должны поместить все стили, которые будут использоваться всеми вашими страницами, в одну таблицу стилей.
Я бы реализовал оболочку (контейнер) и дал бы ширину и положение вашей страницы.Относительно, это выровняет меню нижнего колонтитула в нижней части этого блока (при условии, что это то, что вы пытаетесь достичь).Если нет, отбросьте позицию из контейнера.
Со всеми этими изменениями структура будет выглядеть примерно так.Имейте в виду, что это очень архаичный дизайн, но он должен помочь вам начать.header.php:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
<div class="blue" id="header">
<h1>Header Content</h1>
</div>
index.php / about.php / what.php ...
<?php
$title = 'My About Page';
include('header.php');
?>
<div>Your page contents</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
<ul id="figo">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div><!-- end "container" -->
</body>
</html>
/css / stylesheet.css:
body {
background-color: #F5F5F5;
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 650px;
}
.blue {
background-color: #039;
height: 15%;
}
#figo {
background-color: #039;
position: absolute;
bottom: 0px;
margin: 0;
padding: 0;
width: 100%;
}
#figo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#figo li {
float: right;
}
#figo a {
display: block;
width: 90px;
color: #FFFFCC;
}