SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems styling <ul> that is 2 levels deep

    I have 2 issues i am trying to work through:

    1.) i am trying to style an unordered list that, at times, gets to be 2 levels deep. It is a "site map" that is laid out in a 3 column table. The default list properties use a HUGE indent for the lists and by the time i get to the 2nd level it will only allow room for 1 word or so before wrapping. It looks hideous. I am using a custom bullet (i don't know if that is throwing anything off or not).

    To reduce the verticle space (which is HUGE by default) i used the "margin-bottom" property. Then i adjusted the indent using the "text-indent" property as follows:
    Code:
    ul {
    	list-style-image: url(images/bullet_diamond.jpg);
    	text-indent: -6px;
    	margin-bottom: -.2em;
    }
    This worked fine for all the lists that are one level deep, however, all the lists that are 2 levels deep use the default indent value. This has really racked my brain and looks awkward. Can anyone tell me how to get the list 2 levels deep to obey the CSS rule? It is very frustrating.

    2.) The other issue i am having is with the indent itself when i change it to -6. The indent obeys, but when the text wraps, it uses the default indent value! eek! This has racked my brain. I pretty much resolved it by balancing 2 properties (padding-left and text-indent). However this still leaves the horrible issue of the lists 2 levels deep. Is there a better way to get the "wrapped" text to stay in line with the indent?

    any help would be GREATLY appreciated!!!! I have to have this finished by monday morning for a client.

    Here is an example of my problem. Notice the list that are 2 levels deep.
    http://www.saddlebrook.hhvisualgroup.../site_map.html
    Forgive the sloppy code (dreamweaver) i haven't run it through a code validator yet to clean it up.

    all-in-all i am this is the way the lists are set up:
    Code:
    <ul>
    <li>something here</li> 
    <li>something here</li>
    <li>something here</li>
    <li>something here</li>
        <ul>
             <li>something here</li>
             <li>something here</li>
             <li>something here</li>
             <li>something here</li>
        </ul>
    </ul>
    thank you so much

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheShade01 View Post
    all-in-all i am this is the way the lists are set up:
    Looking through the source of the site, I cannot see where this structuire actually occurs - there are not any nested lists....

    I do see a lot of unnecessary tables mixed into the lists, and a number of errors - <ul>s can only directly contain <li>s, not other <ul>s.

    I think this would be better as a definition list, and a little thought can get rid of a lot of the classes used as well. Relative links would also reduce code size.

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks. well i agree with the "classes" and rediculous tables mixed in with the lists. This particular page was generated by a site map generator to save me the headache of doing it manually. It was the first time i tried using one. I am not sure it saved me a headache. I found alot of "odd" things with the code. One of which was the gazillion styles. I am planning on reducing that dramatically...most likely with a an id. I was just trying to get the indent worked out first.

    As far as the relative paths, although i agree (the rest of the site has relative paths), this particular client was given specific instructions by an SEO company to use absolute paths on the site map...so i am on somewhat of a leash.

    the <ul> example i posted is definately in there (the idea at least), although hard to see through all the mess. I will try a definition list, although i use <ul>'s in <ul>'s all the time. When using the "disc" syle they turn into circles instead of discs when you do this.

    we will see. I am not having a problem getting the list working, it is controlling the indent. I will keep at it. I appreciate your response.

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

    Your nested list structure is incorrect
    Code:
    <ul>
      <li>something here</li> 
      <li>something here</li>
      <li>something here</li>
      <li>something here
        <ul>
          <li>something here</li>
          <li>something here</li>
          <li>something here</li>
          <li>something here</li>
        </ul>
      </li>
    </ul>
    You need the ul within it's parent li tag for it's semantic meaning of child / parent. Did you validate? I imagine this would throw errors.
    Code:
    <ul>
      <ul>
        <li>example</li>
        <li>example</li>
      </ul>
    </ul>

  5. #5
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To push the 2nd level items list to the left and vertically align it with the 1st level add the following to your CSS:
    * html ul ul {margin-left:-1px;} /* Serves IE6 only */
    Here, in FireFox, the two levels are already lined up.
    -------------------------------------------------------------------
    In HTML it is legal and is allowed UL elements containing others UL elements.
    The right nested UL's mark up have the following fashion:
    Code:
    <ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3
          <ul>
          <li>Item3.1</li>  
          <li>Item3.2</li>
          </ul>
     </li>
     <li>Item4</li>
     <li>Item5
          <ul>
          <li>Item5.1</li>  
          <li>Item5.2
    	 <ul>
             <li>Item5.2.1</li>  
             <li>Item5.2.2</li>
             </ul>
          </li>  
           </ul>
     </li>
    </ul>
    Mauricio Samy Silva
    http://www.maujor.com/

  6. #6
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    omg i feel like an idiot. sheesh. markbrown and maujor, thank you guys so much. I should have run a validator through the code before posting. it would have definately caught that. thanks again.

  7. #7
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well that was definately a problem...the way i had it nested was just a stupid mistake. I changed the syntax so that they are nested properly, but i am still having the same issue. For now i pulled some unorthodox tricks to get what i wanted, but i would like to know why the "text-indent" property does not seem to affect the nested list.

    I created a test page. All that was on it was:

    Code:
    <ul>
      <li>example</li>
      <li>example</li>
      <li>example
        <ul>
           <li>example</li>
           <li>example</li>
           <li>example</li>
        </ul>
      </li>
    </ul>
    i added a simple rule:

    Code:
    ul {
         text-indent: -10px;
    }
    the rule is working, but only affects the parent and not the children. this has been something i have always wondered about, but have never figured it out nor was i ever faced with a situation that demanded that i really persue it until now. any ideas?

  8. #8
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try what I said above?
    "To push the 2nd level items list to the left and vertically align it with the 1st level add the following to your CSS:
    * html ul ul {margin-left:-1px;} /* Serves IE6 only */
    Here, in FireFox, the two levels are already lined up."
    Mauricio Samy Silva
    http://www.maujor.com/

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I would recommend using background-image and padding instead of list-style-image and text-indent.

    Text indent won't 'compound' values with it's parents values.
    Padding on the other hand actually pushes the element over, text-indent just nudges the text within an element.

  10. #10
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maujor, yeah i did try but it didn't work for me. Myself and a number of my clients are using ie7 too. I altered it a bit with a sample i made, however, with success!! Thank you guys for all your help. It lead me down a fruitful rabit trail that yielded the result i needed. I really appreciate it.

    for me, this is what worked:

    Code:
    #nestTest li ul li {
    	margin-left:-5px;
    }
    i just gave the parent the id value and all the children obeyed.

    thanks again!

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As previously stated, text-indent isn't what controls this, rather margin or padding (some browsers treat this differently). I when through your existing sitemap and cleaned up the table crap, and nested everything properly, applied some styles, and came up with this html:
    Code:
    <div class="sitemap">
      <h3>Main Navigation</h3>
      <ul>
        <li><a href="http://www.saddlebrook.com/" >Home</a></li>
        <li><a href="http://www.saddlebrook.com/our_resort.html" >Our Resort</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/services_and_amenities.html" >Services and Amenities</a></li>
    	  <li><a href="http://www.saddlebrook.com/skids_club.html" >S'Kids Club</a></li>
    	  <li><a href="http://www.emarketing360.com/Saddlebrook/eBROCHURE.html" target="_blank">Virtual Tours</a></li>
    	  <li><a href="http://www.saddlebrook.com/sbflashshow/index.html" >Slide Show</a></li>
    	  <li><a href="http://www.saddlebrook.com/media_resources.html">Media Resources</a>
    	    <ul>
    	      <li><a href="http://www.saddlebrook.com/downloads/mdine.html" >Dining and Entertainment</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mfit.html" >Fitness  Center and Etcheberry Sports</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mgolf.html" >Golf</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mgroup.html" >Group  Activities and Team Building</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mpress.html" >Logo  and Press Releases</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mmeet.html" >Meetings  and Functions</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mresort.html" >Resort  and SuperPool</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/skids.html" >S'kids  Club</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mspa.html" >Spa</a></li>
    	    <li><a href="http://www.saddlebrook.com/downloads/mtennis.html" >Tennis</a></li>
    	  </ul></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_map_large_image.jpg" target="_blank">Resort Map</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_center_map_large_image.jpg" target="_blank">Resort Center Map</a></li>
        </ul></li>
        <li><a href="http://www.saddlebrook.com/accommodations.html" >Accommodations</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/deluxe_guest_room.html" >Deluxe Guest Room</a></li>
    	  <li><a href="http://www.saddlebrook.com/one_bedroom_suite.html" >One-Bedroom Suite</a></li>
    	  <li><a href="http://www.saddlebrook.com/two_bedroom_suite.html" >Two-Bedroom Suite</a></li>
    	  <li><a href="http://www.saddlebrook.com/presidential_suite.html" >Presidential Suite</a></li>
        </ul></li>
        <li><a href="http://www.saddlebrook.com/dining_and_entertainment.html" >Dining and Entertainment</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/cypress_restaurant.html" >Cypress Restaurant</a></li>
    	  <li><a href="http://www.saddlebrook.com/dempseys_steak_house.html" >Dempsey's Steak House</a></li>
    	  <li><a href="http://www.saddlebrook.com/tds_sports_bar.html" >T.D.'s Sports Bar</a></li>
    	  <li><a href="http://www.saddlebrook.com/polo_lounge.html" >Polo Lounge</a></li>
    	  <li><a href="http://www.saddlebrook.com/poolside_cafe.html" >Poolside Cafe</a></li>
    	  <li><a href="http://www.saddlebrook.com/coffee_bar.html" >Coffee Bar</a></li>
    	  <li><a href="http://www.saddlebrook.com/entertainment.html" >Entertainment</a></li>
        </ul></li>
        <li><a href="http://www.saddlebrook.com/meetings_and_conferences.html" >Meetings and Conferences</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/rfp_meetings.html" target="_blank">Request for Proposal</a></li>
    	  <li><a href="http://www.saddlebrook.com/meeting_facilities.htm" target="_blank">Meeting Room & Floor Plan Capacity Charts</a></li>
    	  <li><a href="http://www.saddlebrook.com/function_room_description.html" >Function Room Description</a></li>
    	  <li><a href="http://www.saddlebrook.com/executive_meetings.html" >Executive Meetings (Under 20 Rooms)</a></li>
    	  <li><a href="http://www.emarketing360.com/Saddlebrook/eBROCHURE.html" target="_blank">Virtual Tours</a></li>
    	  <li><a href="http://www.saddlebrook.com/meet_the_staff.html" >Meet the Staff</a></li>
    	  <li><a href="http://www.saddlebrook.com/testimonials.html" >Testimonials</a></li>
    	  <li><a href="http://www.saddlebrook.com/team_building.html" >Team Building</a></li>
    	  <li><a href="http://www.saddlebrook.com/beyond_meetings.html">Beyond Meetings</a>
    	    <ul>
    	      <li><a href="http://www.saddlebrook.com/nick_hall.html" >Meet  Dr. Nick Hall</a></li>
    	    <li><a href="http://www.saddlebrook.com/team_building.html" >Team Building</a></li>
    	    <li><a href="http://www.saddlebrook.com/lighthearted_team_building.html" >Lighthearted  Team Building</a></li>
    	    <li><a href="http://www.saddlebrook.com/team_building_faq.html" >Team  Building FAQ</a></li>
    	    <li><a href="http://www.saddlebrook.com/team_building_testimonials.html" >Testimonials</a></li>
    	    <li><a href="mailto:nhall@saddlebrookresort.com" >Contact Dr. Hall</a></li>
    	  </ul></li>
    	  <li><a href="http://saddlebrook.com/pdf/SaddlebrookCatering.pdf" target="_blank">Catering Brochure</a></li>
    	  <li><a href="http://saddlebrook.com/pdf/SaddlebrookCatering.pdf" target="_blank">Group Activities Brochure</a></li>
        </ul></li>
        </ul>
    </div>
    <div class="sitemap toppad">
      <ul>
        <li><a href="http://www.saddlebrook.com/banquets_and_catering.html" >Banquets and Catering</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/weddings.html" >Weddings</a>
              <ul>
                <li><a href="http://www.saddlebrook.com/rfi_weddings.html" >Request for Information</a></li>
    	  </ul></li>
    	  <li><a href="http://www.saddlebrook.com/meeting_facilities.htm" target="_blank">Capacity Charts</a></li>
    	  <li><a href="http://www.saddlebrook.com/meet_the_staff_banquets.html" >Meet the Staff</a></li>
    	  <li><a href="http://www.saddlebrook.com/pdf/SaddlebrookCatering.pdf" target="_blank">Catering Brochure</a></li>
    	  <li><a href="http://www.saddlebrook.com/rfp_banquets.html" >Event Planner RFP</a></li>
        </ul></li>
        <li><a href="http://www.saddlebrook.com/golf.html" >Golf</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/golf_winter_spring_fall.html" >Winter, Spring, Fall Golf Packages</a></li>
    	  <li><a href="http://www.saddlebrook.com/golf_summer.html" >Summer Golf Package</a></li>
    	  <li><a href="http://www.saddlebrook.com/golf_new_player_academy.html" >New Player Academy</a></li>
    	  <li><a href="http://www.saddlebrook.com/golf_play_with_a_pro.html" >Play with a Pro</a></li>
    	  <li><a href="http://www.saddlebrook.com/golf_player_development.html" >Player Development Program</a></li>
    	  <li><a href="http://www.saddlebrook.com/golf_junior.html" >Junior Golf Program</a></li>
    	  <li><a href="http://www.saddlebrook.com/local_golf_play.html" >Local Golf Play</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_golf/pdf/Group%20Golf%20Getaway%20brochure%2007.pdf" target="_blank">Group Golf Gateway</a></li>
    	  <li><a href="http://www.saddlebrook.com/palmercourse.html" target="_blank">Tour the Palmer Golf Course</a></li>
    	  <li><a href="http://www.saddlebrook.com/golfcourse.html" target="_blank">Tour the Saddlebrook Golf Course</a></li>
    	  <li><a href="http://www.saddlebrook.com/prepmain.html" target="_blank">Saddlebrook Prep</a></li>
        </ul></li>
        <li><a href="http://www.saddlebrook.com/tennis.html" >Tennis</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/adult_programs.html" >Adult Programs</a></li>
    	  <li><a href="http://www.saddlebrook.com/junior_programs.html" >Junior Programs</a></li>
    	  <li><a href="http://www.saddlebrook.com/touring_pros.html" >Touring Pros and Academy Players</a></li>
    	  <li><a href="http://www.saddlebrook.com/prepmain.html" target="_blank">Saddlebrook Prep</a></li>
    	  <li><a href="http://www.saddlebrook.com/sbtennis/" >Saddlebrook Tennis</a></li>
        </ul></li>
        <li><a href="http://www.saddlebrook.com/spa_and_fitness.html" >Spa & Fitness</a></li>
        <li><a href="http://www.saddlebrook.com/family_reunions.html" >Family Reunions</a></li>
        <li><a href="http://www.saddlebrook.com/area_attractions.html" >Area Attractions</a></li>
        <li><a href="http://www.saddlebrook.com/maps_and_directions.html" >Maps and Directions</a></li>
        <li><a href="http://www.saddlebrook.com/eshoppe.html" >eShoppe</a></li>
        </ul>
    </div>
    <div class="sitemap">
      <h3>Actionable Navigation</h3>
      <ul>
        <li><a href="http://www.saddlebrook.com/room_reservations.html" >Room Reservations</a></li>
        <li><a href="http://www.saddlebrook.com/specials_and_packages.html" >Specials and Packages</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/winter_spring_fall_golf_packages.html" >Winter, Spring, Fall Golf Packages</a></li>
    	  <li><a href="http://www.saddlebrook.com/summer_golf_package.html" >Summer Golf Package</a></li>
    	  <li><a href="http://www.saddlebrook.com/new_player_academy.html" >New Player Academy</a></li>
    	  <li><a href="http://www.saddlebrook.com/play_with_a_pro.html" >Play with a Pro</a></li>
    	  <li><a href="http://www.saddlebrook.com/player_development_program.html" >Player Development Program</a></li>
    	  <li><a href="http://www.saddlebrook.com/junior_golf_program.html" >Junior Golf Program</a></li>
    	  <li><a href="http://www.saddlebrook.com/adult_tennis_program.html" >Adult Tennis Program</a></li>
    	  <li><a href="http://www.saddlebrook.com/junior_tennis_program.html" >Junior Tennis Program</a></li>
    	  <li><a href="http://www.saddlebrook.com/oasis_of_serenity.html" >Oasis of Serenity</a></li>
    	  <li><a href="http://www.saddlebrook.com/me_and_mom.html" >Me and Mom</a></li>
    	  <li><a href="http://www.saddlebrook.com/romantic_rendezvous.html" >Romantic Rendezvous</a></li>
    	  <li><a href="http://www.saddlebrook.com/thanksgiving_harvest.html" >Thanksgiving Harvest</a></li>
    	  <li><a href="http://www.saddlebrook.com/christmas_and_new_years_holiday.html" >Christmas and New Years Holiday</a></li>
    	  <li><a href="http://www.saddlebrook.com/easter_package.html" >Easter Package</a></li>
        </ul></li>
        <li><a href="http://www.saddlebrook.com/plan_a_group.html" >Plan A Group</a></li>
        <li><a href="http://www.saddlebrook.com/golf_reservations.html" >Golf Reservations</a></li>
        <li><a href="http://www.saddlebrook.com/email_offers_signup.html" >Email Offers Sign-up</a></li>
        <li><a href="http://www.saddlebrook.com/contact_us.html" >Contact Us</a>
          <ul>
            <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/accounting_directory.html" >Accounting</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/apga_directory.html" >Arnold Palmer Golf Academy</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/conferences_directory.html" >Conference Services & Catering</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/front_office_directory.html" >Front Office / Guest Services</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/human_directory.html" >Human   Resources / Employment Opportunities</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/marketing_directory.html" >Marketing, Advertising & Public   Relations</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/purchasing_directory.html" >Purchasing</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/reservation_directory.html" >Reservations</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/administration_directory.html" >Resort Administration</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/holdings_directory.html" >Saddlebrook Holdings</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/saddlebrook_prep_directory.html" >Saddlebrook Preparatory</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/tennis_directory.html" >Saddlebrook Tennis</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/sales_directory.html" >Sales Group Availability</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/team_building_directory.html" >Team Building</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/golf_shop_directory.html" >The Golf Shop</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/spa_directory.html" >The Spa at Saddlebrook Resort</a></li>
    	  <li><a href="http://www.saddlebrook.com/images/resort_contacts/directory/weddings_directory.html" >Weddings</a></li>
        </ul></li>
        </ul>
    </div>
    and this css:
    Code:
    .sitemap {
    	width: 250px;
    	float: left;
    	margin-right: 10px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #008080;
    }
    .sitemap h3 {
    	text-align: center;
    	font-size: 14px;
    	background-color: #8B7D72;
    	color: #FFFFFF;
    	display: block;
    	line-height: 1.5em;
    }
    .sitemap ul {
    	margin: 0;
    	padding: 0;
    }
    .sitemap li {
    	margin: 5px 0 0;
    	list-style: none;
    }
    .sitemap ul ul li {
    	list-style-type: disc;
    	list-style-position: inside;
    	margin: 0;
    }
    .sitemap ul ul ul li {
    	list-style-type: circle;
    	padding-left: 10px;
    }
    .sitemap a {
    	color: #645A51;
    	text-decoration: none;
    	font-size: 16px;
    	font-weight: bold;
    }
    .sitemap ul ul a {
    	text-decoration: none;
    	color: #008080;
    	font-size: 13px;
    	font-weight: normal;
    }
    .sitemap ul ul ul a {
    	font-size: 12px;
    }
    .sitemap a:hover {
    	text-decoration: underline;
    }
    .toppad {
    	padding-top: 4em;
    }
    See if that works better.

  12. #12
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    holy crap dude...THANKS! you just saved me a lot of time and taught me some nifty new methods. I was going to clean up all the garbage tonight. I used SiteXpert to generate the sitemap which threw in all the tables and whacky styles. This is absolutely beautiful.

    i actually don't know what to say... other than... thank you. sheesh.

  13. #13
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay this may seem rather bold after all the help i have gotten from everyone, but i have one remaining minor issue that i would like to learn to control.

    Centauri, i can't thank you enough for your help. I have learned a valuable lesson in using css strategically. Although i would have cleaned the code, i would not have gotten rid of the tables altogether because of my ignorance. I now see the light! I never quite understood how to use CSS instead of tables until you took the time to alter the code for me. Now i have learned how to avoid tables whenever possible....thank God.

    There is, however, one remaining issue that i am trying to figure out. It is regarding how the text wraps in the list. Right now, the text wraps to the bullet instead of the text next to the bullet. I have been playing with the margins and padding and can't seem to get it. Like i said, i know it is a bit "balls-ee" to ask after getting so much help, but that would kick this thing once and for all giving me all the control i have wanted.

    i really appreciate all the helpful replies...it has really taught me some valuable lessons!

  14. #14
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's where styling lists can sometimes be tricky. The fix here is to move the list style position from inside to outside (the <li> element), which means we then have to apply a left margin to bring the <li> and bullet back into line. The padding on the second level can then be removed as the <li> margin will also apply here as well.

    Modified css :
    Code:
    .sitemap ul ul li {
    	list-style-type: disc;
    	list-style-position: outside;
    	margin: 0 0 0 15px;
    }
    .sitemap ul ul ul li {
    	list-style-type: circle;
    }
    Cheers
    Graeme

  15. #15
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    man, you have been very gracious. That was spot on. I have gained much confidence in an area i was sorely struggling in. I can now "man-handle" lists with CSS. Like i said, i can't thank you enough.

    thanks a million,

    shae


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
  •