Forums

jtso23

I need help getting all the content on my blog centered. I know I have a float:right under the #header_nav id in style.css line 642 that I can delete. The problem is I can't figure out how to get the header image and nav bar to stay centered when the window size adjusts. Can I just throw a wrapper around the whole thing?

Header image:

.top-header-img {
width: 930px;
height: 200px;
margin:0 auto;
}

Nav bar:
I think it has to do with the "float:right" but I'm not sure what the proper notation is to get it in line with the rest of the site.

#nav li {
background:#810945;
float:right;
list-style:none;
border-right:1px solid #a9a9a9;
z-index:5000;
}

DogsGhost

yep, wrap the whole thing in a div so you get something like :


<body>
	 <div id="page-wrap">
	 	 ---all page content here -----
	 </div>
</body>

then in the css:
#page-wrap {margin:0 auto}
and its auto centered.

jtso23

hmm my header image and nav bar are still floating to the right. am I updating the correct files? I added the div id="page-wrap" to the header.php file.

cssloser

dude, importa reset.css file on your main stylesheet ..
http://meyerweb.com/eric/tools/css/reset/

should be like this, copy the css code on the link. save it as reset.css.
and on the main stylesheet add @import url('reset.css')

both the css files should be on the same folder . :) hihi

chrisburton

Wrong @cssloser
why would you create a separate css file for a small reset that would require an extra http request? That would mean it would take more time for your website to load.

@jtso23, To answer your question: No, your pagewrap does not belong in the header, it belongs in the body. Add this CSS in your stylesheet

/*****
RESET
*****/
* { margin: 0; padding: 0; }

#page-wrap { width: 960px; margin: 0 auto;}

Specify a width so the auto margin can determine what is the center

Now add the page-wrap right after the body element

<body>
<div id="page-wrap">

Remember to close the div right before your footer

jtso23

yay thank you so much @christopherburton, specifying the width did the trick!

chrisburton

anytime

cssloser

@ChristpherBurton i don't know that he was also considering speed ..hehe

chrisburton

@cssloser Huh? Speed is one of the main factors in building a website.

treehouse : what would you like to learn today?

Forums

[Solved] Centering a page using CSS (Wordpress)