No Scrolling On Menu Side

Brandon / 2008-09-30 17:46:21   

I'd like my menu to scroll with the entire page. Daniel's site shows a scrollbar with the left menu -- I do not want this to happen.

Basically, I do not want to see a scrollbar. If my list is long enough to scroll, then I just want the whole entire page to scroll.

Can anyone give me any tips?

LeslieOA / 2008-09-30 18:14:00   

Firstly, try to avoid excessive menu items and exhibits, then remove the following from #menu in your stylesheet (assuming you've kept default classes and IDs and based on Eatocks own): -

  1. overflow: auto;

If you need further assistance, leave your URL so we can help.

Peace.

Brandon / 2008-09-30 18:16:37   

Thanks Leslie! I'll give that a shot.

My URL is http://darkcollar.com/work

Brandon / 2008-09-30 18:20:07   

Okay, I did that.

Now, scrolling the page only scrolls the content. I want the whole page to scroll together. Is that possible?

Thanks!

Vaska A / 2008-09-30 18:20:56   

Looks really nice brandon. You'll need to do more...I'm just winging it there...

  1. #menu {
  2.     background-repeat: no-repeat;
  3.     background-image: url(http://work.darkcollar.com/images/dc-portback1.gif);
  4.     width: 320px;
  5.     overflow: visible;
  6.     top: 0;
  7.     bottom: 0;
  8.     left: 0px;
  9.     position: absolute;
  10.     background-color: black;
  11. }

You can't put padding or margin on the #menu div...big problem...so add this rule...make sure it appears after the .container rule...

  1. #menu .container{
  2.     padding-top: 160px;
  3.     padding-left: 12px;
  4. }

We are removing the auto height, scroll and fixed position...see how this works.

LeslieOA / 2008-09-30 18:23:16   

Ah, I get you now.

  1. Your #content should look more like this: -
  2. #content {
  3.     color: #45433d;
  4.     margin: 0;¬†¬†¬†¬†
  5. ¬†¬†¬†¬†padding-top: 0px;
  6. ¬†¬†¬†¬†padding-left: 0px;
  7. ¬†¬†¬†¬†float: left;
  8. }

...and you should add a float: left; to your menu also.

Awesome site BTW.

Vaska A / 2008-09-30 18:24:23   

Pew pew pew...Indexhibit Help Team attack!

Sorry...I'm a bit retarded tonight.

;)

LeslieOA / 2008-09-30 18:25:15   

Yeah, Vaskas on the right track also.

I have a local copy of your homepage with the following mods to yoru stylesheet that works fine: -

  1. #menu {
  2.     background-repeat: no-repeat;
  3.     background-image: url(http://work.darkcollar.com/images/dc-portback1.gif);
  4.     width: 320px;
  5. ¬†¬†¬†¬†background-color: black;
  6. ¬†¬†¬†¬†padding-top: 160px;
  7. ¬†¬†¬†¬†padding-left: 12px;
  8. ¬†¬†¬†¬†float: left;
  9. }

...and...

  1. #content {
  2.     color: #45433d;
  3.     margin: 0;¬†¬†¬†¬†
  4. ¬†¬†¬†¬†padding-top: 0px;
  5. ¬†¬†¬†¬†padding-left: 0px;
  6. ¬†¬†¬†¬†float: left;
  7. }

Hope this helps!

Brandon / 2008-09-30 18:26:45   

Yes! Yes! Yes!

Thank you soo much!!! This is exactly what I meant.

Looks perfect! http://darkcollar.com/work/

Thanks so much Leslie and Vaska!!!!

LeslieOA / 2008-09-30 18:27:11   

Hiiiiiiiiiiiyyyyyyyyyyaaaaaaaaaaaaa!
Indexhibit to the rescue! Vaska you're awesome and probably overworked!

"Pew pew pew...", please don't tell me Sarah Palin has become the new spokesperson of Indexhibit? ;-D

Edit: Not a problem Brandon!

Vaska A / 2008-09-30 18:28:27   

pew pew pew

;)

pew

Vaska A / 2008-09-30 18:29:43   

Be sure you test on IE...6 and 7...

sinstuff / 2008-10-24 17:05:57   

Hello,

I would also like to scroll the whole page with only one scrollbar. I've been trying to follow the steps but must have missed something. Is it possible to make it happen if my menu list extends beyond the window? I've already removed the menu scrollbar but would like to prepare whole-page-scrolling in case the list grows really long.

