I'm trying to add some images over the main product images with marketing messages like SALE or NEW etc. I figured the most flexible way would be to create some template images with coloured splashes and overlayed text messages and simply stack them using z-index and select the appropriate combination using a custom variable for each product.
However, no matter what I try whenever I add the code to Actinic, the images follow one another in a column instead of overlaying as expected.
The sample test code below works perfectly standalone so I presume this is a CSS problem in actinic.css but no idea what it might be - any ideas folks ?
testcss.css ( I have added these lines to the main actinic.css file too )
standalone .html test , proves concept works perfectly. But when inserting this into Actinic ( even in something as simple as a text fragment with the usual !!< >!! tags ) it gets interpretted as a column of images instead of overlaying them as expected.
However, no matter what I try whenever I add the code to Actinic, the images follow one another in a column instead of overlaying as expected.
The sample test code below works perfectly standalone so I presume this is a CSS problem in actinic.css but no idea what it might be - any ideas folks ?
testcss.css ( I have added these lines to the main actinic.css file too )
Code:
#imagelayer { position:relative; z-index:9030;}
#colourlayer { position:relative; top:-320; left:0; z-index:9040;}
#textlayer { position:relative; top:-420; left:0; z-index:9050;}
Code:
<html> <head> <link rel="stylesheet" href="testcss.css"> </head> <body> <p> <div id="imagelayer"> <img src="product.jpg" width=200 height=320> </div> <div id="colourlayer"> <img src="label_red.png" width=100 height=100> </div> <div id="textlayer"> <img src="label_sale.png" width=100 height=100> </div> </p> </body> </html>
Comment