SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: styling a UL

  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling a UL

    hello all,

    I am writing a new version of one of my sites and am really stuck.

    part of it is a directory, and i have managed to get my coldfusion to spit out a nested UL but im completely lost in the best way to style it.

    what i have is here.. www.weblinker.co.uk - you can see the links on the main section.

    what i would like is to have any sub categories displayed below the main, as demonstrated in this site http://www.scotlanddirectory.co.uk - though this is table based.

    does anyone think they can help? thanks alot

    Mike

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Probably the easiest way is to make the top level list items block level to force a line break after the title, and to make the nested elements display inline so they act like spans
    Code:
    .mainDirectory ul li { display:block; font-weight: bold; text-decoration: underline; }
    .mainDirectory ul li ul li { display:inline; }
    Then you can create the space around the lists by targeting either of the 'ul' elements and applying padding/margins.
    If you want columns like on scotlanddirectory then you will need to float the top level ul left and give it a width of slightly less than half(49.5&#37, this way the items will wrap from left to right in two columns.

    All the best,
    Last edited by markbrown4; Jan 17, 2007 at 02:58.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply mark!

    I have given your suggestions a try, but I cant get the child elements to "co-operate" - they seem to be styled in the same fasion as the parent elements - can you offer any other advice

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    Your sub-lists aren't properly formatted, your sub menus need to be enclosed in their parents li element, see below.
    Code:
    <ul>
      <li><a href="Accommodation-17">Accommodation</a></li>
      <li><a href="Animals_and_Pets-25">Animals and Pets</a></li>
      <li><a href="Baby_and_Child-19">Baby and Child</a></li>
      <li><a href="Books_and_Publications-10">Books and Publications</a></li>
      <li><a href="Conservation_and_Charity-24">Conservation and Charity</a></li>
      <li><a href="Cooking-23">Cooking</a></li>
      <li><a href="Eco_Living-16">Eco Living</a></li>
      <li><a href="Education_and_Research-15">Education and Research</a></li>
      <li><a href="Food_and_Drink-5">Food and Drink</a></li>
      <li><a href="Gardening-8">Gardening</a></li>
      <li><a href="Organisations-7">Organisations</a></li>
      <li><a href="Other_Services-18">Other Services</a></li>
      <li><a href="Shopping-6">Shopping</a>
        <ul>
          <li><a href="Clothing_and_Textiles-21">Clothing and Textiles</a></li>
          <li><a href="Farmers_Markets-14">Farmers Markets</a></li>
          <li><a href="Other-22">Other</a></li>
          <li><a href="Wholesale-12">Wholesale</a></li>
        </ul>
      </li>
    </ul>
    This way the sub menus are linked with their parents and you can use these descendant selectors to select the different parts of the list

  5. #5
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark, thank you so much for the help!!

    I would not have spotted that and banged me head for hours.

    It is now working a treat and I can finally start reducing the to do list further.


  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    You're welcome


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •