<?php
include ("includes/db.php");
?><!Doctype HTML>
<head>
<title>Ecommerce Layout</title>
<link rel="stylesheet" href="styles/style.css"
media="all"/>
</head>
<body>
<!-----Main Container Starts--->
<div class="main_wrapper">
<!-----Header Section Starts--->
<div class="header_wrapper">
<img src="images/logo.gif" style="float:left">
<img src="images/ad_banner.gif" style="float:right">
</div>
<!-----Header Section Ends--->
<!-----navbar Section Starts--->
<div id="navbar">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">All Products</a></li>
<li><a href="#">My account</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">Contact Us</a></li></ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="Search a Product"/>
<input type="submit" name="search" value="Search"/>
</form>
</div>
</div>
<!-----navbar Section Ends--->
<!-----content Area Starts--->
<div class="content_wrapper">
<div id="right_content">right_content</div>
<div id="left_sidebar">left_sidebar</div>
<div id="sidebar_title">Categories</div>
<ul id="cats">
<?php
$get_cats="select * from categories";
$run_cats=mysqli_query($con,$get_cats);
while($row_cats=mysqli_fetch_array($run_cats)){
$cat_id=$row_cats['cat_id'];
$cat_title=$row_cats['cat_title'];
echo"<li><a href='index.php?cat=$cat_id'>$cat_title</a></li>";
} ?>
</ul>
<div id="sidebar_title">Brands</div>
<ul id="cats">
<?php
$get_brands="select * from brands";
$run_brands=mysqli_query($con,$get_brands);
while($row_brands=mysqli_fetch_array($run_brands)){
$brand_id=$row_brands['brand_id'];
$brand_title=$row_brands['brand_title'];
echo"<li><a href='index.php?brand=$brand_id'>$brand_title</a></li>";
} ?>
</ul>
</div>
<!-----content Area Ends--->
<!-----Footer Area Starts--->
<div class=footer>
<h1 style=" color:#000; text-align:center; padding-top:10px;">© - By SystemWebTech</h1>
</div>
<!-----Footer Area Ends--->
</div>
<!-----Main Container End--->
</HTML> <!-----css reset code starts --->
save in style folder with name styles.css styles/style.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
<!-----css reset code End --->
.body {background:#39C;}
.main_wrapper{
width:1000px;
height:auto;
margin:auto;
}
.header_wrapper{
width:1000px;
height:100px;
background:#FFF;
}
#navbar{
width:1000px;
height:50px;
background:#999;
color:#FFF;
}
#menu{
padding:0;
line-height:36px;
margin-top:5px;
float:left;
}
#menu li{
list-style:none;
display:inline;
}
#menu a{
color:#FFF;
text-decoration:none;
font-size:18px;
margin:5px;
padding:10px;
}
#menu a:hover{
text-decoration:underline;
colr:#333;
font-weight:bolder
}
#form{float:right; line-height:50px; padding-right:5px;}
.content_wrapper{
width:1000px;
height:600px;
background:#F96;
}
#right_content{
width:800px;
height:600px;
background:#FCC;
float:right;
}
#left_sidebar{
width:200px;
height:600px;
background:#000;
float:left;
}
.footer{
width:1000px;
height:100px;
background:#999;
color:#FFF;
clear:both;
}
#sidebar_title{
background:#FFF;
color:#000;
padding:10px;
font-size:22px;
font-family:"Palatino Linotype","Book Antiqua", Palatino , serif;
}
#cats{
text-align:center;
padding:10px;
}
#cats li{
list-style:none;
margin:5px;
}
#cats a{color:#FFF; font-size:20px; text-decoration:none; margin:5px; }
#cats a:hover{ color:#F93; text-decoration:underline; font-weight:bold;}
include ("includes/db.php");
?><!Doctype HTML>
<head>
<title>Ecommerce Layout</title>
<link rel="stylesheet" href="styles/style.css"
media="all"/>
</head>
<body>
<!-----Main Container Starts--->
<div class="main_wrapper">
<!-----Header Section Starts--->
<div class="header_wrapper">
<img src="images/logo.gif" style="float:left">
<img src="images/ad_banner.gif" style="float:right">
</div>
<!-----Header Section Ends--->
<!-----navbar Section Starts--->
<div id="navbar">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">All Products</a></li>
<li><a href="#">My account</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">Contact Us</a></li></ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="Search a Product"/>
<input type="submit" name="search" value="Search"/>
</form>
</div>
</div>
<!-----navbar Section Ends--->
<!-----content Area Starts--->
<div class="content_wrapper">
<div id="right_content">right_content</div>
<div id="left_sidebar">left_sidebar</div>
<div id="sidebar_title">Categories</div>
<ul id="cats">
<?php
$get_cats="select * from categories";
$run_cats=mysqli_query($con,$get_cats);
while($row_cats=mysqli_fetch_array($run_cats)){
$cat_id=$row_cats['cat_id'];
$cat_title=$row_cats['cat_title'];
echo"<li><a href='index.php?cat=$cat_id'>$cat_title</a></li>";
} ?>
<div id="sidebar_title">Brands</div>
<ul id="cats">
<?php
$get_brands="select * from brands";
$run_brands=mysqli_query($con,$get_brands);
while($row_brands=mysqli_fetch_array($run_brands)){
$brand_id=$row_brands['brand_id'];
$brand_title=$row_brands['brand_title'];
echo"<li><a href='index.php?brand=$brand_id'>$brand_title</a></li>";
} ?>
</ul>
</div>
<!-----content Area Ends--->
<!-----Footer Area Starts--->
<div class=footer>
<h1 style=" color:#000; text-align:center; padding-top:10px;">© - By SystemWebTech</h1>
</div>
<!-----Footer Area Ends--->
</div>
<!-----Main Container End--->
</HTML> <!-----css reset code starts --->
save in style folder with name styles.css styles/style.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
<!-----css reset code End --->
.body {background:#39C;}
.main_wrapper{
width:1000px;
height:auto;
margin:auto;
}
.header_wrapper{
width:1000px;
height:100px;
background:#FFF;
}
#navbar{
width:1000px;
height:50px;
background:#999;
color:#FFF;
}
#menu{
padding:0;
line-height:36px;
margin-top:5px;
float:left;
}
#menu li{
list-style:none;
display:inline;
}
#menu a{
color:#FFF;
text-decoration:none;
font-size:18px;
margin:5px;
padding:10px;
}
#menu a:hover{
text-decoration:underline;
colr:#333;
font-weight:bolder
}
#form{float:right; line-height:50px; padding-right:5px;}
.content_wrapper{
width:1000px;
height:600px;
background:#F96;
}
#right_content{
width:800px;
height:600px;
background:#FCC;
float:right;
}
#left_sidebar{
width:200px;
height:600px;
background:#000;
float:left;
}
.footer{
width:1000px;
height:100px;
background:#999;
color:#FFF;
clear:both;
}
#sidebar_title{
background:#FFF;
color:#000;
padding:10px;
font-size:22px;
font-family:"Palatino Linotype","Book Antiqua", Palatino , serif;
}
#cats{
text-align:center;
padding:10px;
}
#cats li{
list-style:none;
margin:5px;
}
#cats a{color:#FFF; font-size:20px; text-decoration:none; margin:5px; }
#cats a:hover{ color:#F93; text-decoration:underline; font-weight:bold;}