• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1063
  • Last Modified:

Volusion Content area

I am using a Volusion shopping cart. This uses templates in its page structure.

On the home page the template make up for the header and footer and a content area exists in the space between.

If you have a look at www.francoisbouttier.co.uk  you will see the page content looks too far to the left.
I have tried to align the Content with the menu but cannot seem to cause this to happen.

I wonder if the reason can be seen in the page source?

I am attaching two template files perhaps something can be seen here.

Many thanks
John
Volusion.zip
0
johnhardy
Asked:
johnhardy
1 Solution
 
Chris StanyonCommented:
You can centre your content by adding auto left and right margins on your #content_area rule

#content_area {
     margin:0px auto;
}

It looks like that rule is already setup, but it's inline somewhere so you'll need to hunt around for it. Currently, in the source it looks like this:

<!-- #################### BEGIN HOMEPAGE STYLES IN TEMPLATE HTML #################### -->
<style type="text/css">	
    #content_area{padding:10px 10px 0 10px; width:940px;}
    #content_area a.productnamecolor{color:#666666;display:block; font-size:12px; font-weight:normal;}
    #content_area .pricecolor{color:#333333; font-size:12px; font-weight:bold;
</style>
<!-- #################### END HOMEPAGE STYLES IN TEMPLATE HTML #################### -->

Open in new window

0
 
HagayMandelCommented:
The layout is a complete mass, and in order to put it in reasonable state, a major redesign is required.
If all you need is to horizontally center you menu and content, do the following:
In #content_area and in #topnav add:
width: 940px;
margin-left: auto;
margin-right: auto;
You'll still need to re position the cart image.
0
 
COBOLdinosaurCommented:
Oh my that is a mess.  I hope you didn't pay for that junk.  The layout may be salvageable, but before you do anything the CSS needs to be consolidated, and then after validation of both the CSS and HTML it might be possible to restore sanity to the page.  A fix here will only be short term. The page is a minefield.

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
johnhardyAuthor Commented:
Thanks HagayMandel I really only need to center the content.

I inserted the suggested code
width: 940px;
margin-left: auto;
margin-right: auto;
as follows but it seemed to make no difference and the content area remained pushed over to the left.

Perhaps I did not insert that code correctly?

<!-- #################### TOP NAVIGATION #################### -->
<div id="topnav">

<div id="DropDown_Currency"></div>
width: 940px;
margin-left: auto;
margin-right: auto;


      <!-- #################### CONTENT AREA #################### -->    
      <div id="content_area">
      </div>
width: 940px;
margin-left: auto;
margin-right: auto;
   
    <div class="clear"></div>
</div>
0
 
johnhardyAuthor Commented:
Thanks ChrisStanyon

I am not clear on what you suggest,
      
I can see this OK
<!-- #################### BEGIN HOMEPAGE STYLES IN TEMPLATE HTML #################### -->
<style type="text/css">      
    #content_area{padding:10px 10px 0 10px; width:940px;}
    #content_area a.productnamecolor{color:#666666;display:block; font-size:12px; font-weight:normal;}
    #content_area .pricecolor{color:#333333; font-size:12px; font-weight:bold;
</style>
<!-- #################### END HOMEPAGE STYLES IN TEMPLATE HTML #################### -->

but am not clear on what I should be doing with
#content_area {
     margin:0px auto;
}
Can you please advise?
Thanks
John
0
 
HagayMandelCommented:
You got it all wrong!
In your CSS file add the following:

#content_area, #topnav {
     width: 940px;
     margin-left: auto;
     margin-right: auto;
}

Open in new window

0
 
johnhardyAuthor Commented:
Many thanks for the help.

John
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now