Forums

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

Home › Forums › CSS › Help centering blog

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • Author
    Posts
  • August 26, 2011 at 10:48 am #34097
    janethread
    Member

    Hi All,

    I was wondering if anyone out there can help me center the content of my blog. The background and header are in the right spot. It’s just the body of the content that is aligned to the left. Can anyone help me? The website is http://www.janethread.com
    Here is the code:

    Any help I could get would be greatly appreciated. Thank you!

    *|* {
    
margin: 0;
    
padding: 0;
    
}
    
body {
    
background-image:url('background 9.png');
    
background-position: center top;
    
background-attachment: fixed;
    
background-repeat: no-repeat;
    
margin: 0pt auto;
    
padding: 0px;
    
min height: 100%;
    
min width: 1183pix;
    

    
}
    
p {
    
line-height:1.5;
    
}
    
h1, h2, h3{
    
line-height:1.5;
    
}
    
#wrapper {
    
width:1183px;
    
margin:0pt auto;
    
}
    
#contents {
    
width:1183px;
    
margin:0pt auto;
    
}
    
*html #contents {
    
width:1183px;
    
}
    
#header {
    
background-image:url('new logo 6.png');
    
float: center center;
    
width:1183px;
    
height:330px;
    
text-align:center;
    
margin:0pt auto;
    
}
    
#sitename {
    
position:relative;
    
float:left;
    
padding-top:25px;
    
font-family:"times new roman",garamond, serif;
    
color:#333333;
    
font-size:2.5em;
    
text-align:center;
    
}
    
#navigation {
    
float:left;
    
background: transparent url(nav_background.jpg) no-repeat center top;
    
float:center;
    
width:960px;
    
height:40px;
    
margin:0 auto;
    
font-family:"lucida sans", arial, sans-serif;
    
font-size:1em;
    
}
    
#navigation ul {
    
float:left;
    
padding-left:20px;
    
padding-top:12px;
    
margin-left:0px;
    
width:940px;
    
height:28px;
    
}
    
*html #navigation ul {
    
margin-left:-12px;
    
}
    
#navigation li {
    
float:left;
    
display:inline;
    
font-size:1em;
    
padding:12px 20px 13px 20px;
    
margin-top:-12px;
    
height:15px;
    
}
    
*html #navigation li {
    
margin-right:4px;
    
}
    
#active {
    
float:center;
    
background: transparent url(activetab_background.jpg) no-repeat center top;
    
color:#fff;
    
text-align:center;
    
}
    
#navigation a:link  {
    
color:#fff;
    
text-decoration:none;
    
}
    
#navigation a:hover  {
    
color:#fff;
    
text-decoration:none;
    
}
    
#navigation a:visited  {
    
color:#fff;
    
text-decoration:none;
    
}
    
#active a:link  {
    
color:#fff;
    
text-decoration:none;
    
}
    
#active a:hover {
    
color:#fff;
    
text-decoration:none;
    
}
    
#active a:visited {
    
color:#fff;
    
text-decoration:none;
    
}
    
a:link, a:hover, a:visited {
    
color:#198bef;
    
font-weight:normal;
    
text-decoration:underline;
    
}
    
#main {
    
clear:both;
    
width:920px;
    
min-height:400px;
    
height:auto !important;
    
height:400px;
    
padding:30px 20px 30px 20px;
    
}
    
img.image-left {
    
margin-right:15px;
    
float:left;
    
}
    
img.image-right {
    
margin-left:15px;
    
float:right;
    
}
    
#footer {
    
float:left;
    
width:960px;
    
border-top:1px solid #000000;
    
margin:0px 0 30px 0;
    
}
    
#footer-contents {
    
float:left;
    
color:#000000;
    
font-family:"lucida grande", "lucida sans", arial, sans-serif;
    
padding:15px 0 0 20px;
    
width:940px;
    
height:28px;
    
}
    
*html #footer-contents {
    
margin-top:-5px;
    
}
    
input {
    
background-color:#fff;
    
border:1px solid #999;
    
font-size:12px;
    
}
    
textarea {
    
background-color:#fff;
    
border:1px solid #999;
    
font-size:12px;
    
}
    August 26, 2011 at 12:54 pm #85768
    chrisburton
    Participant

    @janethread – What is this?

    *|*
    August 26, 2011 at 5:17 pm #85782
    janethread
    Member

    @christopherburton.
    I have no idea. I am brand new to css code. I’m learning as I go using weebly. Any ideas on how to center it?
    Thanks :)
    Jane

    August 26, 2011 at 5:23 pm #85783
    chrisburton
    Participant

    @janethread – I kind of like to know stuff like this. Such as where people learn to code layouts using tables, that’s why I asked.

    * {
    
margin: 0;
    
padding: 0;
    
}
    

    

    
body {
    
background-image:url('background 9.png');
    
background-position: center top;
    
background-attachment: fixed;
    
background-repeat: no-repeat;
    
margin: 0 auto;
    
padding: 0;
    
min height: 100%;
    
min width: 1183pix;
    
}
    

    

    
p {
    
line-height:1.5;
    
}
    

    

    
h1, h2, h3{
    
line-height:1.5;
    
}
    

    

    
#wrapper {
    
