Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS <li> image slice 1

Status
Not open for further replies.
nickdel

nickdel

Programmer
Joined
May 11, 2006
Messages
367
Location
GB
Got a bit of a strange one and I was hoping I could upload some code and images but not sure I can do it on this site?

Anyway, have a look here:


as you can see this is a simple expandable tree structure and I have replaced the standard bullet points of the <li> tags with images. The images that you see of the folder with a plus or minus icon next to it are ONE image. Clicking on the folder part of the image correctly expands/collapses each level however clicking on the plus or minus part expands or collapses the level up! I added the borders so you can see what I'm talking about as it would appear as though the image is being split.

I really hope I've made sense here as I'm a little confused as to why this is happening!

Hope someone can help.

Thanks

Nick
 
Sort by date Sort by votes
I'll look into it a bit more, but to scan over your source code, one problem is you are putting <ul> inside <ul> without making the inner <ul> a list item of the outer <ul>

You have this type of structure:
Code: 
<ul> 
   <li>
      <a></a>
   </li>
   <ul>
      <li>
         <a></a>
      </li>
   </ul>
</ul>

Where it needs to be like this:

Code: 
<ul> 
   <li>
      <a></a>
   </li>
   [!]<li>[/!]
      <ul>
         <li>
            <a></a>
         </li>
      </ul>
   [!]</li>[/!]
</ul>





[monkey][snake] <.
 
Upvote 0 Downvote
Oh yeh, this was initially dynamically created from a much larger list and I've just messed it up slightly! Have changed this now, doesn't change my image split problem though.

look forward to seeing what you find!

Thanks

Nick
 
Upvote 0 Downvote
fwiw it doesn't work in FF at all (currently)
 
Upvote 0 Downvote
Ok, with making this as a structure using lists you can't have everything you wanted without it looking kinda funky. The problem with clicking on the + or - was that the width of your image was too wide, so it caused the image to NOT be a part of the LI it was a bullet for.

Therefore it acted as if it were part of a LI that was one level higher in the hierarchy.

To fix this, you put a padding-left on the LI's that have the folders on them. This is fine except for the fact that you have borders around the LI's. Since a bullet "area" only takes up so much space, there will be a border going through your folder image.

You can achieve everything you want through using anchors and divs.

I also noticed a BUNCH of code that was redundant.

I'll post what I came up with, it's close to what you orginally had, but not all the borders are there.

Code: 
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<script type="text/javascript">
function toggle(id,p) {
   event.cancelBubble = true;
   var myChild = document.getElementById(id);
   if(myChild.style.display!='block') {
      myChild.style.display='block';
      document.getElementById(p).className='folderOpen';
   }
   else {
      myChild.style.display='none';
      document.getElementById(p).className='folder';
   }
}
</script>

<style type="text/css">
ul.tree {
   display:none;
}

li.folder {
   list-style-image: url(plus.gif);
}

li.folderOpen { 
   list-style-image: url(minus.gif);
}

li {
   padding-left:19px;
   margin-left:-17px;
}

a.treeview {
   color:Navy;
   font-family:verdana;
   font-size:8pt;
}

a.treeview:link {
   text-decoration:none;
}

a.treeview:visited {
   text-decoration:none;
}

a.treeview:hover {
  text-decoration:underline;
}

li.members {
   list-style-image: url(members.gif);
}

</style>
</head>
<body>
   <ul style='margin-left:30px; border:1px dotted blue'  id="N0">
      <li onclick="toggle('N0_0', this.id)" class="folder" id="P00">
         <a class="treeview" href="#" target="main_frame" onclick="toggle('N0_0','P00')">Mickey Mouse</a>
         <ul style="border:1px dotted red" class="tree" id="N0_0">
            <li class="members">
               <a class="treeview" href="#" target="main_frame"  title="">Mickey Mouse</a>
            </li>
            <li onclick="toggle('N0_0_1',this.id)" class="folder" id="P0_01">
               <a class="treeview" href = "#" target="main_frame" onclick="toggle('N0_0_1','P0_01')">Donald Duck</a>
               <ul style="border:1px dotted red;" class="tree" id="N0_0_1">
                  <li class="members">
                     <a class="treeview" href="#" target="main_frame"  title="">Donald Duck</a>
                  </li>
                  <li onclick="toggle('N0_0_1_1','P0_0_11');" class="folder" id="P0_0_11">
                     <a class="treeview" href = "#" target="main_frame" onclick="toggle('N0_0_1_1','P0_0_11')">Minnie Mouse</a>
                     <ul style="border:1px dotted red" class="tree" id="N0_0_1_1">
                        <li class="members">
                           <a class="treeview" href="#" target="main_frame"  title="">Minnie Mouse</a>
                        </li>
                        <li class="members">
                           <a class="treeview" href="#" target="main_frame"  title="">Daffy Duck</a>
                        </li>
                        <li class="members">
                           <a class="treeview" href="#" target="main_frame"  title="">Bugs Bunny</a>
                        </li>   
                     </ul>   
                  </li>
               </ul>   
            </li>
         </ul>
      </li>
   </ul>
</body>
</html>



[monkey][snake] <.
 
Upvote 0 Downvote
Mate, this is perfect, I only put the borders in for illustration of the problem I was having.

Many Thanks

Nick
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
926
PeDa
PeDa
PeDa
  • Locked
  • Question Question
Horizontal rule and CSS problem
Replies
2
Views
1K
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top