1 reply [Last post]
pelmam.dev's picture
Last seen: 9 years 28 weeks ago
Timezone: GMT+2
Joined: 2013-11-17
Posts: 1
Points: 2


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...

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 Smile

Tony's picture
Last seen: 3 weeks 3 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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.