CODEWITHSUNDEEP
htmlcssweb
Aaa
Aaa

Reputation: 910

CSS: Center a main page div

I have a layout in mind for my website: https://i.sstatic.net/PyVVF.jpg The problem is, I have no idea how to make the center strip go behind the nav bar, stay toward the middle of the page (even when zooming), or even show up the right way. Can someone either direct me to a tutorial, or tell me how? Here is my full code: http://jsfiddle.net/c7r6g/ (I have set the navbar as image files, if you didn't notice) The navbar is .rounded, and the div I'm trying to center is #centerstrip

Sorry if this is a bit vague, I am an amateur in CSS (Especially positioning.)

Upvotes: 0

Views: 245

Answers (6)

CodeTrooper
CodeTrooper

Reputation: 1888

May I recommend using the 

.property{
   z-index: 10;
}

Where the number indicates the highest element in a z array-like position.

Also, if you want it to keep the same way with different resolutions and zooms, try responsive design.

May I recommend also if you're going to get into responsive design, taking a look at some really good frameworks such as bootstrap or foundation.

Upvotes: 0

muiiu
muiiu

Reputation: 587

Just messing around a bit, here you go. I managed to render your linked image in CSS.

While I am using just divs, the concept are the same.

http://jsfiddle.net/jqarz/1/

Code below.

A couple concepts to explore are width, margin and padding. It's important to note that width is actually "width of the content box" and not width of the element, like many sites poorly describe it.

There are a lot of ways to do this and this is just one, it's really dependent on what you are trying to do and with what.

HTML:

<div id="background">

    <div id="navbar">navbar</div>
    <div id="content"></div>    

</div>

CSS:

#background
{
    z-index: 0;
    padding: 15px 15px;
    width: 600px;
    height: 800px;
    background-color: #CFF;
    border-style: solid;
    border-width: 1px;
}

#content
{
    z-index: 1;
    border-style: solid;
    border-width: 1px;
    margin: 0 auto;
    width: 90%;
    height: 800px;
    background-color: #FFC;
}

#navbar
{ 
    top: 150px;
    position: absolute;
    z-index: 2;
    width: 600px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    height: 100px;
    background-color: #FCF;
    text-align: center;
    font-size: 4em;
}

Upvotes: 0

Justin
Justin

Reputation: 164

I usually wrap everything in the body inside a div and then center the div. The body element naturally will have a width equal to whatever your browser window is, so therefore if you the first tag inside your body tag is a div, and you center that div, it will be centered to the body and thus the window. Here's some sample code:

<!doctype HTML>
    <html>
        <head>
            <meta lang="en" charset="utf-8" /> 
            <title>Sample</title>
        </head>
        <body>
            <div id="container">
            </div>

            <style>
                body{
                    background-color: red;
                }
                #container{
                    height: 400px;
                    width: 400px;
                    margin-left: auto;
                    margin-right: auto;
                    background-color: blue;
                } 
            </style>

        </body>
    </html>

The trick is to use margin-left: auto; and margin-right: auto;, and to be sure that you're putting that style on a div. You can't put that style on the body because the body has nothing to reference itself against for centering. A div however, can center itself in relation to the width of the body

Upvotes: 0

Sid M
Sid M

Reputation: 4354

Made changes in your CSS,this works fine in your fiddle,replace that in your fiddle with this.

#centerstrip {
    background-color: #bbbbbb;
    height: 100%;
    width: 50%;
    display: block;
    margin:auto;
    z-index: -1;
}

By this your div will be aligned to center and your div will be underneath the nav bar also.

Upvotes: 0

Hans
Hans

Reputation: 968

Since your navbar is part of your content, all you have to do is make it extend to the outsides, which can be done by having its width be greater than 100%. This will make it extend to the right of the main content.

To shift it left, you have two options, both of which have their merits: 1. Shift the navbar to the left by using a position of relative and a negative left value. 2. Use a negative margin on the left hand side.

This will allow you to avoid using the z-index, which may not be fruitful since the navbar is part of the center strip.

Upvotes: 0

evsc
evsc

Reputation: 260

Have a look at the CSS z-index property. With it you can define which element is placed on top of the other.

If you add this to the style of your #centerstrip, it'll display underneath the navigation bar.

#centerstrip {
    position: absolute;
    z-index: -1;
    top: 0px;
}

Upvotes: 1

Related Questions