width:1183px;
    
margin:0 auto;
    
}
    

    

    
#contents {
    
width:1183px;
    
margin:0 auto;
    
}
    

    

    
#contents {
    
width:1183px;
    
}
    

    

    
#header {
    
background-image:url('new logo 6.png');
    
float: center center;
    
width:1183px;
    
height:330px;
    
text-align:center;
    
margin:0 auto;
    
}
    

    

    
#sitename {
    
position:relative;
    
float:left;
    
padding-top:25px;
    
font-family:"times new roman",garamond, serif;
    
color:#333333;
    
font-size:2.5em;
    
text-align:center;
    
}
    

    

    
#navigation {
    
float:left;
    
background: transparent url(nav_background.jpg) no-repeat center top;
    
float:center;
    
width:960px;
    
height:40px;
    
margin:0 auto;
    
font-family:"lucida sans", arial, sans-serif;
    
font-size:1em;
    
}
    

    

    
#navigation ul {
    
float:left;
    
padding-left:20px;
    
padding-top:12px;
    
margin-left:0px;
    
width:940px;
    
height:28px;
    
}
    

    

    
#navigation ul {
    
margin-left:-12px;
    
}
    

    

    
#navigation li {
    
float:left;
    
display:inline;
    
font-size:1em;
    
padding:12px 20px 13px 20px;
    
margin-top:-12px;
    
height:15px;
    
}
    

    

    
#navigation li {
    
margin-right:4px;
    
}
    

    

    
#active {
    
float:center;
    
background: transparent url(activetab_background.jpg) no-repeat center top;
    
color:#fff;
    
text-align:center;
    
}
    

    

    
#navigation a:link  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    

    
#navigation a:hover  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    

    
#navigation a:visited  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    

    
#active a:link  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    

    
#active a:hover {
    
color:#fff;
    
text-decoration:none;
    
}
    

    

    
#active a:visited {
    
color:#fff;
    
text-decoration:none;
    
}
    

    

    
a:link, a:hover, a:visited {
    
color:#198bef;
    
font-weight:normal;
    
text-decoration:underline;
    
}
    

    

    
#main {
    
clear:both;
    
width:920px;
    
min-height:400px;
    
height:auto !important;
    
height:400px;
    
padding:30px 20px 30px 20px;
    
}
    

    

    
img.image-left {
    
margin-right:15px;
    
float:left;
    
}
    

    

    
img.image-right {
    
margin-left:15px;
    
float:right;
    
}
    

    

    
#footer {
    
float:left;
    
width:960px;
    
border-top:1px solid #000000;
    
margin:0px 0 30px 0;
    
}
    

    

    
#footer-contents {
    
float:left;
    
color:#000000;
    
font-family:"lucida grande", "lucida sans", arial, sans-serif;
    
padding:15px 0 0 20px;
    
width:940px;
    
height:28px;
    
}
    

    

    
#footer-contents {
    
