Mullet
10 Jan 2011, 12:45 PM
Hey people,
I'm struggling to change my basic "Top-Nav" menu in Volusion. I think I'll be able to style it and such myself once the basics are in place. I hope I'm not asking to much of anyone, with this being my first post.
Below is the html and css. If you need anything more, please just let me know.
Thanks,
Mullet
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>
<!--
DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HERE
DO NOT ADD YOUR OWN META TAGS
ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG
-->
<link href="vspfiles/templates/142/css/Imports.css" rel="stylesheet" type="text/css" />
</head>
<body id="body" >
<!-- ==================== HEADER ==================== -->
<div id="header">
<div id="display_homepage_title">display_homepage_title</div>
<div id="site_tools">
<a href="Config_FullStoreURL">Home</a>
<a href="Config_FullStoreURLshoppingcart.asp">View Cart</a>
<a href="Config_FullStoreURLmyaccount.asp">My Account</a>
<a href="Config_FullStoreURLhelp.asp">Help</a>
</div>
</div>
<div id="top_nav">
<!-- ==================== TOP NAV MENU ==================== -->
<div id="display_menu_1">display_menu_1</div>
</div>
<div class="clear"></div>
<!-- ==================== CONTENT ==================== -->
<div id="content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="left_nav">
<!-- ==================== SEARCH BOX ==================== -->
<div id="display_search_wrapper">
<div id="display_search">
<form action="/SearchResults.asp" method="get" name="SearchBoxForm">
<input type="text" name="Search" class="empty" value="SEARCH" onfocus="if (this.value == 'SEARCH') {this.value = '';}" onblur="if (this.value == '') {this.value = 'SEARCH';}" />
<img src="Config_ImagesFolder/template/search_btn.gif" alt="Search" border="0" align="top" style="cursor: pointer;" onclick="document.forms['SearchBoxForm'].submit();" />
</form>
</div>
</div>
<!-- ==================== LEFT NAV MENUS ==================== -->
<h3 id="Menu2_Title">Menu2 Title</h3>
<div id="display_menu_2">display_menu_2</div>
<h3 id="Menu3_Title">Menu3 Title</h3>
<div id="display_menu_3">display_menu_3</div>
<h3 id="Menu4_Title">Menu4 Title</h3>
<div id="display_menu_4">display_menu_4</div>
<div id="display_promotions_999">display_promotions</div>
</td>
<td id="content_area" valign="top">Content Area</td>
</tr>
</table>
</div>
<!-- ==================== FOOTER ==================== -->
<div id="footer">
<div id="footer_top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220" valign="top">
<ul>
<li class="title">COMPANY INFORMATION</li>
<li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li>
<li><a href="Config_FullStoreURLterms.asp">Terms & Conditions</a></li>
<li><a href="Config_FullStoreURLterms_privacy.asp">Privacy Policy</a></li>
</ul>
</td>
<td width="230" valign="top">
<ul>
<li class="title">MY ACCOUNT</li>
<li><a href="Config_FullStoreURLlogin.asp">Login/Register</a></li>
<li><a href="Config_FullStoreURLorders.asp">Orders</a></li>
<li><a href="Config_FullStoreURLwishlist.asp">My Wishlist</a></li>
</ul>
</td>
<td width="230" valign="top">
<ul>
<li class="title">CUSTOMER SERVICE</li>
<li><a href="Config_FullStoreURLhelp.asp">FAQs</a></li>
<li><a href="Config_FullStoreURLarticles.asp?ID=57">Shipping</a></li>
<li><a href="Config_FullStoreURLreturns.asp">Returns</a></li>
</ul>
</td>
<td valign="top">
<ul>
<li class="title">
<a style="color:#333333; line-height:19px;" href="Config_FullStoreURLterms.asp">
COPYRIGHT © <script type="text/javascript">document.write((new Date()).getFullYear());</script><br />
<span style="text-transform:uppercase;">Config_CompanyNameLegal</span><br />ALL RIGHTS RESERVED
</a>
</li>
<li>
<!--
===========================================================================================
VOLUSION LINK - BEGIN
===========================================================================================
Customer has agreed per Volusion's Terms of Service (http://www.volusion.com/agreement_monthtomonth.asp) to maintain a text hyperlink
to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion.
Removing this link breaches the Volusion agreement.
-->
<a href="http://www.volusion.com" title="Shopping Cart Software" target="_blank">Powered by Volusion</a>
<!--
===========================================================================================
VOLUSION LINK - END
===========================================================================================
-->
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS
a, a:visited, a:active {outline-style:none;}
img {border:none !important;}
.clear { clear:both;}
body{
margin:0px;
padding:0px;
font-size:12px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
background: url(../images/template/body_bg.gif) top left repeat-x;
}
#body a{
text-decoration:none;
}
#body a:hover{
text-decoration:underline;
}
#body img {
border:none;
}
/* ############################### HEADER ############################### */
#header{
width:900px;
height:125px;
margin:0px auto;
padding:0px;
text-align:left;
background: url(../images/template/header_bg.gif) no-repeat left top;
position:relative;
}
#header div#display_homepage_title{
width:600px;
height:23px;
margin:0px;
padding:0px;
position:absolute;
top:59px;
left:12px;
font:32px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#header div#display_homepage_title a{
width:100%;
height:100%;
margin:0px;
padding:0px;
text-align:left;
display:block;
text-indent:-9999px;
text-transform:uppercase;
color:#333;
}
#header div a#homepage_title{
text-indent:0px;
font:32px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
background:none;
font-weight:bold;
}
#site_tools{
margin:0px;
padding:0px;
color:#3c3c3c;
text-align:right;
position:absolute;
top:19px;
right:0px;
}
#site_tools a{
padding:0px 6px;
font-size:11px;
color:#666666;
}
#site_tools a:hover{ color:#000;}
/* ############################### TOP NAVIGATION ############################### */
#top_nav{
width:900px;
height:30px;
margin:0px auto 13px;
padding:0px;
text-align:left;
background:#eeeae2;
}
/* ############################### SEARCH BOX ############################### */
#display_search_wrapper {
width:200px;
margin:0px;
padding:0px;
display:block;
background: url(../images/template/search_bg.gif) top left no-repeat;
}
#display_search{
margin:0px;
padding:0px;
text-align:left;
}
#display_search_wrapper input{
width:174px;
margin:0px;
padding:3px;
height:14px;
font-size:11px;
color:#999999;
border:0px;
text-transform:uppercase;
background:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#display_search_wrapper img{
margin:1px 0 0;
padding:0px;
}
/* ############################### LEFT_NAV ############################### */
#left_nav{
width:200px;
margin:0px;
padding:7px 0 0 0;
text-align:left;
}
#left_nav h3{
width:auto;
margin:0px;
padding:10px 10px 10px 2px;
color:#333333;
text-transform:uppercase;
font-size:16px;
font-weight:bold;
text-align:left;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
/* ############################### PROMOTIONS ############################### */
#display_promotions_999{
margin:0px;
padding:10px 0px;
text-align:center;
vertical-align:middle;
}
/* ############################### CONTENT ############################### */
#content_wrapper {
background:#fff;
}
#content{
width:900px;
margin:0px auto;
padding:0px;
text-align:left;
}
#content_area{
width:756px;
margin:0px;
padding:0 0 0 20px;
text-align:left;
}
#content #content_area table{text-align:left;}
/* ############################### WINTER 09 STYLES ############################### */
.next_page_img{width:auto !important; height:auto !important;}
.previous_page_img{width:auto !important; height:auto !important;}
.soft_add_content_area span, .quantity{color:#000;}
.qe_toolbar_ovr{
z-index:9999 !important;
}
I'm struggling to change my basic "Top-Nav" menu in Volusion. I think I'll be able to style it and such myself once the basics are in place. I hope I'm not asking to much of anyone, with this being my first post.
Below is the html and css. If you need anything more, please just let me know.
Thanks,
Mullet
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>
<!--
DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HERE
DO NOT ADD YOUR OWN META TAGS
ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG
-->
<link href="vspfiles/templates/142/css/Imports.css" rel="stylesheet" type="text/css" />
</head>
<body id="body" >
<!-- ==================== HEADER ==================== -->
<div id="header">
<div id="display_homepage_title">display_homepage_title</div>
<div id="site_tools">
<a href="Config_FullStoreURL">Home</a>
<a href="Config_FullStoreURLshoppingcart.asp">View Cart</a>
<a href="Config_FullStoreURLmyaccount.asp">My Account</a>
<a href="Config_FullStoreURLhelp.asp">Help</a>
</div>
</div>
<div id="top_nav">
<!-- ==================== TOP NAV MENU ==================== -->
<div id="display_menu_1">display_menu_1</div>
</div>
<div class="clear"></div>
<!-- ==================== CONTENT ==================== -->
<div id="content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="left_nav">
<!-- ==================== SEARCH BOX ==================== -->
<div id="display_search_wrapper">
<div id="display_search">
<form action="/SearchResults.asp" method="get" name="SearchBoxForm">
<input type="text" name="Search" class="empty" value="SEARCH" onfocus="if (this.value == 'SEARCH') {this.value = '';}" onblur="if (this.value == '') {this.value = 'SEARCH';}" />
<img src="Config_ImagesFolder/template/search_btn.gif" alt="Search" border="0" align="top" style="cursor: pointer;" onclick="document.forms['SearchBoxForm'].submit();" />
</form>
</div>
</div>
<!-- ==================== LEFT NAV MENUS ==================== -->
<h3 id="Menu2_Title">Menu2 Title</h3>
<div id="display_menu_2">display_menu_2</div>
<h3 id="Menu3_Title">Menu3 Title</h3>
<div id="display_menu_3">display_menu_3</div>
<h3 id="Menu4_Title">Menu4 Title</h3>
<div id="display_menu_4">display_menu_4</div>
<div id="display_promotions_999">display_promotions</div>
</td>
<td id="content_area" valign="top">Content Area</td>
</tr>
</table>
</div>
<!-- ==================== FOOTER ==================== -->
<div id="footer">
<div id="footer_top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220" valign="top">
<ul>
<li class="title">COMPANY INFORMATION</li>
<li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li>
<li><a href="Config_FullStoreURLterms.asp">Terms & Conditions</a></li>
<li><a href="Config_FullStoreURLterms_privacy.asp">Privacy Policy</a></li>
</ul>
</td>
<td width="230" valign="top">
<ul>
<li class="title">MY ACCOUNT</li>
<li><a href="Config_FullStoreURLlogin.asp">Login/Register</a></li>
<li><a href="Config_FullStoreURLorders.asp">Orders</a></li>
<li><a href="Config_FullStoreURLwishlist.asp">My Wishlist</a></li>
</ul>
</td>
<td width="230" valign="top">
<ul>
<li class="title">CUSTOMER SERVICE</li>
<li><a href="Config_FullStoreURLhelp.asp">FAQs</a></li>
<li><a href="Config_FullStoreURLarticles.asp?ID=57">Shipping</a></li>
<li><a href="Config_FullStoreURLreturns.asp">Returns</a></li>
</ul>
</td>
<td valign="top">
<ul>
<li class="title">
<a style="color:#333333; line-height:19px;" href="Config_FullStoreURLterms.asp">
COPYRIGHT © <script type="text/javascript">document.write((new Date()).getFullYear());</script><br />
<span style="text-transform:uppercase;">Config_CompanyNameLegal</span><br />ALL RIGHTS RESERVED
</a>
</li>
<li>
<!--
===========================================================================================
VOLUSION LINK - BEGIN
===========================================================================================
Customer has agreed per Volusion's Terms of Service (http://www.volusion.com/agreement_monthtomonth.asp) to maintain a text hyperlink
to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion.
Removing this link breaches the Volusion agreement.
-->
<a href="http://www.volusion.com" title="Shopping Cart Software" target="_blank">Powered by Volusion</a>
<!--
===========================================================================================
VOLUSION LINK - END
===========================================================================================
-->
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS
a, a:visited, a:active {outline-style:none;}
img {border:none !important;}
.clear { clear:both;}
body{
margin:0px;
padding:0px;
font-size:12px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
background: url(../images/template/body_bg.gif) top left repeat-x;
}
#body a{
text-decoration:none;
}
#body a:hover{
text-decoration:underline;
}
#body img {
border:none;
}
/* ############################### HEADER ############################### */
#header{
width:900px;
height:125px;
margin:0px auto;
padding:0px;
text-align:left;
background: url(../images/template/header_bg.gif) no-repeat left top;
position:relative;
}
#header div#display_homepage_title{
width:600px;
height:23px;
margin:0px;
padding:0px;
position:absolute;
top:59px;
left:12px;
font:32px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#header div#display_homepage_title a{
width:100%;
height:100%;
margin:0px;
padding:0px;
text-align:left;
display:block;
text-indent:-9999px;
text-transform:uppercase;
color:#333;
}
#header div a#homepage_title{
text-indent:0px;
font:32px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
background:none;
font-weight:bold;
}
#site_tools{
margin:0px;
padding:0px;
color:#3c3c3c;
text-align:right;
position:absolute;
top:19px;
right:0px;
}
#site_tools a{
padding:0px 6px;
font-size:11px;
color:#666666;
}
#site_tools a:hover{ color:#000;}
/* ############################### TOP NAVIGATION ############################### */
#top_nav{
width:900px;
height:30px;
margin:0px auto 13px;
padding:0px;
text-align:left;
background:#eeeae2;
}
/* ############################### SEARCH BOX ############################### */
#display_search_wrapper {
width:200px;
margin:0px;
padding:0px;
display:block;
background: url(../images/template/search_bg.gif) top left no-repeat;
}
#display_search{
margin:0px;
padding:0px;
text-align:left;
}
#display_search_wrapper input{
width:174px;
margin:0px;
padding:3px;
height:14px;
font-size:11px;
color:#999999;
border:0px;
text-transform:uppercase;
background:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#display_search_wrapper img{
margin:1px 0 0;
padding:0px;
}
/* ############################### LEFT_NAV ############################### */
#left_nav{
width:200px;
margin:0px;
padding:7px 0 0 0;
text-align:left;
}
#left_nav h3{
width:auto;
margin:0px;
padding:10px 10px 10px 2px;
color:#333333;
text-transform:uppercase;
font-size:16px;
font-weight:bold;
text-align:left;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
/* ############################### PROMOTIONS ############################### */
#display_promotions_999{
margin:0px;
padding:10px 0px;
text-align:center;
vertical-align:middle;
}
/* ############################### CONTENT ############################### */
#content_wrapper {
background:#fff;
}
#content{
width:900px;
margin:0px auto;
padding:0px;
text-align:left;
}
#content_area{
width:756px;
margin:0px;
padding:0 0 0 20px;
text-align:left;
}
#content #content_area table{text-align:left;}
/* ############################### WINTER 09 STYLES ############################### */
.next_page_img{width:auto !important; height:auto !important;}
.previous_page_img{width:auto !important; height:auto !important;}
.soft_add_content_area span, .quantity{color:#000;}
.qe_toolbar_ovr{
z-index:9999 !important;
}