AbleCommerce Front end not centering on the page
AbleCommerce Front end not centering on the page
Hello, the AbleCommerce front end was set at 100% width. I changed it to 800px. That worked fine, but it justifies to the left. I have tried everything I can think of, but it just won't center. Has anyone ever had this problem, and found a solution? Any help would be very much appreciated.
Thanks!
Thanks!
- jmestep
- AbleCommerce Angel
- Posts: 8164
- Joined: Sun Feb 29, 2004 8:04 pm
- Location: Dayton, OH
- Contact:
Re: AbleCommerce Front end not centering on the page
It has to do with the body style padding and margins in your style.css. Here is what changed ours.
body { padding: 0px 0 0 0 ; margin:0px auto 0 auto; background:RGB(128,125,159);font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; width:1000px;}
The auto auto is what is important for Firefox- IE centered OK without it.
body { padding: 0px 0 0 0 ; margin:0px auto 0 auto; background:RGB(128,125,159);font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; width:1000px;}
The auto auto is what is important for Firefox- IE centered OK without it.
Judy Estep
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx
Web Developer
jestep@web2market.com
http://www.web2market.com
708-653-3100 x209
New search report plugin for business intelligence:
http://www.web2market.com/Search-Report ... -P154.aspx
- m_plugables
- Commander (CMDR)
- Posts: 149
- Joined: Tue Mar 11, 2008 12:44 am
- Contact:
Re: AbleCommerce Front end not centering on the page
I have faced this problem some time ago. I have tried center align the outer containers but that fix has some cross browser problems. The quick workaround i found was to made modification in the layout scriptlets and it worked fine.
You just need to wrap all the contents of each layout scriptlet into a three column table with width 100% and then assign the center column a width of 50% and assign 25% width to both side columns. The center column will contain all the contents of layout scriptlet.
For example if you want to center align the pages using Three column template then the Three Column Layout scriptlet should look like.
This works fine for both the IE and FF
You just need to wrap all the contents of each layout scriptlet into a three column table with width 100% and then assign the center column a width of 50% and assign 25% width to both side columns. The center column will contain all the contents of layout scriptlet.
For example if you want to center align the pages using Three column template then the Three Column Layout scriptlet should look like.
Code: Select all
<!--
<Description>
Displays headers, footers, a left sidebar, a right sidebar, and a main content area.
</Description>
-->
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:25%">
</td>
<td style="width:50%">
[[layout:header]]
<div id="outerContentWrapper">
<div id="innerContentWrapper">
<table cellspacing="0" cellpadding="0" id="contentLayout">
<tr>
<td align="left" valign="top" id="leftSidebarPanel">
[[layout:sidebar]]
</td>
<td align="left" valign="top" id="mainPanel">
[[layout:content]]
</td>
<td align="left" valign="top" id="rightSidebarPanel">
[[layout:sidebar2]]
</td>
</tr>
</table>
</div>
[[layout:footer]]
</div>
</td>
<td style="width:25%">
</td>
</tr>
</table>
Visit the links below to Download Plugins for your AC7 Store
http://www.plugables.com
http://blog.plugables.com
-
- Lieutenant, Jr. Grade (LT JG)
- Posts: 23
- Joined: Wed Dec 05, 2007 1:25 pm
Re: AbleCommerce Front end not centering on the page
There is a better, more flexible way to do this...
Add this to your theme's style.css file:
(You can replace 700px and 1000px with whatever your want you min / max width to be)
!If you use this technique, remember to change the width in the expression above as well, and notice how 701 / 700 and 1001 / 1000 are used, this ensures that this works smoothly in IE as well as FF and Opera...
Now, using a similiar method, wrap the layout scriptlet (whichever ones you want this effect - 3 column, whatever...) with this code:
In this example, i created a flexable width layout, but you could just as easily define #wrapContainer as a fixed width div with auto margins and get the same effect that mazhar described.... Though flex width layouts add a new dimension to this technique.
Add this to your theme's style.css file:
Code: Select all
#wrapContainer {
margin:0pt auto;
max-width:1000px;
min-width:700px;
width: expression(document.body.clientWidth < 701? "700px" : document.body.clientWidth > 1001? "1000px" : "auto");
}
!If you use this technique, remember to change the width in the expression above as well, and notice how 701 / 700 and 1001 / 1000 are used, this ensures that this works smoothly in IE as well as FF and Opera...
Now, using a similiar method, wrap the layout scriptlet (whichever ones you want this effect - 3 column, whatever...) with this code:
Code: Select all
<div id="wrapContainer">
[[layout:header]]
<div id="outerContentWrapper">
<div id="innerContentWrapper">
<table cellspacing="0" cellpadding="0" id="contentLayout">
<tr>
<td align="left" valign="top" id="leftSidebarPanel">
[[layout:sidebar]]
</td>
<td align="left" valign="top" id="mainPanel">
[[layout:content]]
</td>
<td align="left" valign="top" id="rightSidebarPanel">
[[layout:sidebar2]]
</td>
</tr>
</table>
</div>
[[layout:footer]]
</div>
</div>
-
- Ensign (ENS)
- Posts: 8
- Joined: Wed Oct 27, 2010 5:40 pm
Re: AbleCommerce Front end not centering on the page
IndyTwoStep's post worked so great! Thank you, thank you!
Re: AbleCommerce Front end not centering on the page
I'm trying to center my web page.
Using Indy's post, I get lost on this part :
<div id="wrapContainer"> . . . to ?
Using Indy's post, I get lost on this part :
Where do I find these scriptlets and how many of them do I add theNow, using a similiar method, wrap the layout scriptlet (whichever ones you want this effect - 3 column, whatever...) with this code:
<div id="wrapContainer"> . . . to ?
Re: AbleCommerce Front end not centering on the page
Just do something like this in your stylesheet for body element.
Code: Select all
body
{
margin:0 auto;
width:980px;
}
- clevername
- Lieutenant (LT)
- Posts: 54
- Joined: Tue Jan 11, 2011 8:54 am
Re: AbleCommerce Front end not centering on the page
Just so you know you have to set the exact width of the element for the "margin: 0 auto;" to work. For example:
IndyTwoStep's suggestion uses CSS Expressions which is not a very good practice. And it can be done without them with easy valid CSS.
Code: Select all
body {
width:1000px;
margin:0 auto;
}