margin-top:-5px;
    
}
    

    

    
input {
    
background-color:#fff;
    
border:1px solid #999;
    
font-size:12px;
    
}
    

    

    
textarea {
    
background-color:#fff;
    
border:1px solid #999;
    
font-size:12px;
    
}
    August 26, 2011 at 8:03 pm #85787
    janethread
    Member

    @christopherburton The templates for weebly come with code already. I have altered it to change my background and things like that.
    Any idea how to center it?

    August 26, 2011 at 8:06 pm #85788
    chrisburton
    Participant

    @janethread – I’m not familiar with weebly. I imagine you can alter the CSS, correct?

    August 26, 2011 at 10:02 pm #85793
    janethread
    Member

    Yeah, I can alter the CSS, but I’m not sure what I need to do to center the content.

    August 26, 2011 at 10:32 pm #85795
    chrisburton
    Participant

    @janethread – copy/paste the code above that I have made changes to.

    August 26, 2011 at 10:40 pm #85798
    janethread
    Member

    @christopherburton
    Thanks for helping me. I copied and pasted, but it’s still off center…

    August 26, 2011 at 10:42 pm #85799
    chrisburton
    Participant

    @janethread – do you have a link to your website?

    August 26, 2011 at 10:44 pm #85800
    janethread
    Member

    http://www.janethread.com

    thanks!!

    August 26, 2011 at 10:52 pm #85803
    chrisburton
    Participant

    @janethread – What exactly would you like to be centered? Your menu is to the right so it can’t be in the middle unless you place that somewhere else.

    Edit: Nevermind, I see the issue. Fixing now and I’ll comment again in a minute or two

    August 26, 2011 at 10:55 pm #85804
    janethread
    Member

    I want the posts on the left to begin at the transparency. And the menu should be on the right, also within the transparency.
    Does that make sense?
    THANK YOU!

    August 26, 2011 at 10:56 pm #85805
    chrisburton
    Participant

    @janethread – Try this

    * {
    
margin: 0;
    
padding: 0;
    
}
    

    
body {
    
background-image:url('background 9.png');
    
background-position: center top;
    
background-attachment: fixed;
    
background-repeat: no-repeat;
    
margin: 0 auto;
    
padding: 0;
    
min height: 100%;
    
min width: 1183pix;
    
}
    

    
p {
    
line-height:1.5;
    
}
    

    
h1, h2, h3{
    
line-height:1.5;
    
}
    

    
#wrapper {
    
width:1183px;
    
margin:0 auto;
    
}
    

    
#contents {
    
width:1183px;
    
margin:0 auto;
    
}
    

    
#contents {
    
width:1183px;
    
}
    

    
#header {
    
background-image:url('new logo 6.png');
    
float: center center;
    
width:1183px;
    
height:330px;
    
text-align:center;
    
margin:0 auto;
    
}
    

    
#sitename {
    
position:relative;
    
float:left;
    
padding-top:25px;
    
font-family:"times new roman",garamond, serif;
    
color:#333333;
    
font-size:2.5em;
    
text-align:center;
    
}
    

    
#navigation {
    
float:left;
    
background: transparent url(nav_background.jpg) no-repeat center top;
    
float:center;
    
width:960px;
    
height:40px;
    
margin:0 auto;
    
font-family:"lucida sans", arial, sans-serif;
    
font-size:1em;
    
}
    

    
#navigation ul {
    
float:left;
    
padding-left:20px;
    
padding-top:12px;
    
margin-left:0px;
    
width:940px;
    
height:28px;
    
}
    

    
#navigation ul {
    
margin-left:-12px;
    
}
    

    
#navigation li {
    
float:left;
    
display:inline;
    
font-size:1em;
    
padding:12px 20px 13px 20px;
    
margin-top:-12px;
    
height:15px;
    
}
    

    
#navigation li {
    
margin-right:4px;
    
}
    

    
#active {
    
float:center;
    
background: transparent url(activetab_background.jpg) no-repeat center top;
    
color:#fff;
    
text-align:center;
    
}
    

    
#navigation a:link  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    
#navigation a:hover  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    
#navigation a:visited  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    
#active a:link  {
    
color:#fff;
    
text-decoration:none;
    
}
    

    
#active a:hover {
    
color:#fff;
    
text-decoration:none;
    
}
    

    
#active a:visited {
    
color:#fff;
    
text-decoration:none;
    
}
    

    
a:link, a:hover, a:visited {
    
color:#198bef;
    
font-weight:normal;
    
text-decoration:underline;
    
}
    

    
#main {
    
clear:both;
    
width:920px;
    
min-height:400px;
    
height:auto !important;
    
height:400px;
    
margin: 0 auto;
    
padding:30px 20px 30px 20px;
    
}
    

    
img.image-left {
    
margin-right:15px;
    
float:left;
    
}
    

    
img.image-right {
    
margin-left:15px;
    
float:right;
    
}
    

    
#footer {
    
float:left;
    
width:960px;
    
border-top:1px solid #000000;
    
margin:0px 0 30px 0;
    
}
    

    
#footer-contents {
    
float:left;
    
color:#000000;
    
font-family:"lucida grande", "lucida sans", arial, sans-serif;
    
padding:15px 0 0 20px;
    
width:940px;
    
height:28px;
    
}
    

    
#footer-contents {
    
margin-top:-5px;
    
}
    

    
input {
    
background-color:#fff;
    
border:1px solid #999;
    
font-size:12px;
    
}
    

    
textarea {
    
background-color:#fff;
    
border:1px solid #999;
    
font-size:12px;
    
}
    August 26, 2011 at 10:59 pm #85807
    janethread
    Member

    @christopherburton
    you did it!!! It worked. thank you so much!!
    what did you do to fix it?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 17 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.