First off here is the site I’m working on Volusion Demo Store
I’m new to programming Volusion and at first glance it looked like it was going to be a walk in the park. Sadly I was wrong.
I started modifying a built in template “White-Light” because it was really close to how I wanted the site to look to begin with. At first everything was going great, but when I tried to modify the header section things quickly started not looking right.
The big issue I’m having right now is that the sub menus on my top navigation are appearing too far off to the right.
Here is the template code:
<!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>
<title></title>
<!-- 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 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/v/vspfiles/templates/192/css/Imports.css" rel="stylesheet" type="text/css" />
<meta id="v65-layout-mode" data-cart="storedot" data-checkout="storedot" />
</head>
<!-- :::::::::: TEMPLATE FOR SPILLED INK PRODUCTIONS :::::::::: -->
<body>
<div id="page">
<!-- :::::::::: HEADER :::::::::: -->
<div id="header">
<div id="display_homepage_title"></div>
<div id="headerTop">
<a href="Config_FullStoreURLshoppingcart.asp">View Cart</a>
<a href="Config_FullStoreURLaboutus.asp">About</a>
<a href="Config_FullStoreURLmyaccount.asp">My Account</a>
</div>
</div>
<!-- :::::::::: TOP CONTENT WRAPPER :::::::::: -->
<div id="topWrapper">
<div id="topBar">
<!-- :::::::::: LOGO :::::::::: -->
<div id="logo">
<img src="http://www.spilledinkproductions.com/images/logo.jpg" alt="Spilled Ink Productions Logo" border="0">
</div>
<!-- :::::::::: TOP NAVIGATION :::::::::: -->
<div id="topNav">
<!-- :::::::::: CHOOSE ROLLOVER COLORS OR ROLLOVER COLORS POPOUT :::::::::: -->
<div id="display_menu_1" class="menu">
</div>
</div>
<!-- :::::::::: SEARCH :::::::::: -->
<div id="display_search">
<form action="Config_FullStoreURLSearchResults.asp" method="get" name="SearchBoxForm">
<input type="text" name="Search" id="search_input" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}"/>
<input type="submit" name="Submit" id="search_submit" value=""/>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<!-- :::::::::: BEGIN HOMEPAGE STYLES IN TEMPLATE HTML :::::::::: -->
<div id="if_homepage">
<style type="text/css">
#leftnav {display:none;}
#content_area {width:1000px;}
</style>
</div>
<!-- :::::::::: END HOMEPAGE STYLES IN TEMPLATE HTML :::::::::: -->
<!-- :::::::::: CONTENT :::::::::: -->
<div id="content">
<!-- :::::::::: LEFT COLUMN :::::::::: -->
<div id="leftnav">
<!-- :::::::::: LIST ITEM OR TREE EXPAND OR ROLLOVER COLORS POPOUT :::::::::: -->
<div class="menutitle" style="color:Menu2_Title_TextColor; background-color:Menu2_Title_BgColor;">Menu2_Title</div>
<div id="display_menu_2" class="menu"></div>
<!-- :::::::::: LIST ITEM OR TREE EXPAND OR ROLLOVER COLORS POPOUT :::::::::: -->
<!--
<div class="menutitle" style="color:Menu3_Title_TextColor; background-color:Menu3_Title_BgColor;">Menu3_Title</div>
<div id="display_menu_3" class="menu"></div>
-->
<!--
<div class="menutitle" style="color:Menu4_Title_TextColor; background-color:Menu4_Title_BgColor;">Menu4_Title</div>
<div id="display_menu_4" class="menu"></div>
<div class="menutitle" style="color:Menu5_Title_TextColor; background-color:Menu5_Title_BgColor;">Menu5_Title</div>
<div id="display_menu_5" class="menu"></div>
<div class="menutitle" style="color:Menu6_Title_TextColor; background-color:Menu6_Title_BgColor;">Menu6_Title</div>
<div id="display_menu_6" class="menu"></div>
<div class="menutitle" style="color:Menu7_Title_TextColor; background-color:Menu7_Title_BgColor;">Menu7_Title</div>
<div id="display_menu_7" class="menu"></div>
<div class="menutitle" style="color:Menu8_Title_TextColor; background-color:Menu8_Title_BgColor;">Menu8_Title</div>
<div id="display_menu_8" class="menu"></div> -->
<div id="display_promotions_999"></div>
</div>
<!-- :::::::::: CONTENT AREA :::::::::: -->
<div id="content_area">
</div>
<div class="clear"></div>
</div>
<!-- :::::::::: FOOTER :::::::::: -->
<div id="footer">
<!-- :::::::::: MAILING LIST SECTION -->
<div id="eList">
<form name="MailingList" method="post" action="Config_FullStoreURLMailingList_subscribe.asp">
<input type="text" id="elist_input" name="emailaddress" value="enter your email" onfocus="if (this.value == 'enter your email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter your email';}" />
<input type="submit" name="Submit" id="elist_submit" value="Submit" />
</form>
</div>
<div id="footerTop">
<ul>
<li class="title">CUSTOMER SERVICE</li>
<li><a href="Config_FullStoreURLhelp.asp">Help</a></li>
<li><a href="Config_FullStoreURLarticles.asp?ID=57">Shipping & Deliveries</a></li>
<li><a href="Config_FullStoreURLreturns.asp">Returns & Exchanges</a></li>
</ul>
<ul>
<li class="title">SITE MAPS</li>
<li><a href="Config_FullStoreURLpindex.asp">Product Index</a></li>
<li><a href="Config_FullStoreURLcindex.asp">Category Index</a></li>
</ul>
<ul>
<li class="title">MY ACCOUNT</li>
<li><a href="Config_FullStoreURLlogin.asp">Login/Register</a></li>
<li><a href="Config_FullStoreURLshoppingcart.asp">Shopping Cart</a></li>
<li><a href="Config_FullStoreURLorders.asp">Order Status</a></li>
</ul>
<ul>
<li class="title">COMPANY INFO</li>
<li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li>
<li><a href="mailto:Config_EmailAddress_From?subject=Contact Us">Contact Us</a></li>
<li><a href="Config_FullStoreURLterms_privacy.asp">Privacy Policy</a></li>
</ul>
</div>
<!-- ==========================================================================================
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.
=========================================================================================== -->
<div id="footerBottom">
<a href="Config_FullStoreURLterms.asp">Copyright © <script type="text/javascript">document.write((new Date()).getFullYear());</script> Config_CompanyNameLegal. All Rights Reserved.</a><br />Shopping Cart Powered by <a href="http://www.volusion.com" title="Shopping Cart Software" target="_blank">Volusion</a>.
</div>
</div>
</div>
</body>
</html>
Here is my template.css code:
a {text-decoration:none;}
a, a:visited, a:active {outline-style:none;}
a:hover {text-decoration:underline;}
img {border:none !important;}
.begin{border:none !important;}
.end{border:none !important;}
.bold{font-weight:bold !important;}
.highlight{color:#06a0cf !important;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.none{display:none !important;}
.block{display:block !important;}
.inline{display:inline !important;}
/* ############################### FIXES ############################### */
.qe_toolbar_ovr{z-index:9999 !important;} /*admin box*/
.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;}
.soft_add_wrapper {z-index:999;}
/* ############################### PAGE WRAPPER ############################### */
body{
background-color:#fff;
color:#7c7c7c;
font: normal 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin:0;
padding:0;
text-align:center;
}
#page{
margin:0 auto;
text-align:left;
width:1000px;
}
/* ############################### HEADER ############################### */
#header{
background:url(../images/template/header_bg.jpg) no-repeat 0 0;
height:180px;
position:relative;
width:1000px;
}
/* ############################### LOGO IMAGE AND TEXT */
#header div#display_homepage_title{
height:180px;
left: 0;
margin: 0;
padding: 0;
position:absolute;
float: left;
width: 250px;
font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#header div#display_homepage_title a{
width:100%;
height:100%;
margin:0px;
padding:0px;
text-align:left;
display:block;
text-indent:-9999px;
color:#aaaaaa;
}
#header div a#homepage_title{
text-indent:0px;
font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:none;
}
/* ############################### HEADER TOP */
#headerTop{
color:#aaaaaa;
font-size:12px;
position:absolute;
right:0;
text-align:right;
top:17px;
width:480px;
}
#headerTop a{
color:#aaaaaa;
margin-left:19px;
}
/* ############################### SEARCH BOX */
#display_search{
background:url(../images/template/search_bg.gif) no-repeat 0 0;
position: absolute;
right: 0;
top: 120px;
width: 147px;
}
#display_search form{
height:100%;
margin:0;
padding:0;
width:100%;
}
#search_input{
border:0px solid #000;
color: #AAAAAA;
display: block;
float: left;
font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
margin: 0;
padding: 0px 3px;
text-align: left;
width: 122px;
background:none;
}
#search_submit{
background:none;
border:0px solid #000;
color: #FFFFFF;
cursor: pointer;
display: block;
float: right;
font-size: 0;
height: 18px;
margin: 0;
padding: 0;
text-align: right;
text-indent: -9999px;
width: 17px;
}
/* ############################### TOP NAVIGATION ############################### */
#topnav{
padding-top:114px;
padding-left: 250px;
height:35px;
position:absolute;
width:500px;
float:right;
/*border-top:1px solid #eeeeee;*/
/*border-bottom:1px solid #eeeeee;*/
}
/* ############################### CONTENT ############################### */
#content{
border-bottom:1px solid #eeeeee;
padding-top:25px;
}
/* ############################### LEFT_NAV */
#leftnav{
float:left;
width:192px;
}
#leftnav .menutitle{
border-bottom:1px solid #eeeeee;
color:#7c7c7c;
font:12px;
line-height:20px;
text-transform:uppercase;
}
#leftnav .menu{
margin-bottom:25px;
}
/* ############################### PROMOTIONS */
#display_promotions_999{
padding:10px 0;
text-align:center;
vertical-align:middle;
width:100%;
}
/* ############################### CONTENT AREA */
#content_area{
float:right;
text-align:left;
width:808px;
}
#content #content_area table{text-align:left;}
/* ############################### FOOTER ############################### */
#footer {
color:#aaaaaa;
padding:9px 0;
text-align:left;
position:relative;
margin-bottom:200px;
overflow:visible;
}
/* ############################### MAILING LIST */
#eList{
border: 1px solid #C1C1C1;
left: 0;
position: absolute;
top: 16px;
width: 178px;
}
#eList form{
margin:0;
padding:0;
width:100%;
}
#elist_input{
background:none;
border:none;
color: #AAAAAA;
font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
margin: 0;
padding: 0 5px;
float: left;
text-align: left;
width: 116px;
}
#elist_submit {
background-color:#c1c1c1;
border:none;
color: #FFFFFF;
cursor: pointer;
float: right;
font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
margin: 0;
padding: 0 0;
text-align: center;
text-transform: uppercase;
width: 50px;;
}
/* ############################### FOOTER TOP */
#footerTop {
margin:0;
padding:0;
font-size:10px;
line-height:17px;}
#footerTop ul {
margin:0 0 15px 90px;
padding:0;
list-style:none;
display:inline;
float:right;}
#footerTop ul li {
margin:0;
padding:0;
color:#aaaaaa;}
#footerTop ul li.title { margin:0 0 4px;}
#footerTop ul li a {color:#aaaaaa;}
/* ############################### FOOTER BOTTOM */
#footerBottom {
margin:0;
padding:0;
font-size:10px;
color:#aaaaaa;
line-height:17px;
position:absolute;
top:50px;
left:0px;}
#footerBottom a {color:#aaaaaa;}
/* ############################### CHECKOUT ############################### */
#v65-onepage-cartsummary-header {
background-color:#676767;
color:white;
}
The problem has to be with all of the absolute positioning, but using good coding practices only seams to make things worse. I tried using a very straight forward technique where I created my own topWrapper and then placed the logo, navigation, and search all in their own divs, the logo and navigation were in relative position floating left, and the search was in relative position floating right. For some reason when I actually used good coding practice and it all looked very clean and straight forward, I couldn’t even get the navigation, logo, and search to show up on the same line, let alone the exact positions I wanted them in.
Apparently Volusion really messes with your code and I"m running out of ideas. If anyone is good with Volusion templates and can help me out it would be greatly appreciated!
