Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Remove space between columns and main page


Belial

Recommended Posts

Hello!

 

I just want ro decrease space between main content page and columns. Maybe leave 1px. Now i have about 10px.

 

Can i use this space for my main content page?

 

 

Thanks in advance...

Link to comment
Share on other sites

Basically i have installed a stylesheet from there http://grids.heroku.com/

 

I changed my main width to 1032 width. So where i can make the change to rid off this space inside columns and main body?

 

In my classic stylesheet i have this:

 

.ui-widget {
 font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
 font-size: 11px;
}
body {
 background-image: url(/images/chain-background.jpg);
 background-attachment : fixed;
 color: #000;
 margin: 0px;
 font-size: 11px;
 font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
}

#bodyWrapper {
}
#bodyContent { background:#ffffff;
}
#header {
 height: 90px;
}
#storeLogo {
 float: left;
 margin-top: 2px;
}
#headerShortcuts {
 float: right;
 margin-top: 50px;
}
#columnLeft {
 padding-top: 2px;
}
#columnRight {
 padding-top: 2px;

 

and in the new width stylesheet i have this one.

 

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_24 {
width: 92%;
margin-left: 4%;
margin-right: 4%;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
display:inline;
float: left;
position: relative;
margin-left: 1%;
margin-right: 1%;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}

Link to comment
Share on other sites

I would guess it's this:

 

.container_24 {
width: 92%;
margin-left: 4%;
margin-right: 4%;
}

 

try to change these margins to a different value or delete them to see if it affects the area you want.

Find this post helpful? Click the 'Like this' button. :)

Link to comment
Share on other sites

I would guess it's this:

 

.container_24 {
width: 92%;
margin-left: 4%;
margin-right: 4%;
}

 

try to change these margins to a different value or delete them to see if it affects the area you want.

 

I tried and it goes the whole site left and right. The gutter still remains.

Link to comment
Share on other sites

Ok, to help you I have used google chrome element inspector. You site has been modified in a confusing way with relative positions which are unnecessary. You should use the osc_temnplate.php to specify the widths of the body section and columns.

 

In this case you have .container_24 .push_5 for your body section, which gives it a

left: 20%

And .container_24 .grid_14 which specifies it a

width: 56.8%

. You can try to adjust these values to see if it helps to solve your issue.

Find this post helpful? Click the 'Like this' button. :)

Link to comment
Share on other sites

The code I gave you above is in one of your stylesheet's. In osc_template.php near the top you should find something like this:

 

class oscTemplate {
   var $_title;
   var $_blocks = array();
   var $_grid_container_width = 24;
   var $_grid_content_width = 16;
   var $_grid_column_width = 4;

 

As you can see you got the necessary width settings for your body and left/right columns. But for this to work correctly you should get rid of teh position: relative attributes in your stylesheet.

Find this post helpful? Click the 'Like this' button. :)

Link to comment
Share on other sites

The main problem is that i can't understand in all these containers which is what. I changed numbers but the main body goes left.Ok, it touches left column, but it goes far from right column. It will be better if the main body strech and fit columns.

 

Any suggestions Al3ks?

Link to comment
Share on other sites

First of all i want to thank you, because is very important to me to solve this.

 

If i understand correct the question, yes when i had it on 960 it had some gutters but very thing. Now i i activated the 1032 pixels and the result is this you saw.

 

If you mean when i created the .css i put gutter 10px. If i put 5px or something else i get broken site. Any recommendations? Maybe i did wrong the whole .css on the http://grids.heroku.com/

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...