The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Video tutorial help

  • # December 21, 2009 at 1:55 pm


    I’ve really enjoyed the video tutorial, for a beginner like me it’s brilliant!

    I’ve followed the guide and my xhtml/css conversion is 99% good the only problem I’m having is the background after the header
    is staggered. I used dreamweaver as my text editor and in design mode the header and bg are fine (but the links are staggered) when displaying in a broswer everything is fine apart from the staggered header BG.

    Could you give me any tips to fix it?

    I’ve included a screenshot, thanks a lot!


    # December 21, 2009 at 1:59 pm

    could you send a link to the website so we can look at the code

    # December 22, 2009 at 5:31 am

    Hi, here it is:



    # December 22, 2009 at 6:55 am

    In your style.css on line 47.

    Add following code to your ul#nav :

    position : relative ;
    top: -10px;

    # December 22, 2009 at 7:49 am

    Thanks uloga! now it’s working great :D

    If you don’t mind could you explain a little why it wasn’t working correcty and how you fixed it?

    *total newb* lol



    # December 22, 2009 at 11:42 am

    Just, FYI:

    That spacing is being created by the margin in this css:

    p, li {

    Doesn’t really make any sense, but I’d add:

    #nav li {

    Then you can remove the -10px hack.

    # December 22, 2009 at 12:11 pm


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed