sideways ordered list ??

Discussion in 'CSS' started by FunkyFresh, Mar 14, 2008.

0
  1. #1
    I am trying to code something exactly like this http://img147.imageshack.us/img147/948/csshelpys9.jpg
    Basically I was wondering if there is such a thing as an ordered list that would go sideways. That way I wont have to use images for each nav bar heading, and it would be more organized also

    thank you
     
    FunkyFresh, Mar 14, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The easy way:
    ol {
    margin: 0;
    padding: 0;
    width: 100%;
    height: whatever;
    text-align: center;
    }
    ol li {
    display: inline;
    padding: 0 10px;
    }

    The better way (stops whitespace bugs in IE and lets you better control the clickable area):
    ol {
    margin: 0;
    padding:0;
    width: 100%;
    overflow: hidden; /*to wrap floats but you might not want this*/
    }
    ol li {
    display: inline; /*this is only done for IE7 apparently*/
    }
    ol a {
    float: left;
    height: whatever you want;
    line-height: the same as height;
    width: either set a width OR set side padding instead, depending on what you want
    text-align: center;
    }

    So, yeah. Floating can have it's problems though.
     
    Stomme poes, Mar 14, 2008 IP