The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> CSS Header tag, I need this tag to be centered
Rating  5
hbraekke
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hbraekke
post Mar 25 2014, 11:51 PM
Post #6





Group: Members
Posts: 7
Joined: 19-September 13
Member No.: 19,758
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hbraekke
post 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 smile.gif))

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hbraekke
post 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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
hbraekke
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mamahadija
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 08:02 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC