People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system.
I need assistance in installing a header and site navigation on top of the blog page to match the existing site's layout. While I have been successful with the header, I am facing challenges with positioning the navigation bar below it as shown in the attached image. The task is posing two main difficulties:
- The navigation won't center on the page despite using margin: auto;.
- I cannot seem to place it at the bottom of the header image!
Here is the CSS code for my navigation:
.nav {
width: 950px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44;
border-top: 1px solid #ccf;
border-bottom: 1px solid #ccf;}
.nav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0; }
.nav li {
float: left; }
.nav li a {
display: block;
padding: 2px 20px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff;
border-right: 1px solid #ccf; }
.nav li:first-child a {
border-left: 0px solid #ccf; }
.nav li a:hover {
color: #000;
background-color: #8db3ff; }
#header {
height: 185px;
margin-top: 15px;
background: url(zitemplateChange.jpg);
border-bottom: 30px solid #cc0;
}
and here is the index.php file content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="themes/default/zitemplateChange.css" type="text/css" media="screen" />
</head>
<body>
<div class="nav">
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="review.html">Book Preview</a></li>
<li><a href="http://www.tuirtre.webitry.net/guestbook/index.php">Guestbook</a></li>
<li><a href="javascript:popup()">Tell a Friend</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="javascript:popup1()">Support</a></li>
</ol>
</div>
<!-- PHP script continues for handling sessions, post comments, user sign-in etc. -->
?>
Your support and suggestions are greatly appreciated.