Sent by Brian Lowe on 22 March 2005 11:11
I'm trying to represent a hierarchical structure similar to a node-tree like
you might see in a desktop application browsing the file system.
I've discarded the default list-image and I'm using a background image on
the LI element. This way my mark-up remains uncluttered and 'standard'
HTML/XHTML so my non-CSS users still get a good layout.
For example, the last node at the 4th level of nesting will be indented 4
times and will have no 'lines' other than the terminating corner belonging
to itself. (See node B.1.a.i below)
By contrast, a node at the 4th level where each ancestor has several
descendents will have a 'line' passing down vertically corresponding to each
level in the ancestry, linking siblings at that level. (See node A.1.a.i
below)
-@ root (li)
|
+-@ Node A (li)
| |
| +-@ Node A.1 (li li)
| | |
| | +-@ Node A.1.a (li li li:last-child) | | | | | | | +-@ Node A.1.a.i
(li li li li:last-child) | | | | | +-@ Node A.1.b (li li li:last-child) |
| | +- Node A.2 (li li:last-child)
| |
| +-@ Node A.2.a (li li:last-child li:last-child)
| |
| +-@ Node A.2.a.i (li li:last-child li:last-child li:last-child)
|
+-@ Node B (li:last-child)
|
+-@ Node B.1 (li:last-child li:last-child)
|
+-@ Node B.1.a (li:last-child li:last-child li:last-child)
|
+-@ Node B.1.a.i (li:last-child li:last-child li:last-child
li:last-child)
So far I've been able to get the background image applied to the correct
node in the tree, but positioning the background image is proving to be a
problem.
If I set a negative margin or set the background-position to a negative
value to cause the image to start at the far left, the image is shifted by
the correct amount but does not show up outside of the element's indented
box.
I want to to show outside the box, lining up with other li elements.
I have published the page and a couple of images so you can see the problem.
Please get the page from http://www.ajpi.co.uk/cssproblem.htm
I've tried everything I can think of to get the image to show up and locate
correctly. Now I'm asking for help.
Brian Lowe
---------@
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