http://www.sin-stuff.com/

Thanks,
sin

sinstuff / 2008-10-24 17:12:50   

Oh I seem to have got it now {position: absolute;} , thanks anyway!

iwakami / 2008-10-24 20:26:10   

aw... this doesn't work with crabs... now seems obvious to me... :/
but i think this technique would improve indexhibit interface

robbg439 / 2009-09-03 20:33:14   

I did this technique but look:

my site

If you have to scroll down, the grey background of the #menu only extends down as far as the original window height... Weird. Then, when you make the window taller, the grey background scurries down to meet the bottom of the window.... Very weird. How do I make the grey background always extend to the bottom of the total window area including the scroll area, and not just the window height?

oriol / 2009-10-04 22:20:58   

hi
I have the same problem than robbg439.
The white space background of the menu only extends as far as the original window height.
Can you explain us how can we make the background always extend to the bottom of the total window area, including the scroll area?

My site
www.oriolnogues.com
Thank you so much!

arsondpi / 2009-10-04 23:00:28   

r u looking for the full background plugin?

jnine / 2012-01-21 21:35:31   

hi there,
i have the same problem.. i have updated the jquery to the latest version.
now i want to use your link arsondpi but there is an error 404

could you help me to find the link?

thank you janine

pernin / 2012-01-22 02:55:24   

out of topic: this thread is not about the full background

yes, dropbox link is broken or doesn't exist any longer. You can download the plugin here

jnine / 2012-01-22 10:21:38   

sorry about that. thank you for the link :)

jnine / 2012-01-22 11:14:37   

Hi Pernin… but I do have the same problem as robbg439 and oriol

I wanted the whole entire page to scroll so I added :
#menu {
    background-repeat: no-repeat;

that’s fine then:

If you have to scroll down, the transparent/white background of the #menu only extends down as far as the original window height. Then, when you make the window taller the transparent/white background scurries down to meet the bottom of the window.

I want that the the transparent/white background always extend to the bottom of the total window area including the scroll area, and not just the window height… ☺

I did:

I have updated the jquery to the latest version… I think that is fine…

Then I uploaded the full background plugin…. And did all the steps as explained in the read me file but somehow it does not work…
Sorry when I write here again but for me it fits here…

Now my menubar topics are not active anymore and the problem with the white background is still there…

Can you help me with that?

http://zuest-gruengestaltung.ch

rickykappa / 2012-01-22 12:43:48   

first of all there's something wrong in your style.css:
#menu {
background-repeat: no-repeat;
... }
which has no sense like that
and
#menu ul li.section-title { ...
    color: #434343;http://zuest-gruengestaltung.ch/files/gimgs/10_img2786web.jpg
... }
repair those and see if things get better
;-)

rickykappa / 2012-01-22 13:01:57   

another funny thing is your
<div id="wrapper">
which isn't closed and comes after the </body> tag?

jnine / 2012-01-22 15:21:44   

thank you now we are closer..

the menu works again :)

but why this does not make sense to you?
#menu {
background-repeat: no-repeat;
since i have this line i had the whole page scrolling :) and i do not have a visible scrollbar.

the thing is still that i still have that:

if you have to scroll down, the transparent/white background of the #menu only extends down as far as the original window height. Then, when you make the window taller the transparent/white background scurries down to meet the bottom of the window.

I want that the the transparent/white background always extend to the bottom of the total window area including the scroll area, and not just the window height…

is there something else i should try?

rickykappa / 2012-01-23 03:18:48   

doesn't make sense because there's no background declared to repeat or no-repeat.
you can see the correct structure of such a property here
and also trying to validate your css will take you in the right direction...

for your other question, I can't reproduce the behaviour that you describe, I'm working with a small screen size...
;-)

jnine / 2012-01-23 13:19:37   

hi,
thank you so much for your help... i had lots of errors, got rid of them. :)
the thing that since i have done that my semi transparent menu i had, had to be in white and i can not find out to make it correctly semi transparent. i can make it any color or completely transparent but not semitransparent...

i had: rgb(255,255,255,0.8) but when i validate the css it sais it is not good. i checked the forum but :(

the other thing is since i have that:

#menu {
overflow: visible;
position: absolute;

i can scroll the whole page which is good. i played around with all the possibilities but i do not get what i had before...

the picture should go under the menubar. so i want to have the menubar fixed (but only sidewise). if you would make the window smaller it should be possible to sroll down the whole page with the menu to see all the content...

i do not get that. i really tried the combinations but it seems that everything can be fixed or not...

the other thing that the white menubar does not goes down when you make the wonow smaller i try to figure out... thanks for the help though :) i really appreciate your service here... i would be lost....

