Jump to content


Photo
- - - - -

Fixed Top Portion?


  • Please log in to reply
5 replies to this topic

#1 shism

shism

    Member

  • Members
  • 22 posts

Posted 06 December 2012 - 11:17 PM

Currently, I am using javascript to add padding to "page-main" when it calculates the height of "header". However, since it has to wait for the document to be "ready" it causes a delay in which the page doesn't correct itself until it's "ready".  The question is then:

 

Can I use CSS or change something in the framework to achieve this same layout where "page-main" scrolls under "header"?

 

or

 

Is there a way to calculate the height of "header" sooner? When I try to wait for the "load" event then nothing works at all for some reason.

 



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 December 2012 - 12:30 AM

Hi there, yes you can use css to add padding to the header or any other element on the site. You could also set the heading position to fixed using css. An example is below, to find out more on css and how to apply in the framework check out -

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content



#3 shism

shism

    Member

  • Members
  • 22 posts

Posted 07 December 2012 - 04:21 AM

The thing is I already have the header fixed. What I am trying to achieve is to have "page-main" completely visible. 

 

The current solution I have is :

 

1. Set #header to fixed

2. Calculate height of header on "ready" event.

3. Adding padding  to #page-main that is about equal to the height of #header

 

Is their anyway to achieve this type of layout without javascript?

 

Is there a way to do this using LESS?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16307 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 December 2012 - 07:47 AM

I don't actually know what you're trying to achieve, why use javascript to calculate your headers height ?



#5 shism

shism

    Member

  • Members
  • 22 posts

Posted 07 December 2012 - 07:53 PM

I am trying to have #page-main be completely visible &  scroll under the header even if the window is resized.



#6 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 07 December 2012 - 08:44 PM

If you position:fixed and top:0 your header, the rest of the page will scroll under automatically.