Grow your CSS skills. Land your dream job.

CSS : space between h2 and ul

  • # December 4, 2012 at 7:07 am

    Hello everyone this is my first discussion here, so sorry for the mistakes I’ll do.
    Here is the problem: I need to add space between an h2 and a ul element so i tried different things but it only works fine if I add margin-top and margin-bottom to the li elements. The problem is that I can’t use these rules because of some RWD reasons.
    I really don’t understand why it doesn’t work if I write margin-top and margin-bottom to the ul and not to the li.
    So here is the code, and thanks for helping! :D

    .container>h2{
    width: 72.916667%;/* 700px/960px */
    margin: 0 auto;
    text-align: center;
    background: url(../img/orizz.png) repeat-x;
    background-position: center center;
    clear: both;
    }

    .container>h2>span{
    font-size: 1.875em; /* 30px/16px */
    padding: 1px 15px;
    line-height: 1.3;
    }

    .img_showcase{
    clear: both;
    }

    .img_showcase li{
    float: left;
    width: 24.6875%;
    margin-bottom: 50px;
    margin-top: 50px;
    margin-left: 0.155%;
    margin-right: 0.155%;
    }

    # December 4, 2012 at 7:19 am

    Have you kind of got a picture so we can see what you’re trying to achieve, I am trying to clean up your code a little in a CodePen but it’s proving to be hard…

    # December 4, 2012 at 7:36 am

    Here is the page with the effect achieved thanks to margin-top and margin-bottom on the li elements http://www.andreasorrentino.eu/new/work.html
    hope this help… =)
    thanks!

    # December 4, 2012 at 7:37 am

    I have cleaned up your code a little and added a little of my own, here take a look;

    http://codepen.io/Watson90/full/IwACk

    Makes these changes in your CSS;

    .img_showcase {
    overflow: hidden;
    }
    Let me know if this is kinda what you’re after?

    # December 4, 2012 at 7:45 am

    Because the first ul contains only floated items it is taken out of the flow the margin of the h2 has nothing to push against to force it down.

    You could try inline-block instead. http://codepen.io/joe/pen/diLKG

    # December 4, 2012 at 8:23 am

    thanks so much guys! both solution worked really good! I used the overflow: hidden;
    thanks again!

    # December 4, 2012 at 8:50 am

    Just regarding overflow: hidden; – I’d recommend against using this all the time for clearing floats as it will cut off box shadows and any elements that are positioned to overlap the container.

    Instead have a look at the micro clearfix from Nicolas Gallagher as it’s much safer and all you need to do is add a class of cf to your elements.

    # December 4, 2012 at 9:29 am

    Yep, agreed!

    # December 4, 2012 at 9:31 am

    thanks for the advice andy I’ll keep in mind.. =)

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

You must be logged in to reply to this topic.

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