The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Question on Nested Unordered List

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #22921

    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).

        • 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:

    .product_rows .row2 .productlist .each_item .item_description {
    color: #FFFFFF;

    no suggestions?



    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 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.