SitePoint Sponsor

User Tag List

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

    Need help to build a fixed menu at the top of the screen.

    Hello, I have tried so many times to make a menu at the top of the page that is fixed, but I always meet problems when I am going to move the text to the middle of the screen and wrapper.

    The menu should be 40px high, and the text should be in the middle of a wrapper. The wrapper should be 1000px in width.

    I hope you understand what I mean!

    Thank you!

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,205
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Hi tobbsis,

    You already started two threads about positioning a menu, here and here, and as Black Max said in the first one, we really need a link to a live page so that we can see what's happening and what the problem is.

    You said in your first thread that you'd solved the problem, and as far as I can see, your text is centred. What exactly is it you're having problems with?

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i mannage to get the menu fixed and in the middle, but i dont know how to make the text come to middle, i have tried: margin:0 auto; and text-algin:center; but none of them worl, and if i use padding or margin, left the space between the words are just increased, So how do i get the text in hte middle?

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,205
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    If you want help, you'll either need to give us a link to a live page - the best option - or the full HTML and CSS code for your page. Otherwise, we can only guess at both the problem and the solution.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi

    If you want a fixed header then just do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    #wrapper {
    	width:1000px;
    	margin:auto;
    	padding:40px 0 0;
    	border:1px solid #000;
    }
    #fixed {
    	position:fixed;
    	width:1000px;
    	top:0;
    	height:40px;
    	background:red;
    	text-align:center;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    		<div id="fixed">Fixed</div>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    		<p>some text to scroll</p>
    </div>
    </body>
    </html>
    You just set up the page as normal and make sure the element you want to be fixed is in the right place in the flow of the document and then at that point you just make it fixed. Don't set left or right co-ordinates if you want it to maintain positioning with the wrapper as the auto positions will take care of that. You can use top or bottom to make a header or footer but leave out the horizontal co-ordinates and it will keep track with the layout assuming the element is the same width.

    You can read up more on fixed positioning here.

  6. #6
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You just set up the page as normal and make sure the element you want to be fixed is in the right place in the flow of the document and then at that point you just make it fixed. Don't set left or right co-ordinates if you want it to maintain positioning with the wrapper as the auto positions will take care of that. You can use top or bottom to make a header or footer but leave out the horizontal co-ordinates and it will keep track with the layout assuming the element is the same width.

    You can read up more on fixed positioning here.

    Thank you very much!

    I only have 1 problem, i want the menu and all that is fixed to be outside and above the wrapper and in the middle if u understand?

    How should i do to make that work?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tobbsis View Post
    Thank you very much!

    I only have 1 problem, i want the menu and all that is fixed to be outside and above the wrapper and in the middle if u understand?

    How should i do to make that work?
    The menu in my example is at the top and in the middle so I'm not quite sure what other combination there would be?

    You may need to provide a rough sketch but the answer will be the same

    If you want the menu to appear to be above some content then just create a new wrapper underneath and style that. The main page wrapper doesn't have to be the one carrying the styling.


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
  •