Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts

    keeping menu at top of page

    I have a menu that is on top of my page in a div called menuhold

    my content is then in a div called content


    my css is

    #menuhold {
    position:fixed;
    height:40px;
    width:100%;

    }

    and for #content it has a padding-top:40px.


    my problem is that when you scroll the menu stays on top as it should but it goes over the text. (in firefox)

    what can I do to keep the menu on the top but without covering the text as I scroll in firefox.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    I think that youíre going to have to be more specific. I understand whatís happening with regard to position: fixed but Iím not sure how what it is you want is different than what you already have. My guess would be that you want the #content element to scroll instead of the document itself? In that case, you donít need fixed positioning at all, but instead the overflow property to force the #content element to exhibit a scroll-bar.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    i now have


    #menuhold {
    /*position:fixed;*/
    height:40px;
    width:100%;

    }
    #menu {
    height:30px;
    text-align:center;
    /*position:fixed; /*this will work in all modern browsers that support position:fixed*/*/
    left:0px;
    top:0px;
    }
    #content {
    padding:40px 5px 5px 5px;
    overflow:auto;
    }


    I want the menuhold to always appear at teh top of the page (even when scrolling) but the content to scroll.

    what do I have to do to do this?

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    this is what i had previously but i don't want the menu to go over the text.

    I want it to be as if I had one frame for the menu and under the menu another frame with the text that changes according to the menu above it.

    can i acheive this without using frames?

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Just so you know, you canít have a comment inside a comment since it is read as:

    Quote Originally Posted by esthera View Post
    #menu {
    height:30px;
    text-align:center;
    /*position:fixed; /*this will work in all modern browsers that support position:fixed*/*/
    left:0px;
    top:0px;
    }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Senior Coder
    Join Date
    May 2004
    Posts
    1,466
    Thanks
    15
    Thanked 0 Times in 0 Posts
    i tried the fixed suggestion above but my links which are page.html#one etc (all aname links) are then not working. how can i get the links to open in the "frame" below.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by esthera View Post
    i tried the fixed suggestion above but my links which are page.html#one etc (all aname links) are then not working.
    This doesnít say anything because you havenít provided any your code or a hyperlink to a Web document.

    Quote Originally Posted by esthera View Post
    how can i get the links to open in the "frame" below.
    That sounds like you want a new page to open in the same page; thatís a job for frames. The only way to do that without frames is to include the contents of all the hyperlinks in that one document and selectively hide or show specific parts of the content (via JavaScript) when the hyperlinks are clicked. Obviously, that will mean your page will break when the user has JavaScript disabled.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    New to the CF scene
    Join Date
    Aug 2010
    Location
    Cambs, UK
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I love you Esthera

    Quote Originally Posted by esthera View Post
    I have a menu that is on top of my page in a div called menuhold

    my content is then in a div called content

    my css is

    #menuhold {
    position:fixed;
    height:40px;
    width:100%;

    }
    I wanted to make my top menu of my new Joomla site stay at the top of the window.. you know so that when you scroll down the menu says visible.

    I thought this was going to be really hard, and prepared for the long mission to find a solution by backing up my site first etc. See what I mean at rlexample.stonedeer.co.uk - though this site is soon to be moved to www.larringtontrailers.com

    This was the first post I found about the subject that made sense and I tried adding "position:fixed;" to the pillmenu css entry.

    Whoalla! It worked perfectly! :-)

    Thanks a bunch for your input! :-)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •