Main body not central ?

[mythandmagic]

Hi,

Hope someone can advise, as i can not for the life of me work it out.

Im trying to get the products an even layout, but the right column is wider than the left column in the centre..


How do i get them to have equal width ??

[EdHarrison]

Have you set the width of centre too wide?

check settings under site options / general / width for main area

[mythandmagic]

its set to 600

[leehack]

How do i get them to have equal width ??

If you want a 2 column layout to be evenly spread, then set at least one of the columns to be 50% width, they will be evenly shared then. Define no sizes and expect a random interpretation.

In the section list layout you will need to go I suspect.

[mythandmagic]

So i remove the width of 600 in site options and define a width of 50% in the section layout options ?

or am i miss-understanding something ?

Cant see where to set the column width to 50% ?

[leehack]

The width of 600 will be defined against the overall table that does the central area, so don't touch that, you need to get to the columns of that table that is set to 600 (the list layout) and set the column to be 50% width. The column will then take 50% of 600 ie 300 and leave 300 for the other column, thus balanced (that is if you have a 2 column layout of course), the percentage needs changing according to how many wide, 25% for 4 wide for instance.

[mythandmagic]

I'm looking in site options and the section layout options, but i can only see column count.

Can't see the where to set the coulmn width ?

[leehack]

The section list layout is an integral part of the design, it's not controllable in site options where you are looking. You need to access it via the design tab or the design library, but proceed with caution. It basically forms a table with all the rows and columns for your layout, there is one for products and one for sections and one for fragments. Really powerful area of actinic, but you need to understand html to work with them really.

If that is all a bit confusing, then probably best to stay out of there and just set a width on the section layout instead, again that will need doing in the library or design tab, but probably simpler. Not sure if the help details list layouts, if it does have a good read, opens up many possibilities for some fab stuff.

[mythandmagic]

I dont mind editing the html in the design tab, I just dont know which bit im looking at ?

heres the column html;

<div class="product_list">
<div class="image_product"><a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"><img alt="<actinic:variable name="SectionName" encoding="strip"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" /></a></div>
<div><h3 class="product"><a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"><actinic:variable name='SectionName'/></a></h3></div>
<p><actinic:variable name='SectionDescription'/></p>
</div>

[leehack]

<div class="product_list"> is the outer container for that layout, try setting a width on that in the css file. Make sure you check the rest of the site after as i can't tell you off the top of my head whether that controls anything else. If it does, then you need to duplicate the class, rename it, apply the new class to this container and then change that to what you want. You then have a specific class to control this part without affecting anything else.

[mythandmagic]

ok thats not changing anything

<cries>

[leehack]

<hands a hankie over> URL or what you've done or we just guessing and throwing wild ideas your way?

[mythandmagic]

soz...lol


.product_list {
width: 50%
margin: 20px 0px 20px 0px;
}

also tried

.product_list {
width: 300px
margin: 20px 0px 20px 0px;
}

[fergusw]

The .product_list change is not where you need to resolve this.

The prod_list class affects the <div> which is inside the <td> table cell. Setting it's width to 50% will make it half the size of the table cell it's in, not half the width of the table row.

You have to set the <td> width to 50%, not the div.
This must be done in the HTML

e.g.

<td valign="top">

must become

<td valign="top" width="50%">

for this to fix the issue, as Lee described earlier.

[fergusw]

You have to add the 50% into the TD in the section list layout settings.
These are accessed by clicking on the

Click here to edit list layout settings

text that appears in the section list layout (found within the design tab)

You'd have to edit the HTML for the First, Middle and Last rows within the "Edit Rows and Columns" tab.