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

**tobbsis** · May 8, 2012 11:33

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!

**TechnoBear** · May 8, 2012 11:44

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?

**tobbsis** · May 8, 2012 13:35

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?

**TechnoBear** · May 8, 2012 13:38

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.

**Paul O'B** · May 8, 2012 14:05

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.

**tobbsis** · May 9, 2012 14:30

Originally Posted by Paul O'B

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?

**Paul O'B** · May 9, 2012 14:45

Originally Posted by tobbsis

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.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions