I want my <header>-tag centered on my page. But my code aligns left on the page.
CSS-code
header {
background-color: #660000;
border-radius: 15px;
width:1000px;
height:200px;
margin:0 auto;
padding: 10px 0 0 0;
z-index:99999;
position:fixed; /* this line gives me the problem I think */
top:0;
float:none;
}
.textarea_article {
background-color: #1f423c;
border-radius: 15px;
width:1000px;
height:1500px;
margin-top:205px;
padding: 10px 0 0 0;
z-index:500;
}
HTML-code
<body>
<header>
this is my header text and is align on the left side of page.
</header>
<article class="textarea_article">
This is my textarea-text, and this area is centered
</article>
</body>
I hope some see a fault in this code and gives me tip.
by hbraekke
Full Version: CSS Header tag
Put a container element, such as SECTION or simply a DIV, around the HEADER and ARTICLE. Give that the width: 1000px; and margin: 0 auto;. Then the fixed position can stay.
Put the lot in a wrapper DIV (assuming the article also should be centered). Give it a width, center it with auto margins and also make it position: relative. Then your fixed header will position itself relative that DIV instead of the browser window.
I think that's the most flexible solution. The other way is to position the header 50% from the left (that will place its left edge exactly in the center of the page) and then give it a negative left margin of half its own width.
I think that's the most flexible solution. The other way is to position the header 50% from the left (that will place its left edge exactly in the center of the page) and then give it a negative left margin of half its own width.
This very same question is also posted in the CSS forum, where I replied in a similar way earlier today: http://forums.htmlhelp.com/index.php?showtopic=19852 .
Thanks. Threads merged.
QUOTE(pandy @ Mar 25 2014, 05:55 AM) 
Put the lot in a wrapper DIV (assuming the article also should be centered). Give it a width, center it with auto margins and also make it position: relative. Then your fixed header will position itself relative that DIV instead of the browser window.
I think that's the most flexible solution. The other way is to position the header 50% from the left (that will place its left edge exactly in the center of the page) and then give it a negative left margin of half its own width.
I have tryed wrapping the header-tag with a <div> and <section> and <article> tags. Still is the header aligned left. You can see my webpage here
I hope someone can give me a tip what it is wrong. I have tested in IE (ver 11), Firefox (ver 27), Opera (ver 20).
You need to set a wrapper DIV around all content, like this:
Give that the width and margins to center.
I didn't look at your current page before replying. But now that I did, I suggest you change the wrapping ARTICLE to a DIV (like I did) or SECTION and give that the width. You've already set the margin. And get rid of the left: 25%; you have on HEADER.
CODE
<div class="wrapper">
<header>
this is my header text and is align on the left side of page.
</header>
<article class="textarea_article">
This is my textarea-text, and this area is centered
</article>
</div>
<header>
this is my header text and is align on the left side of page.
</header>
<article class="textarea_article">
This is my textarea-text, and this area is centered
</article>
</div>
Give that the width and margins to center.
I didn't look at your current page before replying. But now that I did, I suggest you change the wrapping ARTICLE to a DIV (like I did) or SECTION and give that the width. You've already set the margin. And get rid of the left: 25%; you have on HEADER.
I see you member no. 9, Frederiek... thats good 
))
I did not understand the last post, where you say I should use the div-tag and give it a width, do I give div-tag a with. Isnt it 100% width?
Link is http://henningbraekken.gratiswebhotell.no
))I did not understand the last post, where you say I should use the div-tag and give it a width, do I give div-tag a with. Isnt it 100% width?
Link is http://henningbraekken.gratiswebhotell.no
could you look at my style.css and write what is wrong,
I dont have any hair left on my head..... I have pulled it all out the last days...
I dont have any hair left on my head..... I have pulled it all out the last days...
I didn't take all your HTML/CSS, but just the necessary structure. I changed the class names to something more logical.
Copy the code below and save it in a file as e.g. index.html. And have a look, by opening it in your browser and examining the source.
Copy the code below and save it in a file as e.g. index.html. And have a look, by opening it in your browser and examining the source.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<style type="text/css">
.wrapper {
width: 1000px;
margin: 0 auto;
}
.header_content {
background-color: #660000;
border-radius: 15px;
width:1000px;
height:200px;
padding: 0;
position: fixed;
}
.article_content {
background-color: #1f423c;
border-radius: 15px;
height:1600px;
padding: 200px 0 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header_content">
this is my header text and is align on the left side of page.
</header>
<article class="article_content">
This is my textarea-text, and this area is centered
</article>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<style type="text/css">
.wrapper {
width: 1000px;
margin: 0 auto;
}
.header_content {
background-color: #660000;
border-radius: 15px;
width:1000px;
height:200px;
padding: 0;
position: fixed;
}
.article_content {
background-color: #1f423c;
border-radius: 15px;
height:1600px;
padding: 200px 0 0 0;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header_content">
this is my header text and is align on the left side of page.
</header>
<article class="article_content">
This is my textarea-text, and this area is centered
</article>
</div>
</body>
</html>
Thank you, Fredriek. With some addition it works just as I want.
I will continue to use this forum for help, it was fast. Thanx for the your expertice.
I will continue to use this forum for help, it was fast. Thanx for the your expertice.
You're welcome.
text-align:center can also help
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.