| |||||||
| Blogging Basics Come here to learn the basics of blogging. |
Learn how to set up a blog, start blogging, produce quality content and use these forums as your internet marketing courses.
![]() |
| | LinkBack | Thread Tools | Display Modes |
|
#1
| |||
| |||
|
Hi Guys I'm new to Blogger and could do with some help on something that is really frustrating me! I am trying to get my blog to be centered in the middle of the screen / browser. I want it to be centered horizontally so that there is white space on the left and on the right. On my screen (1440 x 900) it looks perfect using and internet explorer however it is aligned to the left on mozilla - argh! Likewise, on some friends laptops it looks fine, but on screens that are more "square" it aligns to the left again. I have traulled the web but having no luck. Thought someone on here MUST be able to help! Thank you in advance Here is part of the code (please let me know if you need any of the rest): body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; } /* Header ----------------------------------------------- */ #header-wrapper { width:900px; margin:0 auto 0px; border: } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { margin: 0px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:0px 0px 0; padding:0px 0px; line-height:1.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 0px 0px; padding:0 0px 0px; max-width:900px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-$startSide: auto; margin-$endSide: 600px; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 900px; margin-right: 0px; margin-left: 0px; margin-top: 0px; margin-bottom: 0px; padding:0px; text-align:$startSide; font: $bodyfont; overflow:auto; overflow-x:hidden; } #main-wrapper { width: 620px; padding: 20px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 220px; padding: 10px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } /* Headings ----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; } /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em; } .post { margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:0px; height:270px; overflow:auto; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:$titlecolor; font-weight:normal; } .post h3 strong, .post h3 a:hover { color:$textcolor; } .post-body { margin:0 0 .75em; line-height:1.6em; } .post-body blockquote { line-height:1.3em; } .post-footer { margin:0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height:0; } .comment-link { margin-$startSide:.6em; } .post img { padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } |
Don't Like Ads?? Register as a Member and These Ads Will Disappear!
|
#2
| ||||
| ||||
|
This is how you do it: Located the code that says: Code: #outer-wrapper {
width: 900px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding:0px;
text-align:$startSide;
font: $bodyfont;
overflow:auto;
overflow-x:hidden;
}
Code: #outer-wrapper {
width: 900px;
margin: 0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
overflow:auto;
overflow-x:hidden;
}
Let me know if you have any trouble.
__________________ + Experiment Garden is my current blog for experiments and my project portfolio. + My first blog was Inkweaver Review. Now I work on Bookflavor + You should try out Duck Duck Go |
|
#4
| ||||
| ||||
|
Robin - I'm not very good at coding but you can learn sorta by doing somewhat simple little tweaks here and there in the codes that exist. Truth be told, I'm envious of those who can code really well or even at all!
__________________ Web's best deal on blog hosting - 25% Off + we pay you $20US, why not!? Stop Having a Boring Life Travel Blog |
![]() |
| Bookmarks |
| Tags |
| align , center , centering |
| Thread Tools | |
| Display Modes | |
| |