CSS Header tag, I need this tag to be centered |
CSS Header tag, I need this tag to be centered |
hbraekke |
Mar 25 2014, 12:55 AM
Post
#1
|
Group: Members Posts: 7 Joined: 19-September 13 Member No.: 19,758 |
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 |
Frederiek |
Mar 25 2014, 03:47 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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.
|
pandy |
Mar 25 2014, 05:55 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
Frederiek |
Mar 25 2014, 12:23 PM
Post
#4
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 .
|
pandy |
Mar 25 2014, 12:41 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Thanks. Threads merged.
|
hbraekke |
Mar 25 2014, 11:51 PM
Post
#6
|
Group: Members Posts: 7 Joined: 19-September 13 Member No.: 19,758 |
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). |
Frederiek |
Mar 26 2014, 04:27 AM
Post
#7
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You need to set a wrapper DIV around all content, like this:
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> 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. This post has been edited by Frederiek: Mar 26 2014, 04:32 AM |
hbraekke |
Mar 27 2014, 02:54 AM
Post
#8
|
Group: Members Posts: 7 Joined: 19-September 13 Member No.: 19,758 |
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 |
hbraekke |
Mar 27 2014, 02:57 AM
Post
#9
|
Group: Members Posts: 7 Joined: 19-September 13 Member No.: 19,758 |
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... |
Frederiek |
Mar 27 2014, 04:12 AM
Post
#10
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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. 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> |
hbraekke |
Mar 27 2014, 01:36 PM
Post
#11
|
Group: Members Posts: 7 Joined: 19-September 13 Member No.: 19,758 |
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. |
Frederiek |
Mar 28 2014, 03:56 AM
Post
#12
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You're welcome.
|
mamahadija |
Apr 20 2014, 02:02 PM
Post
#13
|
Group: Members Posts: 3 Joined: 20-April 14 Member No.: 20,751 |
text-align:center can also help
|
Lo-Fi Version | Time is now: 19th April 2024 - 02:22 AM |