Sun, 2013-11-17 14:34
Hi,
I'm trying to create a page as attached (I simplified it so as to focus on the technical question).
(1) I could easily achieve this using absolute positions, but I know that's not recommended - as explained in a sticky message in this very forum.
(2) If it weren't for the background image, I could also use DIVs (or similar elements such as NAV - that's besides the point):
- One DIV for the left navigation panel (wrapping all sections - "about us", "map", "login", "sign up" as well as "Toys", "clothing" etc).
One DIV for the main content (wrapping of 4 sections - "Toy1", "Toy2", "Toy3", "Toy4").
Unfortunately option (2) is problematic because of the need for the background image to show through.
This means if I want to use DIVS they must be transparent, which is difficult to achieve in old browsers - apparently only CSS3 color model would allow a DIV to be transparent but not inherit this transparency to contained elements...
http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack
I'd appreciate opinions on how to best achieve such a page. Would you settle for absolute positions? Or take option 2 with the risk of lacking/complex support for older browsers? Any other creative ideas?
Thanks 
Sun, 2013-11-17 23:09
#1
Hi pelmam.dev, I'd go option
Hi pelmam.dev,
I'd go option 2 and disregard the older browsers. All the current crop will support rgba as a background color.
I wouldn't use filter or opacity as you probably only want the background showing through, not making the whole box semi-transparent.
That way the text etc is still strong.