CODEWITHSUNDEEP
htmlcss
LearningRoR
LearningRoR

Reputation: 27222

Centering text for non-image background header?

To continue off of this question: Stretchable header like StackExchange. I am having issues being able to center my text for my website so it stays inside of the 960 grid container (I am using the 960 grid system). Theirs 2 different ways I've tried:

.

  1. Have my Logo and menu inside of the background div but this makes all of the text go way left on the screen outside of the 960px container.

    <div class="container_24">
  <div id="header-top-border" class="grid_24"></div>
  <div id="header-background" class="grid_24">
    <div class="grid_5">Logo</div>
    <div class="grid_19">Main Menu</div>
  </div>
</div>

  2. I Have it outside of the logo and menu but this covers up everything included in my header (logo, header-top-border and menu).

    <div id="header-top-border" class="grid_24"></div> # not shown
<div id="header-background" class="grid_24"></div> # covers all
<div>Logo</div> # not shown
<div>Main Menu</div> # not shown

Here is my css:

#header-background {
    background: rgb(144,191,34);
    position:absolute;
    top: 0;
    left:0;
    margin: 0 auto;
    width:100%;
    height:50px;
}

What am I missing here?

Upvotes: 0

Views: 101

Answers (1)

Al-Mothafar
Al-Mothafar

Reputation: 8219

About your code, you cant use position: absolute; with margin: 0 auto; trick, because that what "Scott Simpson" said on his comment, but if you need to use position absolute for #header-background, you can use the following code to help you :

First I suggest to use clearfix trick with container :

http://css-tricks.com/snippets/css/clear-fix/

and i recommend to reset margin and padding for all elements or at least for body, so put this code on the first of first line of css file must loaded:

* {
    margin: 0;
    padding: 0;
}

Then edit your code to be like:

HTML: 

<body>
<div class="container_24 clearfix">
  <div id="header-top-border" class="grid_24"></div>
  <div id="header-background" class="grid_24">
    <div class="grid_5">Logo</div>
    <div class="grid_19">Main Menu</div>
  </div>
</div>

Then your css:

.clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.container_24 {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
#header-background {
    background: rgb(144,191,34);
    position:absolute;
    top: 0;
    left:0;
    margin: 0 auto;
    width:100%;
    height:50px;
}

Note what I made for .container_24.

I hope this will help you.

BTW: if you cant edit: the following line: 

<div class="container_24">

To add .clearfix class, you can just edit css, so use .container_24:after instead of .clearfix:after, I hope this will make every thing good.

Upvotes: 1

Related Questions