2 Replies Latest reply on Aug 17, 2006 7:11 AM by Newsgroup_User

    list headers

    Level 7
      This is driving me crazy. Based on ALA's article:
      http://alistapart.com/articles/layeredfudge/

      I have this 2 column list. I can't seem to get rid of my bullet for my
      headers. I tried two different ways. One just applying my h4 tag and one
      adding a class to the specific li. I also tried list headers..and it
      worked, but it caused an error.

      How can I get rid of the bullet?

      Here's the CSS:

      #navlist2 {width: 435px;}
      #navlist2 ul.left {
      float: left;
      width: 200px;
      margin: 0px;
      padding: 15px 0px;
      border: 0px none;
      position: relative;
      left: 25px;
      list-style: none;
      }

      #navlist2 ul.right {
      float: right;
      width: 200px;
      margin: 0px;
      padding: 15px 0px;
      border: 0px none;
      list-style: none;
      }

      #navlist2 li
      {
      padding: 5px 0 5px 15px;
      background-image: url(/2006/images/bullet.gif);
      background-repeat: no-repeat;
      background-position: 0 .75em;
      }

      #navlist2 li.header
      {color: #663; border: 1px solid #663; padding: 0 6px; margin: 0 0 5px;
      background-color:#ffc; font-weight: bold; font-size: 1em; list-style: none;}

      The HTML

      <div id="navlist2">

      <ul class="left">
      <li><h4>General Links</h4></li>
      <li class="bullet"><a href="/2006/index.html">Home</a></li>
      <li class="bullet"><a href="/2006/contact.html">Contact Us</a></li>
      <li class="bullet"><a href="/2006/about.html">About Us</a></li>
      </ul>

      <ul class="right">
      <li class="header">For New Clients</li>
      <li><a href="/2006/newclients/services.html">Pet Sitting Services and
      Prices</a></li>
      <li><a href="/2006/newclients/areas.html">Service Areas</a></li>
      <li><a href="/2006/newclients/checklist.html">Pet Sitting
      Checklist</a></li>
      <li><a href="/2006/newclients/faq.html">Why Choose a Pet Sitter</a>
      </li><li><a href="/2006/newclients/faq.html">Pet Sitting
      FAQ's</a></li>
      <li><a href="/2006/newclients/consult.html">Set up a Service
      Consult</a></li>
      </ul>

      </div>

      Thanks!

      Dan


        • 1. Re: list headers
          Level 7
          Dan Galfano wrote:
          > This is driving me crazy. Based on ALA's article:
          > http://alistapart.com/articles/layeredfudge/
          >
          > I have this 2 column list. I can't seem to get rid of my bullet for my
          > headers. I tried two different ways. One just applying my h4 tag and one
          > adding a class to the specific li. I also tried list headers..and it
          > worked, but it caused an error.
          >
          > How can I get rid of the bullet?
          >
          > Here's the CSS:
          >
          > #navlist2 {width: 435px;}
          > #navlist2 ul.left {
          > float: left;
          > width: 200px;
          > margin: 0px;
          > padding: 15px 0px;
          > border: 0px none;
          > position: relative;
          > left: 25px;
          > list-style: none;
          > }

          According to the pvii uberlink tutorial, that should be
          "list-style-type: none;"

          Haven't checked it, but you might try it. :-)


          >
          > #navlist2 ul.right {
          > float: right;
          > width: 200px;
          > margin: 0px;
          > padding: 15px 0px;
          > border: 0px none;
          > list-style: none;
          > }
          >
          > #navlist2 li
          > {
          > padding: 5px 0 5px 15px;
          > background-image: url(/2006/images/bullet.gif);
          > background-repeat: no-repeat;
          > background-position: 0 .75em;
          > }
          >
          > #navlist2 li.header
          > {color: #663; border: 1px solid #663; padding: 0 6px; margin: 0 0 5px;
          > background-color:#ffc; font-weight: bold; font-size: 1em; list-style: none;}
          >
          > The HTML
          >
          > <div id="navlist2">
          >
          > <ul class="left">
          > <li><h4>General Links</h4></li>
          > <li class="bullet"><a href="/2006/index.html">Home</a></li>
          > <li class="bullet"><a href="/2006/contact.html">Contact Us</a></li>
          > <li class="bullet"><a href="/2006/about.html">About Us</a></li>
          > </ul>
          >
          > <ul class="right">
          > <li class="header">For New Clients</li>
          > <li><a href="/2006/newclients/services.html">Pet Sitting Services and
          > Prices</a></li>
          > <li><a href="/2006/newclients/areas.html">Service Areas</a></li>
          > <li><a href="/2006/newclients/checklist.html">Pet Sitting
          > Checklist</a></li>
          > <li><a href="/2006/newclients/faq.html">Why Choose a Pet Sitter</a>
          > </li><li><a href="/2006/newclients/faq.html">Pet Sitting
          > FAQ's</a></li>
          > <li><a href="/2006/newclients/consult.html">Set up a Service
          > Consult</a></li>
          > </ul>
          >
          > </div>
          >
          > Thanks!
          >
          > Dan
          >
          >


          --
          Bonnie
          in California
          8 ^ )
          • 2. Re: list headers
            Level 7
            Bonnie,

            What's the difference between list-style: and list-style-type:

            Anyway...I tried that...no luck :(

            Thanks for taking a look though!

            Dan


            "Bonnie" <kroko@pixel[occam]plum.com> wrote in message
            news:ec1t6c$30q$2@forums.macromedia.com...
            > Dan Galfano wrote:
            >> This is driving me crazy. Based on ALA's article:
            >> http://alistapart.com/articles/layeredfudge/
            >>
            >> I have this 2 column list. I can't seem to get rid of my bullet for my
            >> headers. I tried two different ways. One just applying my h4 tag and
            >> one adding a class to the specific li. I also tried list headers..and
            >> it worked, but it caused an error.
            >>
            >> How can I get rid of the bullet?
            >>
            >> Here's the CSS:
            >>
            >> #navlist2 {width: 435px;}
            >> #navlist2 ul.left {
            >> float: left;
            >> width: 200px;
            >> margin: 0px;
            >> padding: 15px 0px;
            >> border: 0px none;
            >> position: relative;
            >> left: 25px;
            >> list-style: none;
            >> }
            >
            > According to the pvii uberlink tutorial, that should be "list-style-type:
            > none;"
            >
            > Haven't checked it, but you might try it. :-)
            >
            >
            >>
            >> #navlist2 ul.right {
            >> float: right;
            >> width: 200px;
            >> margin: 0px;
            >> padding: 15px 0px;
            >> border: 0px none;
            >> list-style: none;
            >> }
            >>
            >> #navlist2 li
            >> {
            >> padding: 5px 0 5px 15px;
            >> background-image: url(/2006/images/bullet.gif);
            >> background-repeat: no-repeat;
            >> background-position: 0 .75em;
            >> }
            >>
            >> #navlist2 li.header
            >> {color: #663; border: 1px solid #663; padding: 0 6px; margin: 0 0 5px;
            >> background-color:#ffc; font-weight: bold; font-size: 1em; list-style:
            >> none;}
            >>
            >> The HTML
            >>
            >> <div id="navlist2">
            >>
            >> <ul class="left">
            >> <li><h4>General Links</h4></li>
            >> <li class="bullet"><a href="/2006/index.html">Home</a></li>
            >> <li class="bullet"><a href="/2006/contact.html">Contact Us</a></li>
            >> <li class="bullet"><a href="/2006/about.html">About Us</a></li>
            >> </ul>
            >>
            >> <ul class="right">
            >> <li class="header">For New Clients</li>
            >> <li><a href="/2006/newclients/services.html">Pet Sitting Services
            >> and Prices</a></li>
            >> <li><a href="/2006/newclients/areas.html">Service Areas</a></li>
            >> <li><a href="/2006/newclients/checklist.html">Pet Sitting
            >> Checklist</a></li>
            >> <li><a href="/2006/newclients/faq.html">Why Choose a Pet Sitter</a>
            >> </li><li><a href="/2006/newclients/faq.html">Pet Sitting
            >> FAQ's</a></li>
            >> <li><a href="/2006/newclients/consult.html">Set up a Service
            >> Consult</a></li>
            >> </ul>
            >>
            >> </div>
            >>
            >> Thanks!
            >>
            >> Dan
            >>
            >>
            >
            >
            > --
            > Bonnie
            > in California
            > 8 ^ )