Overlapping elements on a responsive skeleton website
I've got quite a complex problem here.
What I am trying to do is have a site header with menu, that are on top of each other and a main picture underneath, which also overlapps.
Here's a preview (try scaling it down to see the problem)
And it should be looking like this:
If the site hadn't been responsive I would do it without a problem with absolute positioning. But since this is based on the Skeleton boilerplate, additional positioning just messes up the whole layout.
I can provide the whole html/css if needed, but I'd appreciate also some general advice or tips on how to get over this issue.
Thanks a lot
As you say, the solution is to use absolute positioning, but that won't work with existing code that was not written to accommodate it. I would suggest that this is an inherent problem with using boilerplate code. So the solution may be to either simplify the design to suit the boilerplate, or rewrite the site using absolute positioning. I doubt that is what you wanted to hear, and I could very well be wrong, but that is my two-penny-worth.
Ye, actually I came to the conclusion myself, that this sort of thing probably can't be accomplished. I just wanted to try out some responsive bolierplate and designed a quick theme for it, which isn't very suitable as I see now.
On second thoughts, it might be possible to use media-specific stylesheets. Only rather than actually being media specific, make them page width specific. So what you would need to do is:
1. Define the min and max page widths you are going to support, e.g. min width 480px, max width 1200px.
2. Within that range, identify the widths at which the display breaks down. That defines the display ranges you need to support.
3. Define the default range and use "media specific" stylesheets to suit the remaining ranges.
E.g. Say that the ranges you need to support are 480px - 639px, 640px - 959px and 960px - 1200px.
Assuming that the default width is 640px to 959px, the following meta commands would define the width-specific stylesheets:
<link rel="stylesheet" href="small.css" media="max-width:639px" title="styles" type="text/css">
<link rel="stylesheet" href="large.css" media="min-width:960px" title="styles" type="text/css">
The sylesheets "small.css" and "large.css" would redefine the menu, (and whatever else needed redefining) to suit the page width.
Note: This solution will not work fully with IE8 and below, as they ignore media specific stylesheets. So one of the ranges must be the default, and IE8 will use that stylesheet. I.e. The default range is set to whichever works best on IE8.
This might be worth considering???
Last edited by jedaisoul; 10-18-2013 at 01:32 PM.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)