CODEWITHSUNDEEP
csshtml
RHK-S8
RHK-S8

Reputation: 329

fluid layout, nav bar moves down but upon window resizes it overlaps

im probably gonna get flack from some users for not doing enough research. However i have spent 2 days on this issue, and lack of "what to look for" is getting to me. Therefore i apologize to people if this question has been answered.

Im building a website for someone as a favor, and using a free template to do so: http://sg-layout.com/demo/Eve/subpage.html

Here is my issue: On the link provided above, you will see 2 grid layouts next to each other on full screen, as you resize the window.... the left div (the one that says styles) goes ontop of the right div (style playground). This is perfect, however i wish to use the left div as a navigation menu. Which means it would be epic if it could move down as the user scrolls down the page. By applying the position:fixed, it will achieve this. However it overlaps, the right div, almost as if now the right div grid ignores its left div. I fixed this by applying a more fixed width for both div's instead of a fluid layout based on percentage. I also introduced float left and float right to each div. however as i resize the screen it does begin to overlap, instead of the cool feature where the left div moves ontop of the right div. Most likely due to the fact i no longer use a fluid type layout.

Is there anyone that can show me a tutorial/previous-post on this issue? Im very new to fluid layouts, and i cant seem to get this working. Once again my apologies for this extremely long explanation, I hoped by explaining what i've done so far, you could get an idea of some of the fixes i have attempted.

SUMMARY

If my explanation, is too messed up. heres a quick summary of what im trying to achieve:

thanx!

Upvotes: 0

Views: 405

Answers (2)

StackSlave
StackSlave

Reputation: 10627

You could do something like,

<style type='text/css'>
  @import 'maincss.css';
  @import 'smallscreen.css' (max-width:480px);
</style>

using two external stylesheets, or use the @media rule on the same stylesheet. The following link may help: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Make sure you have your @imports above all other CSS.

Upvotes: 1

J V
J V

Reputation: 92

You can use @media queries to do your own special styles for different screen sizes (traditionally you can do a mobile/tablet/desktop/high rez set of styles).

In terms of getting around the issue with a fixed position navigation, when you set the position of an element to be fixed you are essentially pulling that element off of the page.

I always think about it like your page is one long piece of paper and you are looking at your page through glasses. When you set position to be fixed you are cutting that element piece out of the page, and attaching it to your glasses. Because the element is on your glasses and not in the document, everything else on your page moves up to fill that space.

You have options, by leaving space for the bar you can circumvent the issues. The two traditional ways of doing this is adding margins (either top, or left in this case) or by creating a spacer div. Either way you have to play with it.

I suggest creating a great layout for the one size of your page and then concern yourself with the other sizes (i.e. max-width: 480/960/etc.) and perfect each instead of trying to do them all at the same time

Upvotes: 1

Related Questions