Here is your code:
TEMPLATE CODE:
Code: Select all
<!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" xml:lang="en" >
<head>
<title>{title}</title>
{metadata}
{stylesheet}
</head>
</__body>
{content}
<__body>
</__html>
CONTENT:
Code: Select all
<div id="content">
<div id="header">
<div class="topong">
<div class="pad"><img src="lightbiz2/images/cart.gif" alt="My Cart" />
<h4><a href="#" title="My Cart">VIEW CART</a></h4>
<br />
<span class="txt">Lorem Ipsum Dolore</span></div>
</div>
<div class="topong">
<div class="pad"><img src="lightbiz2/images/account.gif" alt="Account" />
<h4><a href="#" title="My Account">MY ACCOUNT</a></h4>
<br />
<span class="txt">Lorem Ipsum Dolore</span></div>
</div>
<h1><span class="green bigl">B</span>usiness<span class="green bigl">N</span>ame</h1>
<span class="slogan">Place You Best Slogan Here</span></div>
<div id="menuline">
<div id="mleft"><!-- Start Navigation -->
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='cssmenu.tpl'} <hr class="accessibility" />
</div>
<!-- End Navigation --></div>
<div id="mright">{search}</div>
</div>
<div id="modules">
<div id="mod3">
<div class="padding"><img src="lightbiz2/images/img.gif" alt="" />
<div class="price"><span class="only">ONLY</span><br />
$95.99</div>
<div class="text">
<h2><a href="#" title="">LOREM IPSUM</a></h2>
<p>Curabitur sed augue. Cras eu lectus. Nullam lectus. Nam tempor blandit quam!</p>
</div>
</div>
</div>
<div id="mod2">
<div class="padding"><img src="lightbiz2/images/img.gif" alt="" />
<div class="price"><span class="only">ONLY</span><br />
$35.99</div>
<div class="text">
<h2><a href="#" title="">LOREM IPSUM</a></h2>
<p>Curabitur sed augue. Cras eu lectus. Nullam lectus. Nam tempor blandit quam!</p>
</div>
</div>
</div>
<div id="mod1">
<div class="padding"><img src="lightbiz2/images/img.gif" alt="" />
<div class="price"><span class="only">ONLY</span><br />
$17.99</div>
<div class="text">
<h2><a href="#" title="">LOREM IPSUM</a></h2>
<p>Curabitur sed augue. Cras eu lectus. Nullam lectus. Nam tempor blandit quam!</p>
</div>
</div>
</div>
</div>
<div id="maincontent">
<div id="introduction">
<h2>Suspendisse <span class="green">magna</span> est</h2>
<p>Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna est, faucibus et, tincidunt ac, vehicula a, mi. Ut sed enim. Duis volutpat, neque at dictum volutpat, nibh augue ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br />
<br />
<a class="readm" href="#" title="">Read more...</a></p>
</div>
<div id="rightside">
<h2>Latest <span class="green">News</span></h2>
<p><span class="date">12.03.2006</span><br />
Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna est, faucibus et, tincidunt ac, vehicula a, mi. <br />
<a class="readm" href="#" title="">Read more...</a></p>
<p><span class="date">11.17.2006</span><br />
Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna est, faucibus et, tincidunt ac, vehicula a, mi. <br />
<a class="readm" href="#" title="">Read more...</a></p>
<p><span class="date">11.05.2006</span><br />
Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna est, faucibus et, tincidunt ac, vehicula a, mi. <br />
<a class="readm" href="#" title="">Read more...</a></p>
</div>
<div id="leftside">
<div class="r">
<h2>Ipsum <span class="green">Diam</span></h2>
Duis volutpat, neque at dictum volutpat, nibh augue ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc.</div>
<div class="le">
<h2>Nec <span class="green">auctor</span></h2>
Duis volutpat, neque at dictum volutpat, nibh augue ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>. Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc.</div>
<div class="pad">
<h2>Suspendisse <span class="green">magna</span> est</h2>
<p>Proin tincidunt viverra eros. Phasellus id felis. Proin dui. Etiam tristique. Aliquam erat volutpat. Suspendisse magna est, faucibus et, tincidunt ac, vehicula a, mi. Ut sed enim. Duis volutpat, neque at dictum volutpat, nibh augue ornare velit, nec auctor <a href="#" title="">ipsum diam at nibh</a>.</p>
<div class="rs">
<ul>
<li>List line 1</li>
<li>List line 2</li>
<li>List line 3
<ul>
<li>Sublist line 1</li>
</ul>
</li>
</ul>
</div>
<p>Aenean vel massa eu lorem pretium faucibus. Aenean porttitor, augue non ullamcorper vestibulum, ligula lectus pulvinar nunc, tristique consectetuer leo enim et diam. Aenean lorem lectus, luctus id, volutpat ut, accumsan ac, risus. Phasellus sit amet nunc. <strong>Cum sociis</strong> natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br />
<a class="readm" href="#" title="">Read more...</a></p>
</div>
</div>
</div>
<div id="footer">
<p class="right">Copyright © 2006 Your Company, Design: <a href="http://www.free-css-templates.com" title="Designed by David Herreman">free-css-templates.com</a></p>
<p><a href="#">RSS Feed</a> · <a href="#">Contact</a> · <a href="#">Accessibility</a> · <a href="#">Products</a> · <a href="#">Disclaimer</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a></p>
</div>
</div>
Code: Select all
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
#menu_vert {
margin-left: 0px;
margin-right: 0px;
}
/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background : url(images/menubg.gif) repeat-x;
border-bottom: 0px solid #C0C0C0;
width: 100%;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 200px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0;
padding: 10px 10px 10px 10px;
text-decoration: none;
color: #fff;
background: transparent;
font-family : "Tahoma", Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
#primary-nav li a {
border-right: 0px solid #C0C0C0;
border-left: 0px solid #C0C0C0;
}
#primary-nav li li a {
border: 0px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
background : url(images/menubg.gif) repeat-x;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #C7C7C7;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #E7AB0B;
height: 40px;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
You can now play with CSS to make it looks like you want. Hope it helps you.
Bojan
