WordPress.org

Support

Support » Themes and Templates » Move entire blog from left of page to the centre.

Move entire blog from left of page to the centre.

  • hullabamoo
    Member

    @hullabamoo

    I’d like to move this blog from the left of the page to the centre, but don’t know how to go about it.

    Would it require a huge amount of changes or would it require some simple CSS?

    If so, could someone explain or point me to a resource that does?

    Thanks.

Viewing 15 replies - 1 through 15 (of 16 total)
  • @mercime
    Participant

    @mercime

    body add text-align: center

    body {
    text-align: center;
    }

    #head – delete and replace margin-left and margin-right with margin: 0 auto;

    #head {
    margin: 0 auto;
    }

    Add #main to style.css with ff declaration

    #main {
    margin: 0 auto;
    text-align: left;
    }

    hullabamoo
    Member

    @hullabamoo

    Brilliant, thanks mercime.

    cassandraellen
    Member

    @cassandraellen

    Do you make all of these additions/changes to the style.css file?

    It didn’t seem to work for me. http://cassandraellen.com

    cassandraellen
    Member

    @cassandraellen

    Please? Anyone?

    blackbookdesign
    Member

    @blackbookdesign

    Hi there,

    I just checked quickly in firefox with firebug and tried to do it.
    But you site is using soooooooo many divs. A major clean-up would be nice.

    The trick to make thing align is to create “wrapper” that has a margin: 0 auto; (makes it centered)

    Inside you put your div container with a desired width best one in my mind: 960px.
    no matter how big is your screen that container div will be centered with 480 each side. The inside that div you put your content divs (header, content-footer can be considred outside if you want it to stick at bottom of page if your page height is less then the html window.

    hope this helps.
    cheers

    Netdetective
    Member

    @netdetective

    I am having a similar problem. For some unknown reason, my entire blog is shoved over to the left side of the page with a HUGE blank space to the right of my sidebar.

    Not sure how to fix it. It looks like crap.

    http://www.beyourowndetective.com/blog

    Fred

    blackbookdesign
    Member

    @blackbookdesign

    @ netdetective:

    the problem is that you commented out the header and the page div isn’t registerng anymore. What you need to do is to put back that page div on top of you “content” div. it would look like this:

    <hr>
    <div id="page">
    	<div id="content" class="narrowcolumn">

    and for the CSS same thing as higher

    #page {
    background-color:white;
    border:1px solid #959596;
    margin:0 auto;
    padding:0;
    width:760px;
    }

    Netdetective
    Member

    @netdetective

    I made your recommended changes but still having the problem.

    I did have #header and #content commented out in styles.css so I removed the #. I added the first code to header.php.

    blackbookdesign
    Member

    @blackbookdesign

    Hi,
    I just checked your code and it comes up like this:

    <body>
    <table width="100%" cellspacing="0" cellpadding="5" border="0">
    </table>
    <hr/>
    <div id="content" class="narrowcolumn">
    </div>
    <div id="sidebar">
    </div>
    <hr/>
    <div id="footer">
    </div>
    <script type="text/javascript">
    </script>
    <img width="1" height="1" alt="" style="display: none;" src="http://www.beyourowndetective.com/cgi-bin/axs/ax.pl/ax.pl?mode=img&ref="/>
    <noscript> <img src="http://www.beyourowndetective.com/cgi-bin/axs/ax.pl?mode=img" height="1" width="1" style="display:none" alt="" /> </noscript>
    <p> </p>
    </body>

    It seems like your header as the div commented out.

    <!--
    
    <div id="page">
    	<div id="content" class="narrowcolumn">
    
    <div id="header">
    	<div id="headerimg">
    
    		<h1><a href="http://www.beyourowndetective.com/blog">Net Detective blog</a></h1>
    
    		<div class="description">Net Detective Blog</div>
    -->

    just take the div page and place it after that code like this:

    <!--
    	<div id="content" class="narrowcolumn">
    
    <div id="header">
    	<div id="headerimg">
    
    		<h1><a href="http://www.beyourowndetective.com/blog">Net Detective blog</a></h1>
    
    		<div class="description">Net Detective Blog</div>
    -->
    <div id="page">

    Don’t forget to close the div in the footer too.
    Should do the trick. check header.php
    cheers

    cassandraellen
    Member

    @cassandraellen

    @ blackbookdesign: I am using the downloaded theme, Atahualpa. I am new to CSS and afraid to start deleting (or “cleaning up”) the files.

    Where do I place the code to center the page, style.css?

    It doesn’t seem to be working.

    blackbookdesign
    Member

    @blackbookdesign

    yeah somehow your header is commented out so the header that exist on your whole site can subsist.What you need to do in place a <div id=”page”> after the commenting> just like the post up there. then put a </div> after the footer’s last </div>

    then in style.css put this
    #page { margin: 0 auto;}

    or keep that old coding
    and just add the style. So it will give you:

    #page {
    background-color:white;
    border:1px solid #959596;
    margin:0 auto;
    padding:0;
    width:760px;
    }

    cheers

    Netdetective
    Member

    @netdetective

    I un-commented that code and it worked, but now my blog has a new problem. Everything is in the center of the page with super wide left and right margins. I just need to reduce the margins so that my content fills most of the browser page evenly with normal margins.

    I’ve been away from this php stuff for too long.
    Thanks!
    Fred

    cassandraellen
    Member

    @cassandraellen

    Does the header name/link affect the page being centered? Is that required information? Because I don’t necessarily want it to appear…

    The margins (or lack thereof) do not seem to affect the actual page layout.

    cassandraellen
    Member

    @cassandraellen

    Oh!

    And now it’s working!

    Thanks!

    Hi guys,

    I have been having the same problem with my header as well, i tried many methods including copy-ing and pasting a new header from another template. Pls help…

    http://www.flore-girl.blogspot.com

    Thx

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Move entire blog from left of page to the centre.’ is closed to new replies.