Treehouse: Grow your CSS skills. Land your dream job.

Move the background to left?

  • # April 17, 2011 at 5:57 am

    im new in css and testing something.
    I will do that.

    I have now
    My header code:
    #header { background: #6a0202; width: 245px; height: 25px; float: left;
    color: #FFF; font-size:30px; padding: 10px }

    I will do
    Picture 2

    Can anyone help me? :)


    # April 18, 2011 at 10:14 am

    nobody can help ? :/

    # April 18, 2011 at 10:52 am

    I think you need to give more detail.

    Can you post your code? or a link to the site?

    # April 18, 2011 at 11:02 am
    #header {
    background: #6a0202;
    width: 245px;
    height: 25px;
    float: left;
    color: #FFF;
    font-size: 30px;
    padding: 10px;
    position: relative; /* < -- add this and the next line */
    left: -10px; /* < -- good practice to use the semi-colon on the last rule */
    # April 18, 2011 at 1:23 pm

    I think you can also give it a margin-left: -10px;

    # April 18, 2011 at 3:20 pm

    yes, that’s true ;)

    # April 18, 2011 at 5:17 pm

    ouuu thx for the help…
    so its now left but it is possible to make the fiel behind the other one?

    here is the test website..

    # April 18, 2011 at 10:33 pm

    In this case it would be better to use ylex1’s idea and switch from relative positioning to using a negative margin. You could then use a negative top margin on the main-bg div to bring it up over the header div

    #header { margin: 0 0 0 -20px; }
    #main-bg { margin: -20px 0 0 0; }

    Also, don’t fall into the trap of using divs for everything. Mark up the content as semantically as possible. The #header div should really be hx tags. And don’t forget to validate – nav is not a valid element under xhtml

    # April 19, 2011 at 4:42 am

    thx wlfcry911 :)
    now its valide too ^^

    now im not the best css coder to see how to use another tags as divs :/
    did you have sites to learn to use different tags for different situations


    # April 19, 2011 at 7:05 am

    Your simple layout seems a little more problematic than just using margins to try to fix everything. Floats cleared? Why all the negative margins?

    # April 19, 2011 at 7:18 am

    why problematic?
    why not negative margins? WC3 shows no problems :/

    can u show an idea how it is right? :/

    # April 19, 2011 at 7:24 am

    It may show validation however the markup is not correctly structured. To start off you need to rid the unnecessary div that I quickly saw after skimming the code and clear your floats.

    # April 19, 2011 at 7:33 am

    hmm u mean with unnecassary div´s like

    div id=”main-trenner”

    #main-trenner { background: #000; width: 730px; height: 15px }

    to make the black a black area to show a separation between the slider an the content?
    i dont know how to part it in another way?! :/

    can u help me? :)

    # April 19, 2011 at 8:14 am

    Copy/Paste this. Even though I don’t agree with my code and starting from scratch may be the appropriate action.

    *			{ margin: 0; padding: 0; }
    body { font-family: Georgia, serif; color: #FFF;
    background: #FFF }

    #page-wrap { width: 800px; margin: 0 auto; padding: 0; }

    #header { background: #6a0202; width: 275px; height: 20px; float: left;
    color: #FFF; line-height: 40px; font-size:30px; margin: 0 auto;
    padding: 20px; text-align: center; }

    nav a {width: 100px;}

    a.cta { width: 100px; color:#000; height:45px; float: left;
    line-height:60px; text-decoration:none; font-size:20px; font-weight:bold;
    text-align:center; }

    a:hover.button { color:#6a0202; }

    nav img { border: none; margin: 0 auto; }
    nav a:hover img { margin-top: -45px; }

    #main-bg { background: #000; width: 750px; margin: 0 auto; padding: 10px; clear: both; }
    #main-slider { background: #6a0202; width: 730px; padding: 10px; }
    #main-trenner { background: #000; width: 730px; height: 10px; }
    #main-content { background: #6a0202; width: 730px; padding: 10px; }
    #main-footer { width: 700px; color: #000; text-align: right; }

    p { line-height: 20px; margin: 0 auto;}
    # April 19, 2011 at 8:35 am

    ohh thx for your time to help :)
    i have.. now its look like

    the header must behind the contentslider

Viewing 15 posts - 1 through 15 (of 30 total)

You must be logged in to reply to this topic.