WordPress.org

Ready to get started?Download WordPress

Forums

Move entire blog from left of page to the centre. (17 posts)

  1. hullabamoo
    Member
    Posted 5 years ago #

    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.

  2. @mercime
    Volunteer Moderator
    Posted 5 years ago #

    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;
    }
  3. hullabamoo
    Member
    Posted 5 years ago #

    Brilliant, thanks mercime.

  4. cassandraellen
    Member
    Posted 5 years ago #

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

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

  5. cassandraellen
    Member
    Posted 5 years ago #

    Please? Anyone?

  6. blackbookdesign
    Member
    Posted 5 years ago #

    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

  7. Netdetective
    Member
    Posted 5 years ago #

    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

  8. blackbookdesign
    Member
    Posted 5 years ago #

    @ 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;
    }
  9. Netdetective
    Member
    Posted 5 years ago #

    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.

  10. blackbookdesign
    Member
    Posted 5 years ago #

    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

  11. cassandraellen
    Member
    Posted 5 years ago #

    @ 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.

  12. blackbookdesign
    Member
    Posted 5 years ago #

    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

  13. Netdetective
    Member
    Posted 5 years ago #

    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

  14. cassandraellen
    Member
    Posted 5 years ago #

    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.

  15. cassandraellen
    Member
    Posted 5 years ago #

    Oh!

    And now it's working!

    Thanks!

  16. florey
    Member
    Posted 5 years ago #

    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

  17. kennethwatt
    Member
    Posted 5 years ago #

    These forums are NOT for blogspot - this is WORDPRESS!

Topic Closed

This topic has been closed to new replies.

About this Topic