Jump to content
Sign in to follow this  
shism

Fixed Top Portion?

Recommended Posts

shism    0
shism

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.

 

Share this post


Link to post
Share on other sites
James B    436
James B

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 - http://www.pagelines.com/wiki/Custom_CSS

 

#header
{padding-top:40px ;
position:fixed;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
shism    0
shism

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?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
shism    0
shism

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

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×