|
 |
And lo On Sun, 12 Sep 2010 13:21:32 +0100, Orchid XP v8 <voi### [at] dev null>
did spake thusly:
> OK, here's a couple of little questions that somebody here might know
> the answer to...
<snip>
> Is there some way I can style it so that it shows up more like
>
> Introduction
> (Show/hide)
>
>
> ...real content...
.h1 {margin-bottom:0}
> or even
>
> Introduction (Show/hide)
>
>
> ...real content...
As nemesis states
.h1 {display: inline}
> If so, how do I do it?
>
>
>
> 2. I want to build a file tree where you can collapse or expand tree
> nodes. The obvious way to do this is with the <ul> element. However, I
> also want each file to have attributes, a creation date, and so forth,
> and all these columns should line up vertically. The obvious way to do
> that is with a table. But it can't be a table and a list at the same
> time!
>
> I could use nested tables I suppose, but nested tables are EVIL! Is
> there some more semantically-transparent way that I can do this?
>
> Root 2009-09-12 Ahsc
> Resources 2009-09-10 Ahsc
> Main.css 2009-09-10 Ahsc
> Main.js 2009-09-10 Ahsc
> Packages 2009-09-12 Ahsc
> ansi-terminal 2009-09-12 Ahsc
> ...
Other than using absolute positioning why not:
<!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>
<style>
ul, li {list-style-type: none; margin: 0px; padding: 0px;}
span {width: 100px; display:inline-block;}
.indent{margin-left: 100px;}
.col1 {margin-left: 200px;}
.col2 {margin-left: 100px;}
</style>
</head>
<body>
<ul>
<li><span>Root</span><span
class="col1">2009-09-12</span><span>Ahsc</span></li>
<ul class="indent">
<li><span>Resources</span><span
class="col2">2009-09-10</span><span>Ahsc</span></li>
<ul class="indent">
<li><span>Main.css</span><span>2009-09-10</span><span>Ahsc</span></li>
<li><span>Main.js</span><span>2009-09-10</span><span>Ahsc</span></li>
</ul>
<li><span>Packages</span><span
class="col2">2009-09-12</span><span>Ahsc</span></li>
<ul class="indent">
<li><span>ansi-terminal</span><span>2009-09-12</span><span>Ahsc</span></li>
</ul>
</ul>
</ul>
</body>
</html>
Works in IE7, Firefox, Opera and Chrome. I mean technically you don't need
the ul li as you're indenting manually, but it does keep it tidy both in
code and for text readers.
--
Phil Cook
--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com
Post a reply to this message
|
|
