wsrgroup
11 Apr 2011, 04:34 PM
Hi I am working on building a custom template for Joomla 1.5, currently I am in the stage of writing the semantic HTML/CSS prior to coding for Joomla. I have built 1 template previously with success. However it did not impliment Suckerfish Dropdown menus. I am having a problem with my menus showing correctly and was wondering if someone could help. I will provide the HTML and CSS below.
Thank you
HTML---
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>High Alpha Partners Home Page Joomla Template</title>
<script type="text/javascript" src=""></script>
<style type="text/css" media="screen">
@import url("css/template.css");
</style>
</head>
<body>
<div id="container"><!--container goes here-->
<div id="header">
<h1>High Alpha Partners, Inc.</h1>
</div><!--//header-->
<!-- Begin #container2 this holds the content and sidebars-->
<div id="container2">
<!-- Begin #container3 keeps top positioned-->
<div id="container3">
<!-- Begin #topcontent-->
<div id="topcontent">
</div><!-- End #topcontent-->
</div><!--//container3-->
<!-- Begin #container4 keeps the left col and body positioned-->
<div id="container4">
<!-- Begin #content this holds 3 content boxes-->
<div id="content">
<div class="contentbox">
<h2>Investment Strategy</h2>
<p>Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Cras eget tellus libero, in dictum ipsum. Sed fringilla tellus ac leo faucibus adipiscing.</p>
</div>
<div class="contentbox">
<h2>Target Investment</h2>
<p>Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Cras eget tellus libero, in dictum ipsum. Sed fringilla tellus ac leo faucibus adipiscing.</p>
</div>
<div class="contentbox">
<h2>Investment Opportunites</h2>
<p>Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Cras eget tellus libero, in dictum ipsum. Sed fringilla tellus ac leo faucibus adipiscing.</p>
</div>
</div><!-- //content -->
<!-- #left sidebar this holds homepage text-->
<div id="sidebarLT">
<h3>Catchy Headline Speaking About Site Company Etc.</h3>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam nonummy nibh euismod tincid unt ulaoredolore agna aliquam erat volutpattisi enmd mini veniam, quinostrud exerci tation ullamcorper susipit lobortis nisl ut aliquip ex ea commodo consquatuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dol ore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam nonummy nibh euismod tincidunt ut laoredoloragna aliquam erat volutpattisi enmd minim veniamsnostrud exerci tationullamcorper suscipit lobortisnisl ut liquip ex ea commodo consequatuis autem vel eum iriure dolor in hendrerit in vulputate velit</p>
</div><!--//sidebarLT -->
<!-- #right sidebar this holds content for sign up-->
<div id="sidebarRT">
<h3>Sign Up Headline</h3>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam</p>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam</p>
<h4>Sub Headline</h4>
<div class="signupbut">
<p>Click Here To Become A Member Today</p>
</div>
</div><!--//sidebarRT -->
</div><!--//container4-->
<div id="pushbottom"> </div><!--//this div will span across the 3 divs above it making sure the footer stays at the bottom of the longest column-->
</div><!--//container2-->
<div id="top_navlist">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</li>
<li><a href="#">Investment Strategy</a></li>
<li><a href="#">Target Investments</a></li>
<li><a href="#">Investment Opportunities</a></li>
<li><a href="#">Clients</a></li>
</ul>
</div><!--//top_navlist-->
<div id="footer">
<p>© 2010 High Alpha Partners, Inc. All Rights Reserved. Designed & Developed by <a href="http://www.thewsrgroup.com">The WSR Group</a>.</p>
</div><!--//footer-->
</div><!--//container-->
</body>
</html>
CSS ---
/*
Enter Joomla! 1.5 Design & Creation Comments Here
*/
/*////////// GENERAL //////////*/
body {
margin: 0px;
padding: 0px;
}
#container {
margin: 0 auto;
margin-top: -10px;
width: 880px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
#container2 {
background-color: #C00;
float:left;
}
#container3 {
background-color: #CCC;
width: 860px;
margin-top:40px;
padding: 10px;
float:left;
}
#container4 {
background-color: #CF0;
width: 860px;
float:left;
padding: 10px;
margin-bottom:20px;
}
#pushbottom {
clear:both;
}
/*////////// TYPEOGRAPHY //////////*/
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 18px;
}
a {
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
a:visited {}
/*////////// HEADERS //////////*/
#header {
background-color: #F60;
width: 880px;
height: 120px;
}
/*////////// CONTENT //////////*/
#topcontent {
background-color: #FF9;
width: 860px;
height: 320px;
float: left;
}
#content {
background-color: #9FF;
width: 860px;
margin-bottom: 10px;
float:left;
}
.contentbox {
background-color: #9F9;
width: 245px;
margin: 10px;
padding: 10px;
float: left;
}
/*////////// SIDEBARS //////////*/
#sidebarLT {
background-color: #F96;
padding: 10px;
margin-right: 10px;
width:620px;
float:left;
}
#sidebarRT {
background-color: #F39;
width: 190px;
padding: 10px;
float: left;
}
/*////////// NAV //////////*/
#top_navlist {
position: absolute;
}
.menu, .menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 880px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.menu li { /* all list items */
position: relative;
float: left;
line-height : 1.25em;
}
.menu li a {
width: 880px;
line-height: 40px;
display : inline;
color:#000;
list-style-type: none;
font-weight: bold;
text-decoration: none;
text-align: center;
padding-left: 44px;
}
#.menu #current a{
color: #16c1f3;
text-decoration: underline;
}
.menu ul ul{
top:auto;
}
.menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{
display:none;
}
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
display:block;
}
/*////////// FORMS //////////*/
/*////////// FOOTER //////////*/
#footer {
background-color: #369;
float:left;
height: 65px;
width: 880px;
text-align:center;
}
/*////////// IMAGES //////////*/
/*////// FUN CLASSES ///////////*/
/*any little extra flares and fun design
elements you want to add can go here*/
Thank you
HTML---
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>High Alpha Partners Home Page Joomla Template</title>
<script type="text/javascript" src=""></script>
<style type="text/css" media="screen">
@import url("css/template.css");
</style>
</head>
<body>
<div id="container"><!--container goes here-->
<div id="header">
<h1>High Alpha Partners, Inc.</h1>
</div><!--//header-->
<!-- Begin #container2 this holds the content and sidebars-->
<div id="container2">
<!-- Begin #container3 keeps top positioned-->
<div id="container3">
<!-- Begin #topcontent-->
<div id="topcontent">
</div><!-- End #topcontent-->
</div><!--//container3-->
<!-- Begin #container4 keeps the left col and body positioned-->
<div id="container4">
<!-- Begin #content this holds 3 content boxes-->
<div id="content">
<div class="contentbox">
<h2>Investment Strategy</h2>
<p>Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Cras eget tellus libero, in dictum ipsum. Sed fringilla tellus ac leo faucibus adipiscing.</p>
</div>
<div class="contentbox">
<h2>Target Investment</h2>
<p>Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Cras eget tellus libero, in dictum ipsum. Sed fringilla tellus ac leo faucibus adipiscing.</p>
</div>
<div class="contentbox">
<h2>Investment Opportunites</h2>
<p>Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Cras eget tellus libero, in dictum ipsum. Sed fringilla tellus ac leo faucibus adipiscing.</p>
</div>
</div><!-- //content -->
<!-- #left sidebar this holds homepage text-->
<div id="sidebarLT">
<h3>Catchy Headline Speaking About Site Company Etc.</h3>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam nonummy nibh euismod tincid unt ulaoredolore agna aliquam erat volutpattisi enmd mini veniam, quinostrud exerci tation ullamcorper susipit lobortis nisl ut aliquip ex ea commodo consquatuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dol ore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam nonummy nibh euismod tincidunt ut laoredoloragna aliquam erat volutpattisi enmd minim veniamsnostrud exerci tationullamcorper suscipit lobortisnisl ut liquip ex ea commodo consequatuis autem vel eum iriure dolor in hendrerit in vulputate velit</p>
</div><!--//sidebarLT -->
<!-- #right sidebar this holds content for sign up-->
<div id="sidebarRT">
<h3>Sign Up Headline</h3>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam</p>
<p>Lorem ipsum dolor sit amonsectetuer adipiscing elied diam</p>
<h4>Sub Headline</h4>
<div class="signupbut">
<p>Click Here To Become A Member Today</p>
</div>
</div><!--//sidebarRT -->
</div><!--//container4-->
<div id="pushbottom"> </div><!--//this div will span across the 3 divs above it making sure the footer stays at the bottom of the longest column-->
</div><!--//container2-->
<div id="top_navlist">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</li>
<li><a href="#">Investment Strategy</a></li>
<li><a href="#">Target Investments</a></li>
<li><a href="#">Investment Opportunities</a></li>
<li><a href="#">Clients</a></li>
</ul>
</div><!--//top_navlist-->
<div id="footer">
<p>© 2010 High Alpha Partners, Inc. All Rights Reserved. Designed & Developed by <a href="http://www.thewsrgroup.com">The WSR Group</a>.</p>
</div><!--//footer-->
</div><!--//container-->
</body>
</html>
CSS ---
/*
Enter Joomla! 1.5 Design & Creation Comments Here
*/
/*////////// GENERAL //////////*/
body {
margin: 0px;
padding: 0px;
}
#container {
margin: 0 auto;
margin-top: -10px;
width: 880px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
#container2 {
background-color: #C00;
float:left;
}
#container3 {
background-color: #CCC;
width: 860px;
margin-top:40px;
padding: 10px;
float:left;
}
#container4 {
background-color: #CF0;
width: 860px;
float:left;
padding: 10px;
margin-bottom:20px;
}
#pushbottom {
clear:both;
}
/*////////// TYPEOGRAPHY //////////*/
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
p {
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 18px;
}
a {
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
a:visited {}
/*////////// HEADERS //////////*/
#header {
background-color: #F60;
width: 880px;
height: 120px;
}
/*////////// CONTENT //////////*/
#topcontent {
background-color: #FF9;
width: 860px;
height: 320px;
float: left;
}
#content {
background-color: #9FF;
width: 860px;
margin-bottom: 10px;
float:left;
}
.contentbox {
background-color: #9F9;
width: 245px;
margin: 10px;
padding: 10px;
float: left;
}
/*////////// SIDEBARS //////////*/
#sidebarLT {
background-color: #F96;
padding: 10px;
margin-right: 10px;
width:620px;
float:left;
}
#sidebarRT {
background-color: #F39;
width: 190px;
padding: 10px;
float: left;
}
/*////////// NAV //////////*/
#top_navlist {
position: absolute;
}
.menu, .menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 880px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.menu li { /* all list items */
position: relative;
float: left;
line-height : 1.25em;
}
.menu li a {
width: 880px;
line-height: 40px;
display : inline;
color:#000;
list-style-type: none;
font-weight: bold;
text-decoration: none;
text-align: center;
padding-left: 44px;
}
#.menu #current a{
color: #16c1f3;
text-decoration: underline;
}
.menu ul ul{
top:auto;
}
.menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{
display:none;
}
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
display:block;
}
/*////////// FORMS //////////*/
/*////////// FOOTER //////////*/
#footer {
background-color: #369;
float:left;
height: 65px;
width: 880px;
text-align:center;
}
/*////////// IMAGES //////////*/
/*////// FUN CLASSES ///////////*/
/*any little extra flares and fun design
elements you want to add can go here*/