margins / main page

Locked

Views: 948

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
14 Dec 2010, 5:43 PM
#1
unsub avatar

unsub

New Zenner

Join Date:
Dec 2010
Posts:
31
Plugin Contributions:
0

margins / main page

http://www.dizzydeals.net
The home page pushes to the RIGHT, but when you click a product everything lines up.? http://dizzydeals.net/index.php?main_page=document_general_info&cPath=1&products_id=7

Please help.

Also, how do you i shrink the CENTER margins / padding. I want all the content in the center to be expanded out closer to the left and right side boxes.

Thank you

14 Dec 2010, 6:07 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: margins / main page

I didn't do the math, but it's almost certainly caused by the map image being too wide, which, when added to the width of the sidebox columns and margins and padding, exceed the width of #mainWrapper.

14 Dec 2010, 6:46 PM
#3
unsub avatar

unsub

New Zenner

Join Date:
Dec 2010
Posts:
31
Plugin Contributions:
0

Re: margins / main page

I expanded the main wrapper to 1000px, but now how do I reduce the margins/padding on both sides of the map? Any help would be appreciated.

14 Dec 2010, 6:53 PM
#4
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: margins / main page

These would be a good place to start:

.columnLeft {
padding: 0 28px 0 0;
}

.columnRight {
padding: 0 28px 0 0;
}

I found that by installing the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.