Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Mixed horizontal an vertical css with

Mixed horizontal an vertical css with <menu><li>

Problem

I'm trying to creat a menu with mixed vertical an horizontal items. That's how the menu should look like:

item 1    item 3    item 5    item 7
item 2    item 4    item 6    item 8

What i tried ist the following HTML:

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 7
  • item 8
  • And CSS:

    .navigation menu {
        float: right;
        margin-top:103px;
        width:683px;    
    }
    .navigation menu li {
        display:block;
        width: 115px;
        float: none;
        background-image:none;
        text-align:right;
    }
    .navigation menu li:nth-child(3) {
        float: left;
    }
    .navigation menu li:nth-child(4) {
        float: none;
    }
    .navigation menu li:nth-child(5) {
        float: left;
    }
    .navigation menu li:nth-child(6) {
        float: none;
    }
    

    But it doesn't work, i think, it's too much for CSS :)

    Anybody got an idea? Thanks in advance for any help!

    Greetings Est Ro

    Problem courtesy of: user3532637

    Solution

    Keep the odd elements floating left.

    Make the even elements have no width (margin-right: -115px) and position them 155 px to the left and the apropiate distance to the bottom:

    CSS

    .menu {
        float: left;
        margin-top:13px;
        width:683px;    
    }
    .menu li {
        display:block;
        width: 115px;
        float: left;
        background-image:none;
        text-align:right;
    }
    
    .menu li:nth-child(even) {
        position: relative;
        top: 1.2em;
        left: -115px;
        margin-right: -115px;
    }
    

    fiddle

    Solution courtesy of: vals

    Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Mixed horizontal an vertical css with

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×