rickykappa / 2012-01-24 05:31:55   

sorry, a bit in a rush, I'll be away from my computer for a few days:
- rgb(255,255,255,0.8) it isn't css 2.1 valid, but no harm if you leave it there: most of modern browsers will accept it and render it, others should just drop the transparency declaration and give you full white.
another solution is to give a semi-transparent.png image as background in your #menu - you need only a small img and use the repeat property.
- #menu should have a height declared, i.e. 100% and usually is fixed
- remember you can add styling properties to
#menu .container
- watch at the html source of your page and compare it to some other pages that you like, lot to learn from this practice!
;-)

jnine / 2012-01-24 10:07:31   

hi ricky,
yes i recognized that older explorers have trouble and they render it completely transparent if you have rgb(255,255,255,0.8)...
i tired something yesterday with putting a picture in the menu. i will try again cause i seem to be on the right track.
i was just not sure where to put the picture... and it was not working at the end and i gave up :(
i try again and let you know how it went.
thank you again.
:)
janine

jnine / 2012-01-24 17:58:02   

hi ricky,
ok it worked with the image, great thank you....it took a while though :) i am happy that this is clean now.

1. is there really no solution to have the menu: fixed (that the pictures go behind my menubar and the menubar itself absolute... thant i do not need a scrollbar?
the closest thing i have come up with is with scroll but i do not like the scrollbars in the menu.
is there another option? if not how can i change the scrollbar from the right side to the left side of the menu?

2. i checked the falowing page (http://www.containercorps.com/) for my menubar problem. on that page the menu (grey) goes all the way down. my menu ends somewhere.
i tried to change the height but i think there is nothing bigger then 100%
i do not get that and i can not see anything on his page...

jnine / 2012-01-28 11:26:57   

hi, can no-one help me with that:
2. i checked the fallowing page (http://www.containercorps.com/) for my menubar problem. on that page the menu (grey) goes all the way down. my menu ends somewhere.
i tried to change the height but i think there is nothing bigger then 100%
i do not get that and i can not see anything on his page...

http://zuest-gruengestaltung.ch

pernin / 2012-01-28 13:33:54   

this is causing you trouble, shouldn't be there, and anyway, whateveris in that png, it's not visible against the background:

#menu .container {
background-image: url("http://zuest-gruengestaltung.ch/ndxz-studio/site/vorlage_1/gradient.png");
background-repeat: repeat;
}

leave #menu .container empty, and in your #menu work with background-solor and opacity. Set the overflow x and y properties to auto, or no-scroll if you don't want scroll bars -- although how do you plan to scroll when content overflow...

jnine / 2012-02-01 13:45:26   

hi permin,
oh thanks for the tipp with the opacity... :)

I know what i have to do to do not get the scrollbar and stuff. I think i did not explained it well :)

I like that the pictures go under the menu-bar (that's why i have the menu-bar half transparent). I wish to keep that. If i make the window smaller thouh the menu is fixed (i think because it affects the whole page) position: fixed;
and people can not the the whole content in the menu-bar.

if i change it to position: absolute; the whole page is scrolling down without the scrolling-bars (i like)

BUT the pictures do not go underneath the menubar anymore.

So my Question is; is the solution to this to but
overflow: scroll;

and try to make the scroll nicer or is there another possibility to have what i have now:

http://zuest-gruengestaltung.ch/index.php?/gaerten/planungen/

with the pics running underneath the menu-bar?

And how i solve the problem i mentioned above that the white menu-bar does not go down.

i am trying since a long time and i can not get it. i have checked others webpages but i do not see anything....

thank you for your help :)

janine

ps. i know i am a pain in the...

pernin / 2012-02-01 15:25:50   

hmm, difficult call with that long menu and small screens... how about position: fixed for your menu, but using an expanding menu instead?

jnine / 2012-02-01 15:46:48   

hmm ok sorry for that question but i do that in the index.php and not in the style right?

pernin / 2012-02-01 15:54:03   

you can test Ross Cairns' expanding menus. There are some other variants and versions around if you search the forum

jnine / 2012-02-01 15:56:30   

yes i have seen that and i am here at the moment thank you for the help:
Forums » Customize
automatic close of expanding menu
:)

This thread has been closed, thank you.