Step 1: the css file
Open default.css file saved into CSS folder:
PAGE STRUCTURE
------------------------------ */
/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, solve an issue with #container height */
in css 2 column layout.
*/
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
/* ------------------------------
PAGE ELEMENTS #NAVBAR
------------------------------ */
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
This is the final css file default.css (see also this post about the site structure).
Step 2: index.php
Copy and paste this code into index.php:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
<body>
<div id="container">
<div id="topbar"> ...topbar content... </div>
<!-- #navbar -->
<div id="navbar">
<ul>
<li><a href="index.php?home">Home</a></li>
<li><a href="index.php?signup">Signup</a></li>
<li><a href="index.php?login">Login</a></li>
<li><a href="index.php?about">About</a></li>
</ul>
</div>
<!-- the main section where all pages will be loaded using URL variables and PHP include() function -->
<div id="main">
<div id="column_left">
<?php
//If is defined URL variable 'signup'
if(isset($_GET['signup'])){
// include page signup
include('include/in-signup.php');
//else if is defined URL variable 'login'
} else if(isset($_GET['login'])){
// include page login
include('include/in-login.php');
//else if is defined URL variable 'about'
} else if(isset($_GET['about'])){
// include page 'about'
include('include/in-about.php');
// in all other cases include the home page
} else {
include('include/in-home.php');
}
?>
</div>
<div id="column_right"> ...column right content... </div>
<!-- this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
</div>
</body>
</html>
No comments:
Post a Comment