Posted 3 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.
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;
}
Posted 3 years ago #
Brilliant, thanks mercime.
Posted 3 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
Posted 3 years ago #
Please? Anyone?
Posted 3 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
Posted 3 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
Posted 3 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;
}
Posted 3 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.
Posted 3 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
Posted 3 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.
Posted 3 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
Posted 3 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
Posted 3 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.
Posted 3 years ago #
Oh!
And now it's working!
Thanks!
Posted 3 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
Posted 3 years ago #
These forums are NOT for blogspot - this is WORDPRESS!
This topic has been closed to new replies.
