Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS : space between h2 and ul

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #41151
    sorrentandrea
    Participant

    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%;
    }

    #116124
    Watson90
    Member

    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…

    #116271
    sorrentandrea
    Participant

    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!

    #116272
    Watson90
    Member

    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?

    #116273
    Paulie_D
    Member

    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

    #116275
    sorrentandrea
    Participant

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

    #116278
    Watson90
    Member

    Yep, agreed!

    #116279
    sorrentandrea
    Participant

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.