Fragments

[Bun]

On my main home page I have a number of fragments laid out in columns (3) chosen from 'Column Count for Brochure Fragments = 3' There are 4 fragments in total on the page 3 of them containing images and 1 text.

I am happy with the 3 image fragments but I would like the 1 text fragment to run from left to right underneath the 3 images.....at the moment it's being restricted by the default 3 column layout chosen above.

Is there a way to have one fragment with 3 columns and on the same page another fragment laid out with 1 column?

The page is here

Thank you for your time and patience

[Duncan Rounding]

How about using text only fragments with 1 across instead of three then adding an html table into the first fragment to format the three images.

[Bun]

Hi Duncan,

So it's not something that is inherent in Actinic? As my html is pants

[Duncan Rounding]

I don't know of a way to have fragments formatted differently on the same page (wish I did) but this below may help you. Place it in a text fragment and try it. You will need to add the images to the Additional Files List as well.

!!<
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="info.html"><img src="FreeDevEAC.gif" width="185" height="145" alt="Free Deleivery at Eccleston Angling Centre Ltd" ></a></td>
    <td><a href="shop.html"><img src="Front-Film.gif" width="201" height="145" alt="Carp Match and Coarse Fishing Tackle" ></a></td>
    <td><a href="info.html"><img src="Payment-Logo.gif" width="136" height="145" alt="Accepted Payments" ></a></td>
  </tr>
</table>
>!!

[completerookie]

its all done with CSS and styles.
Basically you have to use the Float:Left; and Float:Right; styles to the left and right hand panels.

Although the concept can be explained here, its much easier to look at one of the many tutorials on the topic. I found one this morning that described HOW to do it reasonable well.
three column fluid layouts

when you want to break the columns and start going across the three columns again, then use a <br style="clear: both;">
I found it easier to put the clear:both in a small fragment of its own, and then just include the small fragment when required

[jont]

<br style="clear: both;">

It would be preferable to use <br class="clear" /> and use the following in the actinic.css stylesheet

clear {
clear: both;
}

This would then allow for global changes to the class and allows the class to be used elsewhere outside of the <br /> tag. It should also help reduce code bloat.

[completerookie]

Jont,
don't disagree with you at all. because it was a single fragment containing JUST that small bit of code, I didn't bother with the style sheet But as you rightly point out, if you start down the "style" route, use it properly and completely.

[jont]

Always more than one way to skin a goat (not that I have and he is still alive Duncan - honest)

[Bun]

I don't know of a way to have fragments formatted differently on the same page (wish I did) but this below may help you. Place it in a text fragment and try it. You will need to add the images to the Additional Files List as well.

!!<
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="info.html"><img src="FreeDevEAC.gif" width="185" height="145" alt="Free Deleivery at Eccleston Angling Centre Ltd" ></a></td>
    <td><a href="shop.html"><img src="Front-Film.gif" width="201" height="145" alt="Carp Match and Coarse Fishing Tackle" ></a></td>
    <td><a href="info.html"><img src="Payment-Logo.gif" width="136" height="145" alt="Accepted Payments" ></a></td>
  </tr>
</table>
>!!

Hi Duncan,

That works a treat and just what I'm after. Is there a way to get rid of the borders around each one of the images?

Thank you for your time

[NormanRouxel]

Removing borders:-

change

<img src="

to

<img border=0 src="

[Bun]

Removing borders:-

change

<img src="

to

<img border=0 src="

Hi Norman......I seem to have lost the images by replacing <img src=" with <img border=0 src="

See here

[fergusw]

Hi Bun,
In V8 there is another way to get what you want. It is a little convoluted however it does allow for you to control whether the first AND/OR last row of a list will span the number of columns you specify.

I have used this before to have a 1 fragment in 1st row, (n) fragments in subsequent rows followed by 1 fragment in last row.

(NB. You can replace fragment with section or product in above line depending on what it is that the actinic list is showing)

It requires amending the "List Layout settings" in the design tab for fragment/product/section.

Simply, you define in the "List Layout Settings" in the "Edit Rows and Columns" window how you want the rows to display.

e.g. to ensure that the last item displays across the bottom of the 'table' spanning all the columns then simply define the last row as having 1 no. of items and specify a colspan property for the TD for that row as being the column count variable. e.g. for fragments see screenshot


All you then have to do is be careful of the number of items you have in the list. I.e. if you have 3 in a column and you want 1 flowing along bottom then logic dictates you want 4 or 7 or 10 items and so on.

There are ways to further improve this model to be even more flexible using conditions and alternative rows/columns but I wont go into that here.....

Hope this makes sense and gives you another way to manage this.

It is better than the hard coded way, although not as customisable, as it allows you to use actinic's own elements for each column i.e. Fragments, products or sections.

[Duncan Rounding]

Hi Norman......I seem to have lost the images by replacing <img src=" with <img border=0 src="

See here

Try this (with border=0 added):

!!<
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="info.html"><img src="FreeDevEAC.gif" width="185" height="145" alt="Free Deleivery at Eccleston Angling Centre Ltd" border=0 ></a></td>
    <td><a href="shop.html"><img src="Front-Film.gif" width="201" height="145" alt="Carp Match and Coarse Fishing Tackle" border=0 ></a></td>
    <td><a href="info.html"><img src="Payment-Logo.gif" width="136" height="145" alt="Accepted Payments" border=0 ></a></td>
  </tr>
</table>
>!!

PS - Don't forget to add the images rto Additional Files List.

[Duncan Rounding]

Hi Bun,
In V8 there is another way to get what you want...

Good one Fergus. I often forget about the Layout List Settings.

[Bun]

Try this (with border=0 added):

!!<
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="info.html"><img src="FreeDevEAC.gif" width="185" height="145" alt="Free Deleivery at Eccleston Angling Centre Ltd" border=0 ></a></td>
    <td><a href="shop.html"><img src="Front-Film.gif" width="201" height="145" alt="Carp Match and Coarse Fishing Tackle" border=0 ></a></td>
    <td><a href="info.html"><img src="Payment-Logo.gif" width="136" height="145" alt="Accepted Payments" border=0 ></a></td>
  </tr>
</table>
>!!

PS - Don't forget to add the images rto Additional Files List.

That's the one, thanks Duncan.......very much appreciated