Results 1 to 10 of 10

Thread: Can't get rid off bullets in menu list

  1. #1
    Join Date
    Jan 2006
    Posts
    227
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Can't get rid off bullets in menu list

    Hi.

    I have these menu links where a bullet is showing to the left.
    These bullets are showing if the links are displayed with CSS and without CSS but I can't get rid of these bullets.
    Can someone of you guys tell me how to do that?

    Thanks in advance.
    Cheng

    Here the code:
    Code:
    <div id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="intro.html">Intro</a></li>
        <li><a href="somdej.html">Somdej</a></li>
        <li><a href="nang_paya.html">Nang Paya</a></li>
        <li><a href="phra_rod.html">Phra Rod</a></li>
        <li><a href="pong_supan.html">Pong Supan</a></li>
        <li><a href="somkor.html">Somkor</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    Cheng

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Try the below CSS:

    Code:
    #menu ul{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    }

  3. #3
    Join Date
    Jan 2006
    Posts
    227
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Hi ddadmin.

    Thank you very much.
    That's it.
    The bullets are gone.
    I realy appreciate your help.
    This is a a great place for amateurs like me to get some help.

    Thanks again.
    Cheng

  4. #4
    Join Date
    Apr 2007
    Location
    NY
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Hi! Ok i have the same problem only i have the links in a table:

    <table border="0" bordercolor="#F4B7D6" cellspacing="0" cellpadding="4" width="50%" bgcolor="#fcf3f8" height="111">

    <tr>
    <td><li><a href="#"><font color="#c7377d">Destination 1</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 2</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 3</font></a></li></td>
    </tr>
    <tr>
    <td><li><a href="#"><font color="#c7377d">Destination 4</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 5</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 6</font></a></li></td>
    </tr>
    <tr>
    <td><li><a href="#"><font color="#c7377d">Destination 7</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 8</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 9</font></a></li></td>
    </tr>
    </table>

    And i can't get rid of the bullets.

    I actually tried this "<style type="text/css">
    #menu ul{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    }
    </style>" even though i was pretty sure it wouldn't work in a table...am i doing it wrong? Need Help!!!

  5. #5
    Join Date
    Jan 2007
    Location
    Bournemouth, England
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    First of all, the font tag has no place in modern web design. second, the table tag only has a small part in modern web design. Try this:


    CSS:
    Code:
    <style type="text/css">
    #whatever you wantl{
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    }
    HTML:
    Code:
    <table  id="whatever you want" border="0" bordercolor="#F4B7D6" cellspacing="0" cellpadding="4" width="50&#37;" bgcolor="#fcf3f8" height="111">
    
    <tr>
    <td><li><a href="#"><font color="#c7377d">Destination 1</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 2</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 3</font></a></li></td>
    </tr>
    <tr>
    <td><li><a href="#"><font color="#c7377d">Destination 4</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 5</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 6</font></a></li></td>
    </tr>
    <tr>
    <td><li><a href="#"><font color="#c7377d">Destination 7</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 8</font></a></li></td>
    <td><li><a href="#"><font color="#c7377d">Destination 9</font></a></li></td>
    </tr>
    </table>
    Someone please correct me if i'm wrong, I haven't used tables i ages

  6. #6
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You could do it without even using a class, just with selectors like this:

    Code:
    td li {
      list-style-type: none;
      padding: 0;
      margin-left: 0;
      }
    But there should be no reason to nest <li> elements within table cells. They are meant to show up as a list, together, like the first example. You can control them to display as block elements with a rectangular background or whatever you need without sticking them into a table.

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    okay either get rid of the <li> tags or more preferably get rid of the <table>

    tables are made to be used for tabular data not for general layout. so restructure your code like so

    HTML Code:
    <ul id="menu">
      <li><a href="link.html">Link </li>
      <li><a href="link.html">Link </li>
      <li><a href="link.html">Link </li>
      <li><a href="link.html">Link </li>
    </ul>
    Code:
    <style type="text/css">
    <!--
    
    ul#menu {
     background: #fcf3f8;
     color: #c7377d;
     border: none;
    }
    ul#menu li {
     list-style: none;
     display: inline;
     margin: 0;
     padding: 0;
    }
    ul#menu li a {
      color: #c7377d;
    }
    // -->
    </style>

    however if you do decide to keep with the table layout you can still remove the <li> tags because <td> display inline as default, but again I would HIGHLY suggest you get away from nested tables as your layout schema of choice and you have alot of repetitive <font> tags which are both unnecessary and depreciated (deleted). you can as i pointed out in my css file, you can do it all by css which will save youtime in coding and will save in loading times and also space, not to mention the ease in maintenance when you wish to change something
    Last edited by boogyman; 04-30-2007 at 05:17 PM. Reason: added elements to comply with whole layout

  8. #8
    Join Date
    Apr 2007
    Location
    NY
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks!!! you guys are awesome! The tables were a problem, they were so bulky and tiresome. Css is much better. But atleast now i can deal with the bullets. Yay.

  9. #9
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I need help getting rid of my bullets

    this is my code for the top menu bar but when i hover over them i get bullets on the left. Please help! Below is the Div ID and class id css code



    /* ######### Matt Black Strip Main Menu Bar CSS ######### */


    .mattblackmenu ul{
    margin: 0;
    padding: 0;
    font: bold 10px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #95929C;
    overflow: hidden;
    width: 100%;
    color: #FFFFFF;
    }

    .mattblackmenu li{
    display: inline;
    margin: 0;
    color: red;
    }

    .mattblackmenu li a{
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px; /*padding inside each tab*/
    border-right: 1px solid white; /*right divider between tabs*/
    color: white;
    background: #95929C;
    }

    .mattblackmenu li a:visited{
    color: white;
    }

    .mattblackmenu li a:hover{
    background: #95929C; /*background of tabs for hover state */
    }

    .mattblackmenu a.selected{
    background: #95929C; /*background of tab with "selected" class assigned to its LI */
    }

    ----------------------------------------------------------------------------------------------------------------

    /* ######### Drop Down ULs CSS ######### */


    .ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
    font: normal 9px Verdana;
    margin: 0;
    padding: 0;
    position:absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
    }

    .ddsubmenustyle li a{
    display: block;
    width: 160px; /*width of menu (not including side paddings)*/
    color: white;
    background-color: #29375B;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    }

    * html .ddsubmenustyle li{ /*IE6 CSS hack*/
    display: inline-block;
    width: 170px; /*width of menu (include side paddings of LI A*/
    }


    .ddsubmenustyle li a:hover{
    background-color: #BBD3EC;
    color: black;
    }

    /* ######### Neutral CSS ######### */

    .downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
    padding-left: 2px;
    border: 0;
    }

    .rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 1px;
    left: 100px;
    border: 0;
    }

    .ddiframeshim{
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
    }

    }

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    As long as you use no bulleted lists elsewhere, you may add:

    Code:
    ul, li {
    list-style-type: none!important;
    }
    to your stylesheet. Otherwise you will have to single out the particular ul and li elements by class.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •