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

Home Forums CSS [Solved] Help the Newbie

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #30546
    Participant is the website is the css stylesheet

    *if you notice it looks similar to some of the elements Chris used in a combination of his 3 PSD – css , how to make a website from scratch videos.


    I’ve been watching / studying / trying to replicate Chris’ videos with my own work (super basic), but I never seem to get it right. I literally have one video playing on one monitor, and code on the other, following everything step by step, but I can’t seem to get my site to work / display properly.

    For a while..on my mac book pro resolution, my little webpage displayed fine, but on everyone else’s screens, it was unaligned and displaying differently. I’m aware of the screen resolution differences..some people may be using 1024×768 etc. etc.

    Sooooo.. last night I was up studying the videos some more, having my gf refresh the page every time I tweaked something, then finally on her screen (high res macbook pro) it finally looked fine in Safari and Fire Fox. Fast forward to this morning, I was excited to tell one of my friends I fixed it. She tried it on her work computer and it totally took the wind out of my sails. “it’s not really centered and the right side is cut-off”.

    So here I am, after hours of trying to fix the most basic site, I am finally raising the white flag.

    I’m totally new to this, so anything and everything will help.

    Thanks in advance,



    So…. what is your question again?

    If its about the centering, it’s centered to me.

    Chris Coyier

    Open your CSS file, delete the whole code, Copy and Paste this code into the file.
    Then ask your friend, the one who said it was cut off to see if this works for her now.

    *     { margin: 0; padding: 0; }

    body {
    color: black;
    font: 14px Georgia, serif;
    background: url(images/header-bg.jpg) repeat-x top;
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;

    a { text-decoration: none;}
    a img {border: 0;}

    ul#nav {
    height: 88px;
    width: 410px;
    margin: 0 auto;
    background: url(images/logo.png) no-repeat;

    #page-wrap {
    width: 900px;
    overflow: hidden;
    margin:0 auto;
    padding: 0;

    #main-content {
    float: left;
    background: #CCC;
    padding: 15px;
    width: 672px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    margin: 0 auto;

    #main-nav { list-style: none; margin: 0 0 50px 0;}
    #main-nav li { font:20px Georgia; }
    #main-nav li a { color: red; display: block; padding: 3px 0 3px 0;}
    #main-nav li a:hover {color: black;}


    h2 { text-transform: uppercase; font: 17px Georgria, serif; letter-spacing: 4px; margin: 0 0 10px 0; text-align: center;}

    #sidebar { color: red; float:right; width: 170px; font: 20px Times New Roman; margin: 16px auto;}
    #sidebar h5 { text-transform: uppercase; font: 12px Georgria, serif; letter-spacing: 1px; margin: 0 0 10px 0; text-align: left;}
    #sidebar h3 { text-transform: uppercase; font: 14px Georgria, serif; letter-spacing: 1px; margin: 0 0 10px 0; text-align: center;}
    #sidebar h4 { text-transform: uppercase; font: 16px Georgria, serif; letter-spacing: 4px; margin: 0 0 10px 0; border-top: 1px solid black; border-bottom: 1px solid black; }

    Bob – Sorry yeah I realized I didn’t really ask a question. I guess it was how to fit it all on one window so the navi + blog part wasn’t cut off.

    CWDesign – Thanks CW! Much appreciated. She said it’s centered now.

    Srsly. Thanks a ton :]

    Chris Coyier

    You’re Welcome. The problem was your margin and padding in the div wrap


    One more thing – in the last 3 lines of your CSS code, you have misspelled a font. It should be Georgia, whereas you have typed Georgria


    ahah bob we should be getting paid for this!

    Chris Coyier


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