SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Siblings selector - first element?

    I have something like this:
    Code HTML4Strict:
    <div class="pagination"></div>
    <div class="table"></div>
    <div class="pagination">

    Code CSS:
    .pagination { margin:5px 0; }
    .table { margin:10px 0; }

    This results in "too much" spacing around the table when using a pagination element too, but makes sense in all other cases.

    So, I've done this:
    Code CSS:
    .pagination + .table { margin-top:0; }

    That works lovely - but I can't do it for the bottom of the table since I don't think there is a way to style the FIRST element in the sibling selector.

    Any ideas?
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    .table+.pagination {margin-top:-5px}
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick question:

    Top is 5 + 10px but I am taking away 10px on table, so its 5.

    If I do -5 AFTER the table, shouldn't it be 10px margin? Even though yes, it appears to be exactly the same when I implement your -5px....
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Collapsing margins.

    You have a 10px bottom margin on .table and when you set a -5px top margin on the following .pagination you get 10px + (-5px) = 5px.

    For the top margin you have a 5px bottom margin collapsing with a zero top margin, which yields a 5px result.

    Without any special rules you have one 10px margin collapsing with one 5px margin, and the result is 10px.

    Paul has written an excellent treaty on collapsing margins in the SitePoint CSS Reference. It's a tricky concept to grasp at first, but once you 'get' it, it's fairly logical.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the clarification
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •