Author Topic: Fixed Header + Buttons while scrolling in WB V1  (Read 2582 times)

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Fixed Header + Buttons while scrolling in WB V1
« on: September 01, 2013, 06:09:48 PM »
Hi Jacques,

Getting ready for a (re) launch of my weather station Live updates, I uploaded the existing RT files, to make the WB lay-out complete again..  :)  :) (the data is still from when I dismantled my station, early May)

I've received some comments in the past year about the possibility of keeping the Header Image and Button sections fixed while scrolling the pages.

Attached is a picture of my current WB V1 lay-out (as you know a "bit" modified).....
I minimized the Header image as a test (75 px height) to give more space to the text (= info) below, but like this to stay!!!
Where in the CSS files do I create THIS section to stay fixed, while scrolling the rest of the page(s)..??

Thanks,

Arthur

Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1120
    • http://www.meteostours.ca
Re: Fixed Header + Buttons while scrolling in WB V1
« Reply #1 on: September 02, 2013, 02:38:26 PM »
Hi Arthur,
Well come back!  :)

To stay at a "fixed" position, ALL you want to be fixed MUST be
in the same "DIV". So, you'll probably have to add a "surrounding"
area that include all things you want to be fixed.

After, simply add a css directive like this:
position: fixed;

You'll probably have a little problem with your pages as the space
will be "retired" from the page, so you text will be on your menu's back!

Hope this help,

Regards,
Jacques
Please, consider supporting this site 

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Fixed Header + Buttons while scrolling in WB V1
« Reply #2 on: September 02, 2013, 02:49:52 PM »
Hey Jacques,

Thanks for your reply!!
I'll see what I can do! I realize I'll have to re-size the Main Menu buttons and "overflow" frames with buttons (make it all a few font pt's smaller), so it will leave more room for the page text.
Also, the transpareny has to go from the Main Menu button frames, otherwise the scrolling page-text will make a mess..  :)

A new "project"!!
I'll keep you informed!!

Cheers,
Arthur

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Fixed Header + Buttons while scrolling in WB V1
« Reply #3 on: September 02, 2013, 03:40:16 PM »
Hi Jacques,

i followed your advise, however I need some more..... :)

HOW do I make a "surrounding" area in order to fix this??

I've added a <div id="headersection" > before the actual <div id="buttons"> and entered a </div> at the end of the button section, before the main page begins.
It didn't work... >:(

Any suggestions??

Thanks,
Arthur

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Fixed Header + Buttons while scrolling in WB V1
« Reply #4 on: September 02, 2013, 04:03:42 PM »
Hi Jacques,

GOT IT..!!!  :)

Entered instead of an "id"  a "class" and put it above the logo. Had to drop the main text (weather data begins), but it owrks.
Have a look at: http://www.pickeringweather.ca/empty.php

Now working on getting the background for the main menu buttons non-transparent, re-color the buttons and re-size the frames....!!!
Lot's of work, but the end will look great (I hope  :))

Cheers,
Arthur

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
    • http://pickeringweather.ca
Re: Fixed Header + Buttons while scrolling in WB V1
« Reply #5 on: September 04, 2013, 04:22:25 PM »
Hi Jacques,

Thanks again for your suggestions.
I'm very happy with the result of editing (92...!!) pages.... :o

It looks good and the Header/Main Menu & Overflow Menu Buttons stay fixed..!!
Kind if different Weather Blues layout........... ;)
I squeezed the frames and buttons a bit, so there's enough space left on the page..!!

Cheers,

Arthur