Grow your CSS skills. Land your dream job.

Help with header

  • # January 21, 2010 at 12:55 pm

    Hello Css-tricks forums :)

    I’ve for the first time begun to build my own website all from zero, but there wasen’t going long time before i saw my first problem.

    Link: http://klokkedal.dk/main.html

    As you see my logo is in the left site, but i would like if it could be in the center.

    I think the problem of the code should be found in these codes:

    Css:

    Code:
    #header {
    height: 100px; position: center; width: 700px; margin: 0 auto;
    padding: 0 0px 0 0px;
    }
    Code:
    #header-content h1#logo {
    position: absolute;
    font: bold 45px sans-serif;
    letter-spacing: -2px;
    Color: #fff;
    margin: 0; padding: 0;

    top: 0; left: 0;
    }

    Html:

    Code:

    I’ll hope you can help me :) And sorry for my bad english. I’m 16 years and come from Denmark

    Best Regards
    Clock

    # January 21, 2010 at 1:25 pm

    Things I did:

    Removed width from body
    Removed absolute position from h1 & h2
    Removed top & left elements from h1
    Added "text-align:center" to h1 & h2

    Code:
    /********************************************
    AUTHOR: Mikki Klokkedal S?rensen
    WEBSITE: http://www.klokkedal.dk
    TEMPLATE NAME: Unknown
    VERSION: 1.0
    LAST MODIFIED: 21/1-2010
    *******************************************/

    /* Generelt */

    body {
    margin: 0; padding: 0;
    font: normal 73%/1.5em Tahoma, sans-serif;
    color: #555;
    background: #FFF url(http://i302.photobucket.com/albums/nn87/Klokkedal/bg.jpg) repeat-x;
    text-align: left;
    }

    /* Links */

    a { background: inherit; color: #72A545; text-decoration: none; }
    a:hover { background: inherit; color: #006699; text-decoration: underline; }

    /*********************************
    LAYOUT
    *********************************/
    #header-content, #content, #footer-content {
    width: 760px;
    }

    /* Header */

    #header {
    height: 100px; position: center; width: 700px; margin: 0 auto;
    padding: 0;
    }

    #header-content {
    margin: 0; padding: 0;
    position: relative;
    }

    #header-content h1#logo {
    font: bold 45px sans-serif;
    letter-spacing: -2px;
    Color: #fff;
    text-align:center;
    margin: 0; padding: 0;
    }

    #header-content h1#logo a {
    text-decoration: none;
    color: #FFF;
    }

    #header-content #slogan {
    font: bold italic 16px Sans-serif;
    text-transform: none;
    color: #FFF;
    margin: 0; padding: 0;
    text-align:center;
    }

    # January 21, 2010 at 1:32 pm

    Thanks for the help and the fast reply TheDoc :)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".