Announcement

**I-CC** · 22-Aug-2009, 11:28 PM

If the person doing the addition of the information within the page is html aware and can do tables (as you have shown) as and when is needed, then not an issue, but for a user not so sure, then building the actual fragment code using css would be smarter (i.e. the builder of the site design programmes it for an end user ease of maintenance), i.e. different fragment layouts in css for widths and the like, so that the end user can then just select the appropriate fragment layouts and enter plain text and select images as normal for each fragment, which the css then lays outs for them.

**jont** · 23-Aug-2009, 08:20 AM

Don't forget the alt="" attributes to the <img> tags for the SEO

The ultimate route is to strip the table code from the layout list allowing you to just use individual fragments laid out just as you like .. see Party Pete's fancy dress costumes site which is laid out solely using individual fragments

**panamint** · 23-Aug-2009, 02:04 PM

Thanks for the reply

Thanks for the replies. I'm not too hot on CSS. If its not too much trouble could you elaborate or point me at some dcumentation?

Thanks, Russell Cowe

Originally posted by Support@Techno- View Post

If the person doing the addition of the information within the page is html aware and can do tables (as you have shown) as and when is needed, then not an issue, but for a user not so sure, then building the actual fragment code using css would be smarter (i.e. the builder of the site design programmes it for an end user ease of maintenance), i.e. different fragment layouts in css for widths and the like, so that the end user can then just select the appropriate fragment layouts and enter plain text and select images as normal for each fragment, which the css then lays outs for them.

**NormanRouxel** · 23-Aug-2009, 05:59 PM

Here's a rough guide that does away with embedded HTML and does it all via selecting the appropriate layout for each fragment.

This is for Brochure pages only (as the Section pages mix Products and Fragments together and would be a bit more complex).

First we lose all the table code that's involved in displaying each fragment. This is easily done by selecting Bare Brochure Fragment List in Page Details / Layout / Fragment / Brochure Fragment List Layout.

Now make three alternative Fragment layouts (OneFragmentAcross, TwoFragmentsAcross, ThreeFragmentsAcross) that start and end with

Code:

<div class="onefragmentacross"> 
.
.
</div>

and

Code:

<div class="twofragmentsacross"> 
.
.
</div>

and

Code:

<div class="threefragmentsacross"> 
.
.
</div>

And in your CSS have (assuming your content area is 600 pixels wide).

Code:

.onefragmentacross {width:600px; clear:both;}
.twofragmentsacross {width:300px; float:left;}
.threefragmentsacross {width:200px; float:left;}

The twofragmentsacross and threefragmentsacross CSS makes them line up side by side until there's no room for another. Since our overall width is 600px that will let only two or three fit alongside depending on which is selected.

Now simply set out your page using the appropriate Fragment layouts. E.g. we'll put 6 fragments one after the other using layouts:

Code:

OneFragmentAcross

TwoFragmentsAcross
TwoFragmentsAcross

ThreeFragmentsAcross
ThreeFragmentsAcross
ThreeFragmentsAcross

Voila! One full width fragment, followed by 2 across, followed by 3 across.

**panamint** · 23-Aug-2009, 06:36 PM

Thanks very much

Norman - thanks for this - it will be a great help.

Btw - I'm from Edinburgh, now living / working near South Queensferry!

Russell

Originally posted by NormanRouxel View Post

Here's a rough guide that does away with embedded HTML and does it all via selecting the appropriate layout for each fragment.

This is for Brochure pages only (as the Section pages mix Products and Fragments together and would be a bit more complex).

First we lose all the table code that's involved in displaying each fragment. This is easily done by selecting Bare Brochure Fragment List in Page Details / Layout / Fragment / Brochure Fragment List Layout.

Now make three alternative Fragment layouts (OneFragmentAcross, TwoFragmentsAcross, ThreeFragmentsAcross) that start and end with

Code:

<div class="onefragmentacross"> 
.
.
</div>

and

Code:

<div class="twofragmentsacross"> 
.
.
</div>

and

Code:

<div class="threefragmentsacross"> 
.
.
</div>

And in your CSS have (assuming your content area is 600 pixels wide).

Code:

.onefragmentacross {width:600px; clear:both;}
.twofragmentsacross {width:300px; float:left;}
.threefragmentsacross {width:200px; float:left;}

The twofragmentsacross and threefragmentsacross CSS makes them line up side by side until there's no room for another. Since our overall width is 600px that will let only two or three fit alongside depending on which is selected.

Now simply set out your page using the appropriate Fragment layouts. E.g. we'll put 6 fragments one after the other using layouts:

Code:

OneFragmentAcross

TwoFragmentsAcross
TwoFragmentsAcross

ThreeFragmentsAcross
ThreeFragmentsAcross
ThreeFragmentsAcross

Voila! One full width fragment, followed by 2 across, followed by 3 across.

**panamint** · 24-Aug-2009, 04:56 PM

Got it working

Norman

Thanks again for the tips - after a bit of finger trouble, I got it working fine. Just need to play about with the layouts to neaten it up.

Russell

Originally posted by NormanRouxel View Post

Here's a rough guide that does away with embedded HTML and does it all via selecting the appropriate layout for each fragment.

This is for Brochure pages only (as the Section pages mix Products and Fragments together and would be a bit more complex).

First we lose all the table code that's involved in displaying each fragment. This is easily done by selecting Bare Brochure Fragment List in Page Details / Layout / Fragment / Brochure Fragment List Layout.

Now make three alternative Fragment layouts (OneFragmentAcross, TwoFragmentsAcross, ThreeFragmentsAcross) that start and end with

Code:

<div class="onefragmentacross"> 
.
.
</div>

and

Code:

<div class="twofragmentsacross"> 
.
.
</div>

and

Code:

<div class="threefragmentsacross"> 
.
.
</div>

And in your CSS have (assuming your content area is 600 pixels wide).

Code:

.onefragmentacross {width:600px; clear:both;}
.twofragmentsacross {width:300px; float:left;}
.threefragmentsacross {width:200px; float:left;}

The twofragmentsacross and threefragmentsacross CSS makes them line up side by side until there's no room for another. Since our overall width is 600px that will let only two or three fit alongside depending on which is selected.

Now simply set out your page using the appropriate Fragment layouts. E.g. we'll put 6 fragments one after the other using layouts:

Code:

OneFragmentAcross

TwoFragmentsAcross
TwoFragmentsAcross

ThreeFragmentsAcross
ThreeFragmentsAcross
ThreeFragmentsAcross

Voila! One full width fragment, followed by 2 across, followed by 3 across.

Announcement

Having different numer of fragments per row of a brochure page or section

Having different numer of fragments per row of a brochure page or section

Comment

Comment

Comment

Comment

Comment

Comment