Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Numbered Menu with Sub-titles

Bottom of Page

1 to 4 of 4

  1.  
    • CommentAuthorNanimo
    • CommentTimeSep 9th 2009
     permalink
    I've had this problem that I haven't been able to find a satisfactory solution, so I thought I'd throw it open to CSS Beauty.

    I need to produce a menu page for a restaurant, the meals are numbered and they are separated with category titles.

    E.g.

    Starters
    1. Chicken Soup
    2. Onion Soup
    3. Salad

    Chicken Dishes
    4. Chicken curry
    5. Chicken pie
    6. Chicken, tomato and tarragon

    Seafood Dishes
    7. Pan seared salmon
    8. Chilli and garlic prawns
    9. Herb crusted sea bass

    So, the obvious solution is a <ol>, right?

    Except, how would you include a category title in the middle of every few <li>'s?

    Alternatively, you could do multiple <ol>'s interspersed with <h3> (or some other <hn>). However the numbering of the menus need to be continuous, so you'd need to offset the numbering on the <ol>s. I think that would be my best solution except I don't see a numbering offset method that will work on IE6.

    The other problem with this method is the fact that you will need to readjust the offset numbers on all the <ol>s each time you add/remove list items.

    So, any ideas?
  2.  permalink
    I gave it some thoughts and came up with something.
    Tested in ie6,ie7 and ff3.

    <style>
    ol li span{
    display:block;
    position:absolute;
    margin:-30px 0 0 0;
    padding:0 0 10px 0;
    font-weight:bold;
    }
    ol li strong {
    margin:-20px 0 0 0;
    font-weight:normal;
    }
    ol li.end {
    padding:0 0 50px 0;
    }
    </style><br />
    <br />
    <br />

    <ol>
    <li><span>Starters</span><strong>Chicken Soup</strong></li>
    <li>Onion Soup</li>
    <li class="end">Salad</li>

    <li><span>Chicken Dishes</span><strong>Chicken Soup</strong></li>
    <li>Chicken curry</li>
    <li>Chicken pie</li>
    <li>Chicken, tomato and tarragon</li>
    </ol>


    Cheers, DS
    • CommentAuthorNanimo
    • CommentTimeSep 23rd 2009
     permalink
    Thanks for your help. I must have had a mental block or something... the thought of placing the heading inside a <li> hadn't even crossed my mind.
  4.  permalink
    No problem.
    One head is good but two are better :)

    Cheers, DS

1 to 4 of 4

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page