I've been self learning php and i know the basic concepts and i decided to put it to practice by creating a php blog. i'm having trouble styling it with css.Any suggestions.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kagori mainpage</title>
<link rel="stylesheet" type="text/css" href="kagori.css">
</head>
<body>
<div class="header" >
<ul>
<li><a href="kagori.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact us</a></li>
</ul>
</div>
<div class="banner"></div>
<div class="content" >
My Blog<hr/>
<?php
$sql=mysql_query("SELECT*FROM kgtable ORDER BY id DESC");
while($row=mysql_fetch_array($sql)){
$title=$row['title'];
$content=$row['content'];
$category=$row['category'];
?>
<table>
<tr><td><?php echo $title?> </td><td><?php echo $category ?> </td></tr>
<tr><td colspan='2'> <?php echo $content?> </td></tr>
</table>
<?php
}
?>
</div>
<div class="footer"></div>
</body>
<html>
CSS
body {
background: #bfc4c0;
}
.header{
display: block;
position: absolute;
top: 0px;
width: 100%;
left: 0px;
height: 35px;
background: #313632;
}
.header ul {
margin: 0;
padding: 0;
}
.header ul li {
display: inline;
list-style-type: none;
}
.header li a {
color: #22eb57;
display: block;
float: left;
padding: 5px 10px;
text-decoration: none;
}
.header li a:hover {
text-decoration: underline;
}
.banner{
display: block;
position: absolute;
width: 1000px;
height: 300px;
background: url("http://i1273.photobucket.com/albums/y404/Edward_Gichuru/kagoribann_zps6e150f8d.jpg") center ;
top:45px;
left: 199px;
}
.content{
display: block;
position: absolute;
top: 360px;
width: 100%;
height: 300px;
left: 0px;
background: transparent;
}
.footer{
display: block;
position: absolute;
top: 700px;
width: 100%;
left: 0px;
height: 50px;
background: #313632;
}
Before you post, read our: 
