Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy How list with single bullet on one item only?

    The best way to described what I want to do in HTML is by example: In Firefox you can click
    View | Character Encoding | Auto-Detect

    That brings up a side list of several items. Only one of those items has a solid dot next to it that shows it is the selected item. You can click to change which item has the bullet next to it. I want to know how do the same thing with HTML, CSS, and Javascript.

    It is easy enough to pop up lists. The problem comes from having only one item with a style and other items with other styles. I've coded up a bunch of li items I've also tried it with div and
    display: list-item;
    list-style-type:disc;
    in one CSS entry (called itemselected) and then another CSS entry with
    display: list-item;
    list-style-type:none;
    called itemnotselected in all the other items. I use Javascript click events to change which item has the class="itemselected" and make all the other items have class="itemnotselected".

    I've also tried showing the dot with
    list-style-image: url(images/dot.gif) ! important;

    My problems are with:
    - getting the dot onto the left of the text description of a single item,
    - align the dot vertically with the text description,
    - get all other row text descriptions aligned the same vertically.
    - Getting the dot within the colored background box that has the text description from within the a tag.

    I'm using an a tag within an li (or within div on some variations I've tried) in order to get the onclick. That works. My Javascript executes and changes which elements have which classes assigned to them. My problem is in layout appearances. I'm testing with IE 7, latest Firefox, Seamonkey, Safari. All have similar problems but IE is worse than the others.

    Here's part of the CSS. Note that part of it is commented out since it represents different ways I've tried to make it work. Basically, on a click I just change which li or div (and which a element within them) has the itemselected or itemnotselected.

    li.itemselected, a.itemselected, div.itemselected
    {
    display: list-item;
    list-style-type:disc;
    /* background-image: url(images/dot.gif); */
    /* background-image: url(images/arrow.png); */
    list-style-image: url(images/dot.gif) ! important;
    /*list-style-image: none; */
    /*list-style-position:inside;*/
    background-repeat: no-repeat;
    /*padding-left:6px; */
    margin-left: 15px;
    /*background-position: 0 .5em; */
    background-position: left center;
    /*background-color: #b041d3;*/
    background: #b041d3 none;
    font-size: 9pt;
    z-index:4;

    }

    /*

    li.itemselected li:before {
    background: #b041d3 none ! important;
    padding-left:6px;
    margin-left: 15px;
    content: "\00BB \0020";
    z-index:4;
    }

    li.itemnotselected li:before {
    background: #b041d3 none ! important;
    padding-left:6px;
    margin-left: 15px;
    content: "▶ \0020";
    z-index:4;
    }
    */


    li.itemnotselected, a.itemnotselected, div.itemnotselected
    {
    display: list-item;
    list-style-type:square;
    /*list-style-type: none; */
    /*border-left-width:thick;*/
    /*padding-left:6px; */
    margin-left: 15px;
    /*background-position: 0 .5em; */
    background-position: left center;
    /*color: #746C19;*/
    background-color: #f0e1a3 ! important;
    font-size: 9pt;
    z-index:4;

    }

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    If your javascript is working and the classes are getting changed, then why not apply a different background image to the different classes.

    Eg:
    Code:
    li.itemselected {background:url(background_with_dot.jpg); }
    
    li.itemnotselected {background:url(background_without_dot); }

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fisher, If I took your approach I would need to make the entire background a fixed size? The advantage of using just a dot and then placing the text to the right of it is that I can easily change what text is in the list and not worry that the background might be too small for a longer line of text in a new entry.

    My problems are all in offsets in formatting. I understand Javascript very well, CSS not so much.

    Can you suggest any tools that make CSS debugging easier to do?

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I was learning about li images the other day and this link was helpful.
    http://www.echoecho.com/csslists.htm

    i think your syntax is wrong
    list-style:none is correct
    but I don't think
    list-style-image:none is correct

  • #5
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Quote Originally Posted by AppDevGuy View Post
    Fisher, If I took your approach I would need to make the entire background a fixed size?
    No, you would just set the background to no-repeat. It would show one dot on the left.

    Anyway, if you want to do it with actual bullets, try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #nav ul, #nav li {
    	list-style-type:none;
    	display:list-item;
    }
    #nav li.selected {
    	list-style-type:square;
    }
    #nav a {
    	text-decoration:none;
    	font-weight:bold;
    }
    #nav a:hover {
    	color:#ff0;
    }
    </style>
    </head>
    <body>
    <ul id="nav">
      <li><a href="index.html">Home</a></li>
      <li class="selected"><a href="index.html">Page 1</a></li>
      <li><a href="index.html">Page 2</a></li>
      <li><a href="index.html">Page 3</a></li>
      <li><a href="index.html">Page 4</a></li>
    </ul>
    </body>
    </html>

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    here's a script to change all the li tag to list-style: none except the one you click on.

    Code:
    <html>
    <head>
    <style type="text/css">
    LI.list0 {list-style:none}
    LI.list1 {list-style-image: url(li4.png); outside; color:blue}
    .blacktext {color:black;outside;}
    </style>
    </head>
    
    <body>
    <script>
    function resetAttributes(){
    var listofli=document.getElementsByTagName('li')
    for (i=0;i<listofli.length;i++){ listofli[i].setAttribute('class','list0')}
    }
    </script>
    <ul>
    <li class="list1" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
    </ul>
    <br>
    <ul>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
    </ul>
    <br>
    <ul>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
    </ul>
    <br>
    <br>
    <ul>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
    
    </ul>
    <ul>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')"><span class="blacktext">This is one black line</span>
    <li class="list0" onclick="resetAttributes();this.setAttribute('class','list1')">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
    
    </ul>
    <table align="center" bgcolor="#ffffff" border="0" cellpadding="3" cellspacing="1"><tbody><tr><td bgcolor="#99aa99"><table bgcolor="#ffffff" border="0" cellpadding="2" cellspacing="1" width="450"><tbody><tr><td class="table7">
    
    Property</td><td class="table7">Values</td><td class="table7">NS</td><td class="table7">IE</td></tr><tr><td class="table1">list-style type</td><td class="table5">disc<br>
    circle<br>
    square<br>
    decimal<br>
    lower-roman<br>
    upper-roman<br>
    
    lower-alpha<br>
    upper-alpha<br>
    none</td><td class="table5">4+<br>
    4+<br>
    4+<br>
    4+<br>
    4+<br>
    4+<br>
    
    4+<br>
    4+<br>
    &nbsp;</td><td class="table5">4W<br>
    4W<br>
    4W<br>
    4W<br>
    4W<br>
    4W<br>
    4W<br>
    
    4W<br>
    4W</td></tr><tr><td class="table1">list-style image<br>
    </td><td class="table5">none<br>
    url(&lt;url&gt;)</td><td class="table5">&nbsp;<br>
    &nbsp;</td><td class="table5">4W<br>
    4W</td></tr><tr><td class="table1">list-style position<br>
    </td><td class="table5">outside<br>
    
    inside</td><td class="table5">&nbsp;<br>
    &nbsp;</td><td class="table5">4W<br>
    4W</td></tr><tr><td class="table1">list-style<br>
    </td><td class="table5">&lt;list-style type&gt;<br>
    &lt;list style position&gt;<br>
    &lt;list-style image&gt;</td><td class="table5">&nbsp;<br>
    &nbsp;</td><td class="table5">4W<br>
    4W<br>
    
    4w<br>
    </td></tr></tbody></table></td></tr></tbody></table>
    </body>
    </html>
    Last edited by TinyScript; 05-01-2009 at 08:54 PM.


  •  

    Tags for this Thread

    Posting Permissions

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