Thursday, 12 September 2013

Nested lists and percentages

Nested lists and percentages

It's an agreed-upon notion that it's good to keep your design and
functionality separate. Fine. Let's take the separation between HTML and
CSS in this case, and in particular the organisation of a menu hierarchy.
The problem with nested <ol>, <ul> and <li> is that they seem to be
completely counterintuitive to style based on percentage (in a
responsively designed setting).
My Problem:
I have a list that is a few layers deep, like so:
<ul>
<li>
<a>Item 1</a>
<ul>
<li>
<a>Submenu 1</a>
<ul>
<li>
<a>Submenu 1 (1)<a>
</li>
<li>
<a>Submenu 1 (2)<a>
</li>
<li>
<a>Submenu 1 (3)<a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Let's say I wanted to style this list in a way that was relative or
absolute to the body of the document, for purposes of responsive web
design. So I style the top ul with a means to continue down the list:
body > ul{
position:relative;
width:20%;
}
All very well. But what if I then need to subsequently give absolute
positions or relative widths/heights to <li>'s nested deeper in the list?
They now adhere to the percentage styles of the top-level <ul> (because it
has been defined as relative). This basically means they need to be
individually styled and calculated if I want all of the list items to be
the same size compared to the window. The subsequent lists cannot be given
the same percentage styling as the top, they need to be
doubled/halved/bastardized.
This seems completely counter-intuitive to the whole process of separating
style and form. The form (HTML) should determine the relationship of the
data, while the style (CSS) should determine the visualisation and offer
the ability to 'disjoint' the form in any way that it sees fit.
My Questions:
Is it possible to ignore a parent coordinate space that has been defined
as fixed/relative/absolute such that 100% means 100% of the body?
Am I missing something in the philosophy behind the HTML/CSS relationship,
and how best to utilise it?
If I continue with web-development, will I have torn all my hair out by
the age of 35?
Disclaimer:
I'm looking for an answer that can bring me inner-peace, not a single fix
for a single browser. If the answer is "it can't be done", then explain
why and how happy you are about the fact that it can't be done.

No comments:

Post a Comment