CSS Hell

[Darren B]

OK i am still trying to move towards more css based stuff, maybe biting off more than i can chew.

Being that i have very limited knowledge of css i hoping someone can help, before i return to tables

This page obviously has a completely different look depending on ie or ff all i want is a simple layout were the text wraps around the image.

http://kitesrus.co.uk/acatalog/Rapier_Sports_Kite.html

im hoping someone can help

Cheers
D

[fergusw]

Hi Darren,
Try simply putting text and images in the one container (<div>) and then simply float the image to the left. The text will wrap around it.

A simple tutorial here:
http://www.tizag.com/cssT/float.php

You can do a lot more with images, text wrapping and CSS., See here:
http://www.bigbaer.com/css_tutorials....text.wrap.htm

[RuralWeb]

is a simple layout were the text wraps around the image.

Why not use the css based layout already in V8?

[leehack]

Or select the Actinic CSS product layout that already does this and see how that is formed. The add to cart code does the float part also, so image goes to the left and add to cart button to the right.

Main thing IMO when you want text to float around an image is to have a right and bottom margin on the image as it looks pants when the text is too close to the image. (margin: 0px 10px 10px 0px; usually looks good)

[RuralWeb]

Or find a css based design on a live site and view source then copy the code.

[Darren B]

Why not use the css based layout already in V8?

ok the layout is the css product layout not mine

Or find a css based design on a live site and view source then copy the code.

I thought about this lol

thanks fergus, im still learning what adding divs and things does, table man me chuck more td's and tr's in to sort the problem

Lee thanks for the padding reminder, i know what you mean about text being to close to the images

Thanks guys
D

[Darren B]

ok changed the whole bloody thin, going to tackle this from another angle, the text wrap does not look good with the image on the left

Cheers for your help guys
D

[gabrielcrowe]

... nice header you got there.

on the css adventure, you'll meet many odd perils, but I'v basically come to the conclusion that, all css layouts are basically the ones listed on layout gala.

The templates are nested inside each other for more complex examples. like in this product example, is basically, a two clumn layout, with a two col layout inside it.

though the examples in layout gala are for entire page layouts, there is no reason why you cant prefix all the styles, and scale them back for inner layouts.

[jont]

the text wrap does not look good with the image on the left

Sometimes it looks better to have the image in clean white space and not wrap the text ... especially products ... product images are very important and if crowded by text can be somewhat detrimental to first impressions and ease of viewing.

If you do need to wrap try and add some extra margin to let it breath a little.

[Darren B]

... nice header you got there.

on the css adventure, you'll meet many odd perils, but I'v basically come to the conclusion that, all css layouts are basically the ones listed on layout gala.

Thanks Gabe, some cool guy did it for me

Sometimes it looks better to have the image in clean white space and not wrap the text ... especially products ... product images are very important and if crowded by text can be somewhat detrimental to first impressions and ease of viewing.

If you do need to wrap try and add some extra margin to let it breath a little.

thanks Jont, i reversed the layout and moved the image to the right, still looks lost though, but not to bad in 1024, maybe put a border around the whole thing, oh decisions decisions

Cheers for the help guys
D