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

layout_q.gif

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 Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 12 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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.