SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with a fixed menu!

    Hi there!

    I need help with a menu that follows when I scroll.

    And i need it to go to the middle.

    With these codes, I get the menu to follow when I scroll down but it does not get into the middle of the page.


    Look at the bottom for more information on that I have a wrapper and so on.



    Among the codes in html, I have this code:

    Code HTML4Strict:
     
    <div id="menuline">
    <div id="meny">
    		<ul>
            	<li><a href="index.html" class="hem">Hem</a></li>
                    <li><a href="om.html" class="om">Om</a></li>
                    <li><a href="tjanster.html" class="tjanster">Tjänster</a></li>
                    <li><a href="kontakt.html" class="kontakt">Kontakt</a></li>
                    <li><a href="ovrigt.html" class="ov">Övrigt</a></li>
            </ul>
     
    </div>
    </div

    And to the text (which is the menu) will be in the middle, I have written this code:

    Code CSS:
     
    #meny				{ 
    			 color:#CCC; 
    			 position:relative;
    			 width:660px; 
    			 height:30px;
    			 font-family:Georgia, "Times New Roman", Times, serif;
    			 top:10px; 
    			 margin:0 auto; padding-left:100px; 
     
    		 }
     
    #meny li	{ display:inline; margin:0 auto;	}	
     
    #meny li .hem	{
    			border-right:1px #999 solid; padding-right:30px; border-left:1px #999 solid; padding-left:30px; margin:0 auto;
    	}
     
     
    #meny li .om	{
    			border-right:1px #999 solid; padding-right:30px; padding-left:30px;
    	}
     
    #meny li .tjanster	{
    			border-right:1px #999 solid; padding-right:30px; padding-left:30px;
    	}
     
    #meny li .kontakt	{
    			border-right:1px #999 solid; padding-right:30px; padding-left:30px; 
    	}
     
    #meny li .ov	{
    			border-right:1px #999 solid; padding-right:30px; padding-left:30px; 
    	}



    To get a "line" where the text should be, I made a div tag named menuline and then I have written this in css:


    Code CSS:
     
    #menuline			{ width:auto; height:40px; background-color:#900; position:fixed;	}




    So what am i doing wrong? Because the "menu" do end up in the middle, it hits the side and I do not want that. Does it have to be a specific width? or can it adapt after whichscreen you have? or do I have to make the line a certain width?


    But i have the whole thing fixed (it follows when i scrolls) but i need it to go to the middle.


    I can say also that I have a wrapper on 1000px in width, but then I have no "limit" on the page so the text should be in the middle of the wrapper then.





    So plz help me to get this ting in the middle

  2. #2
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    https://yeyfiles.net/kattmat/0bf5c2b190.png



    Visit that link to see how i mannaged to get the menu in the middle. bur now it's not fixed, and when i add position:fixed; to any of div tags the whole thing moves to the left!

    So how to solv that?


Bookmarks

Posting Permissions

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