Gap between columns

[bikex_ltd]

Hi, I am trying to set up my home page to have a grid of 8 images across two lines hence having a grid 4 by 2.

The idea is that people can then click on the image to take them to a particlar section.

The only way I can think to do this is to have 8 fragments and then set the column count for brochure pages to be 4.

This seems to work but the gap between the images is too much making the page very wide.

Am I going about this in the correct way?

How can I change the gap between the images?

Any help appreciated.

Regards
Steve @ Bikex.

[wjcampbe]

Use one fragment to hold four images, or even all eight. You are probably falling victim to css padding on both the images and the fragments, though without a link to the problem page, this has to be a wag.

[bikex_ltd]

gap between images

Hi,
Thanks for your reply, is there anywhere where I can read up on the best way to achieve my goal?

(How do I achieve four images in one fragment?)

8 images in two lines of 4.

Each one being clickable to take me to a particular page of my website.

I know this may sound easy to some people but it is proving to be a real challenge for me.

Thanks for any suggestions.

Regards
Steve

[leehack]

Read up on how to create a 2 row, 4 column table in html, then read up on how to add an image in html and then read up on how to make an image a link in html. 3 main aspects to it - that's it. Thousands of tutorials on the web, sounds daunting, but it's not that much really, it's quite logical once you understand how a tag is formed.

You can easily do what you need in actinic using the column count as you mention, but you also need to know html to be able to create yourself a specific layout, just for these 8 fragments. This is my preferred method as it gives you easy subsequent management of that area, but it is probably a bit outside of your ability at this stage.

Make the decision do you need to learn html or can you put those hours into better use on other things and contact a professional, who will do this for you very quickly and cheaply. You always have the option to study their work after, if you was that interested.

[jont]

In the fragment text simply use something like:

!!<<div class="hotmap">
<a href="link1.html"><img src="image1.jpg alt="image 1" /></a>
<a href="link2.html"><img src="image2.jpg alt="image 2" /></a>
<a href="link3.html"><img src="image3.jpg alt="image 3" /></a>
</div>
>!!

I have placed the above on to separate lines .. best to have as a single line due to white space issues with IE6 and lower.

In the actinic.css use something like:

.hotmap {
width: 400px; /* this is 4 x picture width */
}

.hotmap img {
float: left;
border: none;
padding: 0;
margin: 0;
}

[Darren B]

Neat Jont

[bikex_ltd]

Hi, many many thanks for your help in this. I will have a go and see what happens.

I understand the first part to the code but am then unsure about the 2nd section (actinic.css).

Any tips?

Cheers
Steve

[Cheapprices4u]

the style sheet i presume is what hes on about

its in
design>design library> layout> web page outer layout> actinic style sheet
paste the info in there

[jont]

You can also find it from the design tab and select page type "Actinic Stylesheet"

[bikex_ltd]

Images in tables.

Hi all,

Sorry for the delay in replying, but a BIG THANKS to all who helped - the solution seems to work really well.



Thanks
Steve