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 19 total)
  • Author
    Posts
  • #33256
    janethread
    Member

    Hi All,
    I am brand new to CSS, and need some help with my new blog, that I’m creating using Weebly. I’ve been doing all of my work on a mac. When I view my page on the mac, it looks perfect; however, when I veiw it on a PC, it is totally off center–the background, header, text and navigation. I’ve looked at it on three different PCs, and it looks different on each one (all off center). I’m not sure what I’m doing wrong.
    Can anyone help? I’m pasting the CSS code below. I would be forever grateful if someone could help me figure out what’s what!
    Thanks in advance :)

    *|* {
    margin:auto;
    padding:auto;
    }
    body {
    background-image:url(‘background redo 19.jpg’);
    background-position: center-center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 0pt auto;
    padding: auto;
    min height: 100%;
    min width: 1183pix;
    max width: 1183pix;
    }
    p {
    line-height:1.5;
    }
    h1, h2, h3{
    line-height:1.5;
    }
    #wrapper {
    width:100%;
    margin:0pt auto;
    }
    #contents {
    width:80%;
    margin:0pt auto;
    }
    *html #contents {
    width:1183px;
    }
    #header {
    background-image:url(‘logo 100.png’);
    float:center-center;
    width:900px;
    height:289px;
    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;
    }

    #82306

    Do you have a link to the site?

    #82307
    janethread
    Member

    http://www.janethread.com
    Thanks so much, Abel!

    #82308
    janethread
    Member

    @fordinary I don’t know what that is. elaborate please? thx!

    #82313
    TheDoc
    Member

    A link to the website is perfect in this case.

    For starters, I would look into these 31 errors.

    To center your background you’ll need to change this:

    background-position: center-center;

    to this:

    background-position: center center;

    The dash in the middle is causing the positioning to fail.

    #82315
    chrisburton
    Participant

    What’s this?

    *|* {
    margin:auto;
    padding:auto;
    }
    #82316
    janethread
    Member

    @thedoc thank you so much! I took out the dash, but I can’t tell if it worked yet. The website always looks fine on my mac, so I need to look at it on a pc. 31 errors is a lot! Should I try to fix all of them? Will my website work if I don’t fix them?
    Thank you for being so helpful!

    #82317
    janethread
    Member

    @christopherburton–not really sure what it is :/
    is it wrong? what should be there instead?

    #82318
    TheDoc
    Member

    The website in most cases will work. Fixing the errors will give you a better understanding of how the code should look, what good practices are, etc.

    #82319
    chrisburton
    Participant
    * { margin: 0; padding: 0; }
    #82320
    janethread
    Member

    @thedoc Got it! I will try fixing them as best I can. Thanks again for your help.

    #82321
    janethread
    Member

    @christopherburton I fixed it. thanks for pointing that out!

    #82322
    deanpogni
    Member

    Hey, (first post!)

    Here are some changes I would make to your site.

    I noticed that the content isn’t centered to the background and scrolls at a different percentage than your content. change this:

    #wrapper {
    margin: 0 auto;
    width: 100%;
    }

    to

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

    also, this one is more a matter of preference but…

    in the body area, make this change:

     background-position: center center;

    change it to

     background-position: center top;

    this will lock your background to the top so you don’t have that white border on top. which is happening to me on my 24 inch monitor. You might want consider a bigger background or something that repeats.

    #82324
    janethread
    Member

    @deanpogni Thanks for the input! I changed the position to center top. But when I changed the margin to 900px, it went off center again–at least on my screen it did. But maybe it is correct at 900px, as there never appears to be an issue when I’m on a mac, only pc.

    #82323
    janethread
    Member

    Hey virtual,
    I mis-typed–I did in fact change the width, not margin, and that’s what caused it to be off center on my comp. I just had my sister send me a screen shot from her PC, and it was off center there too. The background is centered. Now it’s the header, body and navigation that are off.
    I think I will try to download one of the programs that you recommended–I don’t want to annoy my sis by making her send me screenshots every 10 min :)

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