Column Left...Making it flush with screen left?

[guanche]

I would like to make my column left flush with screen left, where do I go to remove the spacing that sets column left away from screen left so that they become flush against eachother?

[Guest]

If I get you right and understand that what you want to do is to have the left infoboxes butt hard up against the left frame of your browser window, there is no real easy way to do this. What controls this is the main table that defines the three column layout etc, if you have a look at the source of the page as rendered in a browser you will find:

 

<!-- header_eof //-->



<!-- body //-->

<table border="0" width="100%" cellspacing="5" cellpadding="5">

 

The cellspacing="5" cellpadding="5" is the bit that is giving you the 10 pixel gap between the left infoboxes and the edge of the browser window. But, it is also what is separating the left infoboxes from the content column and the content column from the right infoboxes. Setting the values to "0" effectively means that everything will butt up against everything else with no spacing, not what you really want.

 

What you would have to do to achieve what you are after, is modify the table structures for all of the pages, which will mean doing it again next time you want to update to the latest release of osc. It's not that big a task really, but it does take a bit of time.

[guanche]

What you would have to do to achieve what you are after, is modify the table structures for all of the pages, which will mean doing it again next time you want to update to the latest release of osc. It's not that big a task really, but it does take a bit of time.

 

Thank you for the tip and you have understood me correctly. Can you please direct me as to where and how to modify the main table structure? I now have the left info boxes butting hard up against the left frame of my browser window but I want to go back in to edit the main table to ensure a space of say 10 pixels between the left info boxes and the center content area.

[Guest]

Hi,

 

You can put padding in the stylesheet on the td.main tag to make space.

[Guest]

modom is correct, applying padding to td.main would certainly do it for you. The only thing is it will also apply padding above and below the td as well, so you might want to try:

 

padding-left : 10px;

padding-right : 10px;

 

You can also use padding-top or padding-bottom as well, any combination of those or use modoms suggestion will get you what you are after. Just play around with it until it looks the way you want it to.

 

You still need to edit the main content table and change cellpadding="5" cellspacing="5" to cellpadding="0" cellspacing="0". As an example if you look in account.php you need to modify the opening table that comes right after:

 

<!-- body //-->

 

If you have a decent text editor such as ultraedit that lets you do a find and replace through multiple files do a search for:

 

<!-- body //-->

<table border="0" width="100%" cellspacing="5" cellpadding="5">

 

and replace it with

 

<!-- body //-->

<table border="0" width="100%" cellspacing="0" cellpadding="0">

 

And just to be safe, i'd do a backup of all the files (or the directory) beforehand.

 

And one last thing, have a look at the opening table inside of account.php and just check that the opening table is <table border="0" width="100%" cellspacing="5" cellpadding="5"> and not <table border="0" width="100%" cellspacing="3" cellpadding="3">. I just had a quick look at what I think is an unedited copy of osc and the values are 3 and not 5, although chances are I may have messed with the file.

[Guest]

I am working on one now and these are the tags and settings:

 

TD.pageHeading, DIV.pageHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 20px;

font-weight: bold;

color: #9a9a9a;

}

TD.main, P.main {

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

line-height: 1.5;

padding: 0px 20px 12px;

 

The main just does the body text and the pageHeading does the title text.

 

It can be seen at:

www.wizard-works.com/catalog/