Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Centering a page using CSS (WordPress)

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #32556
    jtso23
    Member

    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;
    }

    #48235
    DogsGhost
    Member

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




    ---all page content here


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

    #48236
    jtso23
    Member

    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.

    #48239
    cssloser
    Member

    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

    #48209
    chrisburton
    Participant

    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


    Remember to close the div right before your footer

    #48141
    jtso23
    Member

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

    #48142
    chrisburton
    Participant

    anytime

    #48067
    cssloser
    Member

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

    #48062
    chrisburton
    Participant

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.