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

How to add some space between LI ?

  • # July 14, 2013 at 9:26 pm

    Please take a look at the following page,

    I’m now having trouble with adding extra space between the header image and menu items. The header image is defined by the last attribute of the following code,
    #header{ min-height:150px; border-radius: 25px 25px 0 0 ; background-color:linear-gradient(#BCD3FF, #EEF8FA);background: url(‘../images/header.logo.png’) no-repeat;} (see the CSS file link below).

    And the CSS elements header and for UL and LI etc. can be found from the following URL,

    Many thanks.

    # July 14, 2013 at 9:33 pm

    Increase left margin on your #header ul

    # July 14, 2013 at 9:34 pm

    I’m not sure if there’s a better/more efficient solution out there (maybe someone else will comment it here), but here’s how I fixed it. I simply added more `margin-left` to the `ul`. I changed it from

    #header ul {
    margin: 2px 0 0 90px;
    padding: 0;
    height: 40px;


    #header ul {
    margin: 2px 0 0 144px;
    padding: 0;
    height: 40px;

    @jurotek beat me by a minute! :P

    # July 14, 2013 at 9:41 pm

    :) Unintended tho, I guess I had lot less to write

    # July 14, 2013 at 9:44 pm

    @jurotek No worries. :)

    # July 14, 2013 at 9:46 pm

    There’s more ways then one to remedy this problem besides increasing left margin. Here’s one of top of my head

    .nav { text-align: center; }
    .nav ul, .nav li, .nav a { display: inline-block; *display: inline; zoom: 1; }

    # July 14, 2013 at 9:49 pm

    srig99, jurotek, you folks are awesome. I greatly appreciate it.

    now, how do we add back the AddThis social media links to right of header image and right below Home button. The AddThis thing can be found from url,

    Currently, the index4.html uses id of wrapper for it, maybe that’s the problem, what if I change this id? id=”wrapper”

    Many thanks.

    P.S. This forum rocks. One minor thing if the owner would indulge me… initially I did not notice the [edit] button…

    # July 14, 2013 at 9:56 pm

    Without looking at the code, looks like you could give width to social media wraper just enough to contain it. Add position relative to header and place social media wraper absolutely in header and give it left and top dims. to clear logo.

    # July 14, 2013 at 10:07 pm

    @jurotek, thank you. I changed id for the AddThis and added width:40px, they showed up inside the header image, and when I added, float:right. This div becomes invisible. How come?
    many thanks.

    # July 14, 2013 at 10:10 pm

    I would do it with position absolute rigth:Xpx; top:Xpx; Just make sure your header is positioned relative

    # July 14, 2013 at 10:19 pm


    does make the AddThis show up, but jumbo on the left. I don’t see absolute in the css file, so, i takes that all other code is relative.
    Would you mind taking a closer look at this guy?

    Many thanks.

    # July 14, 2013 at 10:24 pm

    :) Add position absolute rigth:Xpx; top:Xpx; to your class AddThis and add position relative to header like

    border-radius: 25px 25px 0 0 ;
    background-color:linear-gradient(#BCD3FF, #EEF8FA);background: url(‘../images/header.logo.png’) no-repeat;

    Then place div class AddThis inside your header

    # July 14, 2013 at 10:32 pm

    my current class for AddThis is,

    and I added the attribute of position:relative; to the header class.

    And yet still to no avail. Or was my code of position:absolute; float:right; wrong?
    should I use
    position absolute right:600px; top:50px

    sorry, i’m no good at css, thanks.

    # July 14, 2013 at 10:44 pm

    I don’t see wrapper2 in you html, it’s actually #wrapper which holds social media buttons

    # July 14, 2013 at 10:45 pm

    yes, it’s there, please do keyword search.

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

You must be logged in to reply to this topic.