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.
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?[/FONT]
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?
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.
If you want a fixed header then just do something like this:
<!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.
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.