Grow your CSS skills. Land your dream job.

Question on Nested Unordered List

  • # July 12, 2008 at 3:17 pm

    I am trying to figure out the best way to display products on a web page in the DIV designated for the main content. Since I am avoiding using a table, I have come up with the idea of using what programmers refer to as an array of lists. This is because, there are multiple parts to the product area of the page and the products being broken into multiple sections. What I have envisioned as:

    – Individual sections dividing products types
    – Each section will consist of 1 or more "rows"
    – Each row will consist of approx 4 individual products
    – Each product will consist of an image and a product description

    *I have include the HTML in case you want to skip the following written description of what I did with the code.
    *My question is if there is any problem with this method, and any recommendations for a different approach to laying out the products.

    DESCRIPTION: Since there is a chance i might have multiple unique "sections" of products on one page, I have created a DIV ‘s labeled "Section_one", "Section_two"….ect. Each section will contain parent UL (unordered list), and each LI (list item) will represent a single row of products. Each LI of the parent UL will contain a nested UL that will be displayed Inline (representing "a" row). Each LI of this nested (row) UL will be an individual product. And each product has 2 sections (an image and a description). So, again I have nested a UL consisting of 2 LI’s (one for the image and one for the description).

    Code:
        • Image1
        • Description1
        • Image2
        • Description2
        • Row2_Image1
        • Row2_Description1

    One bonus question is: If I want to apply a rule to "a" specific nested class – for example, if I wanted to apply a certain text color to class "item_description" of row2 – is the only way to specify a class by:

    Code:
    .product_rows .row2 .productlist .each_item .item_description {
    color: #FFFFFF;
    }
    # July 12, 2008 at 5:37 pm

    no suggestions?

    # July 12, 2008 at 6:32 pm

    Seems like it makes sense to me. What is the question exactly?

    If you aren’t sold on the idea that nested lists are the best semantic solution (I could go either way), you could consider just using next div’s or definition lists. If you use div’s it might start to feel a little "divitus"-y, but that’ll happen sometimes with complex layouts. An really, since this is a grid-like structure of products, a table might even work for you, don’t avoid them just because of the stigma.

    # July 13, 2008 at 12:24 am

    Thanks.

    I did run into an issue of the whole "cascading" inheritance. It was cumbersome to get it to work (some-what) and I was having a hard time keeping the sanity with 3 levels of nested lists.

    I found a way to get <div class> to work and keep the code minimized (which was not the case with nested div’s).

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".