 |
|
|
|
|
|
| |
| |
|
|
|
|
| |
| |
|
|
OK, here's a couple of little questions that somebody here might know
the answer to...
1. Suppose I have something like
<h1>Introduction</h2>
<p class='buttons'><a href="javascript:ShowHide()">(Show/hide)</a></p>
<div id='intro'>
...real content...
Without any CSS, this renders as something like
Introduction
(Show/hide)
...real content...
Is there some way I can style it so that it shows up more like
Introduction
(Show/hide)
...real content...
or even
Introduction (Show/hide)
...real content...
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
...
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Le 12/09/2010 14:21, Orchid XP v8 nous fit lire :
> OK, here's a couple of little questions that somebody here might know
> the answer to...
>
> 1. Suppose I have something like
>
> <h1>Introduction</h2>
you meant </h1>, right ?
> <p class='buttons'><a href="javascript:ShowHide()">(Show/hide)</a></p>
> <div id='intro'>
> ...real content...
>
> Without any CSS, this renders as something like
>
> Introduction
>
>
> (Show/hide)
>
> ...real content...
>
> Is there some way I can style it so that it shows up more like
>
> Introduction
> (Show/hide)
>
>
> ...real content...
>
> or even
>
> Introduction (Show/hide)
>
>
> ...real content...
>
> If so, how do I do it?
without css ? in plain html 1.0 ? No chance without breaking some bits.
<p> will always force a line-feed/spacing
<h..> is alone on its line.
<h1>Introduction <a href="...">(Show/hide)</a></h1>
is the best you can have. (with a <br/> before starting the <a> if you
want, but I do not like it.)
Now, if you want to show/hide the <div>, why do you need to do that
outside the div itself ? And why javascript ?
if it is not done with css, rather show it always and do not display the
hide/display mechanism.
BTW:
<h1>Introduction</h1> (that's bad, as only 1 h1 per page, so, unless the
page's object is introduction (to what ?).. you got a content's issue.
<h1>Subject of page</h1>
<h2>Introduction</h2>
is probably better.
>
>
>
> 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
> ...
>
You need to tag your date & attribute (with span), and have the css to
position them at absolute horizontal position (in em or ex! or you will
get issue with fontsize/resize by user)
That way, you nest your <ul><li>, and each line (<li>) got its semantic.
<ul>
<li>Root<span class="datum">2009-09-12</span><span
class="attributes">Ahsc</span><ul>
<li>Resources<span class="datum">2009-09-12</span><span
class="attributes">Ahsc</span><ul>
<li>Main.css<span class="datum">2009-09-12</span><span
class="attributes">Ahsc</span></li>
<li>Main.js<span class="datum">2009-09-12</span><span
class="attributes">Ahsc</span></li>
</ul></li>
<li>Packages<span class="datum">2009-09-12</span><span
class="attributes">Ahsc</span><ul>
<li>ansi-terminal<span class="datum">2009-09-12</span><span
class="attributes">Ahsc</span></li>
...
</ul></li>
</ul></li></ul>
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> OK, here's a couple of little questions that somebody here might know
>> the answer to...
>>
>> 1. Suppose I have something like
>>
>> <h1>Introduction</h2>
>
> you meant </h1>, right ?
Uh, yes.
>> If so, how do I do it?
>
> without css ? in plain html 1.0 ? No chance without breaking some bits.
Oh, no, I meant "what CSS do I need to apply to make this happen?"
> Now, if you want to show/hide the <div>, why do you need to do that
> outside the div itself ? And why javascript ?
It's outside so that hiding it doesn't also hide the button that unhides
it. ;-) As for "why JavaScript"... um, what other possibilities exist?!
> BTW:
>
> <h1>Introduction</h1> (that's bad, as only 1 h1 per page, so, unless the
> page's object is introduction (to what ?).. you got a content's issue.
>
> <h1>Subject of page</h1>
> <h2>Introduction</h2>
>
> is probably better.
Well, yes, it's an incomplete page fragment.
>> 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
>> ...
>>
> You need to tag your date & attribute (with span), and have the css to
> position them at absolute horizontal position.
> That way, you nest your <ul><li>, and each line (<li>) got its semantic.
OMG, that works?? o_O
I thought absolute positioning only allows you to position an item
absolutely with respect to the browser window. I didn't think you could
make just *one* coordinate absolute. (And even then, I thought the
coordinates are relative to the browser window, not the page.)
Clearly some research is required...
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Le 12/09/2010 17:58, Orchid XP v8 nous fit lire :
>>> OK, here's a couple of little questions that somebody here might know
> Clearly some research is required...
>
My favorite source of information for web-design.
http://www.alistapart.com/
Do not hesitate to use the right margin for Topics search
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Orchid XP v8 <voi### [at] dev null> wrote:
> OK, here's a couple of little questions that somebody here might know
> the answer to...
>
> 1. Suppose I have something like
>
> <h1>Introduction</h2>
> <p class='buttons'><a href="javascript:ShowHide()">(Show/hide)</a></p>
> <div id='intro'>
> ...real content...
>
> Without any CSS, this renders as something like
>
> Introduction
>
>
> (Show/hide)
>
> ...real content...
>
> Is there some way I can style it so that it shows up more like
>
> Introduction
> (Show/hide)
>
>
> ...real content...
* { padding: 0; margin: 0; }
div { margin-top: 3em; }
> or even
>
> Introduction (Show/hide)
>
>
> ...real content...
* { padding: 0; margin: 0; }
h1, .buttons { display: inline; }
div { margin-top: 3em; }
> 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.
no, the obvious way in this day and age is to just use jQuery:
http://jquery.org/
like:
http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery
And if you are fed up with web design and web pages and want to develop web apps
instead, go for http://cappuccino.org/
Both big, damn-useful and open-source frameworks of pure cross-platform
javascript glory. No doubt one of the most relevant languages today...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 12/09/2010 07:12 PM, nemesis wrote:
> * { padding: 0; margin: 0; }
> div { margin-top: 3em; }
Turn off margins on *everything*? Isn't that a little OTT?
>> 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.
>
> no, the obvious way in this day and age is to just use jQuery:
>
> http://jquery.org/
Um... JQuery is a library for writing JavaScript. How is that relevant
to building a static web page?
> like:
>
http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery
So... you transform the page on the client-side? Why in the name of God
would you do that?
> And if you are fed up with web design and web pages and want to develop web apps
> instead, go for http://cappuccino.org/
No. I am merely building static pages, not complex web apps.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 12/09/2010 01:21 PM, Orchid XP v8 wrote:
> Introduction
> (Show/hide)
>
>
> ...real content...
Apparently, you can use the position: property for this. This property
has several possible values, almost none of which do what their names
suggest:
position: static is the normal flow-based positioning (?!)
position: relative lets you shift an element in relation to its usual
position (without affecting anything else around it).
position: fixed fixes the element's position relative to the browser window.
position: absolute fixes the element's position relative to the first
enclosing element who's position: attribute isn't static (usually the
entire page (!!))
So, by enclosing the entire section in some kind of block-level element
and setting its position to "relative" (but not actually moving it), you
can then set the show/hide button to "absolute", which then allows you
to position it *relative* to the enclosing block (WTF?) Best of all, the
rest of the flow now behaves as if that button wasn't there.
Only trouble is, now I've gone from having too much space to having not
enough... >_<
> or even
>
> Introduction (Show/hide)
>
>
> ...real content...
As far as I can tell, this is impossible.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 13/09/2010 04:01 PM, Invisible wrote:
>> Introduction (Show/hide)
>>
>>
>> ...real content...
>
> As far as I can tell, this is impossible.
"This next test is impossible..."
I guess that was pretty much guaranteed to result in abject failure, eh?
Apparently simply setting
h1 {display: inline;}
somehow *doesn't* make <h1> display inline, but if you also make the
following <p> tag inline, the correct result is obtained. I have
absolutely no idea why the hell that works, and whether it works in all
browsers or whether it's just a Firefox bug.
(As an aside, IE7 seems totally unable to display this particular XHTML
page at well, which is weird...)
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Invisible escreveu:
> On 12/09/2010 07:12 PM, nemesis wrote:
>
>> * { padding: 0; margin: 0; }
>> div { margin-top: 3em; }
>
> Turn off margins on *everything*? Isn't that a little OTT?
yes, but does exactly what your example needed.
In any case, it's very common to find that rule in most css files and
then specify padding/margin per element in need.
>>> 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.
>>
>> no, the obvious way in this day and age is to just use jQuery:
>>
>> http://jquery.org/
>
> Um... JQuery is a library for writing JavaScript. How is that relevant
> to building a static web page?
You wanted a file tree to collapse or expand tree nodes and that is best
served on the client via javascript.
>> like:
>>
http://homework.nwsnet.de/news/ea21_turn-nested-lists-into-a-collapsible-tree-with-jquery
>>
>
> So... you transform the page on the client-side? Why in the name of God
> would you do that?
so you don't need to waste bandwidth?
Think GMail: they serve a mostly static page containing complex
javascript that then occasionally asks the server to check for new data
and then have those small data changes served rather than process lots
of html and server side languages just to serve a tiny bit of changed data.
--
a game sig: http://tinyurl.com/d3rxz9
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Invisible escreveu:
> On 13/09/2010 04:01 PM, Invisible wrote:
>
>>> Introduction (Show/hide)
>>>
>>>
>>> ...real content...
>>
>> As far as I can tell, this is impossible.
>
> "This next test is impossible..."
>
> I guess that was pretty much guaranteed to result in abject failure, eh?
>
> Apparently simply setting
>
> h1 {display: inline;}
>
> somehow *doesn't* make <h1> display inline, but if you also make the
> following <p> tag inline, the correct result is obtained. I have
> absolutely no idea why the hell that works, and whether it works in all
> browsers or whether it's just a Firefox bug.
http://www.w3.org/TR/CSS2/visuren.html#display-prop
It's "inline" in relation to previous element. But h1 in your code has
no previous element. p has h1 as previous element, and thus get inlined
next to h1 when it too gets display:inline.
> (As an aside, IE7 seems totally unable to display this particular XHTML
> page at well, which is weird...)
no, weird is to expect IE to be able to display standards-compliant
content. Sometimes it does, most times doesn't.
--
a game sig: http://tinyurl.com/d3rxz9
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Apparently simply setting
>>
>> h1 {display: inline;}
>>
>> somehow *doesn't* make <h1> display inline, but if you also make the
>> following <p> tag inline, the correct result is obtained. I have
>> absolutely no idea why the hell that works, and whether it works in
>> all browsers or whether it's just a Firefox bug.
>
> http://www.w3.org/TR/CSS2/visuren.html#display-prop
>
> It's "inline" in relation to previous element. But h1 in your code has
> no previous element. p has h1 as previous element, and thus get inlined
> next to h1 when it too gets display:inline.
Hmm, so why doesn't the next heading tag get inlined into the previous
paragraph?
>> (As an aside, IE7 seems totally unable to display this particular
>> XHTML page at well, which is weird...)
>
> no, weird is to expect IE to be able to display standards-compliant
> content. Sometimes it does, most times doesn't.
It's not that it displays it *wrong*, it just point-blank refuses to
open it at all. Like it doesn't understand what XHTML is or something...
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Turn off margins on *everything*? Isn't that a little OTT?
>
> yes, but does exactly what your example needed.
>
> In any case, it's very common to find that rule in most css files and
> then specify padding/margin per element in need.
Well, yes, I suppose the other possibility is to override *everything*,
so that I know that the spacing will be the same on all browsers, so I
only need to test it on one...
>> Um... JQuery is a library for writing JavaScript. How is that relevant
>> to building a static web page?
>
> You wanted a file tree to collapse or expand tree nodes and that is best
> served on the client via javascript.
Oh, right. I was planning to use JS to expand and collapse the tree, not
to actually *generate* it.
>> So... you transform the page on the client-side? Why in the name of
>> God would you do that?
>
> so you don't need to waste bandwidth?
Not really relevant here.
If you generate a static page, then if JS is unavailable for some
reason, the tree itself will at least display. You just won't be able to
collapse it. If you use JS to actually generate the tree, then with no
JS you see nothing. (And search engines can't index it either, because
they can't see client-side generated content. Not that *that* is
particularly relevant for this project either...)
> Think GMail:
I'm not building GMail. Thankfully!
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Le 13/09/2010 21:56, Orchid XP v8 nous fit lire :
>>> Turn off margins on *everything*? Isn't that a little OTT?
>>
>> yes, but does exactly what your example needed.
>>
>> In any case, it's very common to find that rule in most css files and
>> then specify padding/margin per element in need.
>
> Well, yes, I suppose the other possibility is to override *everything*,
> so that I know that the spacing will be the same on all browsers, so I
> only need to test it on one...
You are far too optimistic.
(and even IE has a glitch mode: the very same document can be rendered
with either the standard html+css or the old html engine... all
triggered by some fancy first line... in doubt, it revert to old engine!)
If you keep feature to minimum, you have hope... but stay away of round
corner, shadows and other "new" things. I guess that even table is a
doomed tag. (and do not ask for fancy bullet in any list...)
And firefox might display an xml document when served by a server, but
not as a file:// (and if the xlt are not on the same server, it won't
allow it!)
And YMMV with each subversion of each browser!
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Orchid XP v8 escreveu:
>>> Apparently simply setting
>>>
>>> h1 {display: inline;}
>>>
>>> somehow *doesn't* make <h1> display inline, but if you also make the
>>> following <p> tag inline, the correct result is obtained. I have
>>> absolutely no idea why the hell that works, and whether it works in
>>> all browsers or whether it's just a Firefox bug.
>>
>> http://www.w3.org/TR/CSS2/visuren.html#display-prop
>>
>> It's "inline" in relation to previous element. But h1 in your code
>> has no previous element. p has h1 as previous element, and thus get
>> inlined next to h1 when it too gets display:inline.
>
> Hmm, so why doesn't the next heading tag get inlined into the previous
> paragraph?
because paragraphs are display:block by default?
--
a game sig: http://tinyurl.com/d3rxz9
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Orchid XP v8 escreveu:
> Oh, right. I was planning to use JS to expand and collapse the tree, not
> to actually *generate* it.
>
>>> So... you transform the page on the client-side? Why in the name of
>>> God would you do that?
>>
>> so you don't need to waste bandwidth?
>
> Not really relevant here.
>
> If you generate a static page, then if JS is unavailable for some
> reason, the tree itself will at least display.
I was thinking you were planning to generate a new tree server-side
everytime the user wanted to expand/collapse the tree.
You indeed can generate the tree server-side. What's the problem with
nested ul's again?
--
a game sig: http://tinyurl.com/d3rxz9
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 13/09/2010 10:14 PM, nemesis wrote:
> You indeed can generate the tree server-side. What's the problem with
> nested ul's again?
I want the other columns (e.g., timestamp, attributes, owner, etc.) to
line up vertically.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Hmm, so why doesn't the next heading tag get inlined into the previous
>> paragraph?
>
> because paragraphs are display:block by default?
True - but that still doesn't explain how the spacing is still correct.
(I.e., there's more space around a heading than there is around a
paragraph.)
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 13/09/2010 09:15 PM, Le_Forgeron wrote:
> You are far too optimistic.
Well that's officially a first! ;-)
> (and even IE has a glitch mode: the very same document can be rendered
> with either the standard html+css or the old html engine... all
> triggered by some fancy first line... in doubt, it revert to old engine!)
Yes, all modern browsers appear to do this. If there's no declaration
saying what version of HTML/XHTML/XML this document is, the browser goes
into "quirks mode", where it attempts to emulate the broken behaviour of
obsolete browsers, which old web pages sometimes depend on. If you put
in all the proper declarations, you get standards-compliance mode. (And
if you don't put in those declarations, the W3C validator complains
bitterly.)
The puzzling thing is that W3C designed it so you can't just write a
line that says "this is XHTML v1". You have to put in half a dozen lines
reiterating this information...
> And firefox might display an xml document when served by a server, but
> not as a file:// (and if the xlt are not on the same server, it won't
> allow it!)
So far, Firefox has displayed everything I've asked of it. The same
cannot be said for IE...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Sun, 12 Sep 2010 13:21:32 +0100, Orchid XP v8 <voi### [at] devnull>
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
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Is there some way I can style it so that it shows up more like
>>
>> Introduction
>> (Show/hide)
>>
>>
>> ...real content...
>
> .h1 {margin-bottom:0}
Wouldn't that mean that the margin between the header and the real
content would now be incorrect?
>> or even
>>
>> Introduction (Show/hide)
>>
>>
>> ...real content...
>
> As nemesis states
> .h1 {display: inline}
Yeah, that's what I went with ultimately.
> 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.
I always try to design my pages so that if you totally disable all CSS,
it still displays sensibly. It might not be pretty, but it's readable.
Then I apply CSS to make it pretty.
Not sure you need to use ".indent"; why not just "li ul" or something?
Anyway, absolute positioning seems to work fine, but for the minor
detail that I need to figure out how wide the columns are supposed to be...
Also, whenever I try to open an XHTML document in IE (v7), it asks me
what application I want to use it open it with, and defaults to Firefox.
I can't seem to convince it to open it. The best I can do is get it to
display a blank page.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Le 2010-09-14 04:04, Invisible a écrit :
>>> Hmm, so why doesn't the next heading tag get inlined into the previous
>>> paragraph?
>>
>> because paragraphs are display:block by default?
>
> True - but that still doesn't explain how the spacing is still correct.
> (I.e., there's more space around a heading than there is around a
> paragraph.)
Because both <h1>'s and <p>'s margin-top and margin-bottom are 1ex; in
height, but since usually <h1> uses a bigger font, its margin will be
bigger.
--
/*Francois Labreque*/#local a=x+y;#local b=x+a;#local c=a+b;#macro P(F//
/* flabreque */L)polygon{5,F,F+z,L+z,L,F pigment{rgb 9}}#end union
/* @ */{P(0,a)P(a,b)P(b,c)P(2*a,2*b)P(2*b,b+c)P(b+c,<2,3>)
/* gmail.com */}camera{orthographic location<6,1.25,-6>look_at a }
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Tue, 14 Sep 2010 12:33:05 +0100, Invisible <voi### [at] devnull> did
spake thusly:
>>> Is there some way I can style it so that it shows up more like
>>>
>>> Introduction
>>> (Show/hide)
>>>
>>>
>>> ...real content...
>>
>> .h1 {margin-bottom:0}
>
> Wouldn't that mean that the margin between the header and the real
> content would now be incorrect?
Should still conform to line-height
<snip>
> I always try to design my pages so that if you totally disable all CSS,
> it still displays sensibly. It might not be pretty, but it's readable.
> Then I apply CSS to make it pretty.
>
> Not sure you need to use ".indent"; why not just "li ul" or something?
Because the first ul isn't indented and it allows you to create an extra
indent for a third level if needed without messing with child indicators
that IE doesn't understand.
> Anyway, absolute positioning seems to work fine, but for the minor
> detail that I need to figure out how wide the columns are supposed to
> be...
I try to avoid absolute positioning when possible, just because it takes
things out of the flow. if I have to use it I ensure it's well-wrapped,
but even then there can be some glitches where the positioning relates to
the first parent that specifies a position rather than its container.
> Also, whenever I try to open an XHTML document in IE (v7), it asks me
> what application I want to use it open it with, and defaults to Firefox.
> I can't seem to convince it to open it. The best I can do is get it to
> display a blank page.
Well I know they separated out online and offline content between two
windows, perhaps its related to that?
--
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
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>>> .h1 {margin-bottom:0}
>>
>> Wouldn't that mean that the margin between the header and the real
>> content would now be incorrect?
>
> Should still conform to line-height
> <snip>
I didn't think inline elements could have margins?
>> Not sure you need to use ".indent"; why not just "li ul" or something?
>
> Because the first ul isn't indented and it allows you to create an extra
> indent for a third level if needed without messing with child indicators
> that IE doesn't understand.
Ah. So the answer to "why not use child selectors" is simply "IE doesn't
understand child selectors"? Oh I *so* don't give a damn. :-P
>> Anyway, absolute positioning seems to work fine, but for the minor
>> detail that I need to figure out how wide the columns are supposed to
>> be...
>
> I try to avoid absolute positioning when possible, just because it takes
> things out of the flow. if I have to use it I ensure it's well-wrapped,
> but even then there can be some glitches where the positioning relates
> to the first parent that specifies a position rather than its container.
Yeah, it looks like styling this correctly is going to be fun... Still,
at this point, I'm still getting the page content to be generated
correctly. Assuming I tag enough stuff, it should be possible to fiddle
with the CSS later.
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Invisible escreveu:
> On 13/09/2010 10:14 PM, nemesis wrote:
>
>> You indeed can generate the tree server-side. What's the problem with
>> nested ul's again?
>
> I want the other columns (e.g., timestamp, attributes, owner, etc.) to
> line up vertically.
see Phill Cook's reply
--
a game sig: http://tinyurl.com/d3rxz9
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Tue, 14 Sep 2010 18:22:43 +0100, Orchid XP v8 <voi### [at] devnull>
did spake thusly:
>>>> .h1 {margin-bottom:0}
>>>
>>> Wouldn't that mean that the margin between the header and the real
>>> content would now be incorrect?
>>
>> Should still conform to line-height
>> <snip>
>
> I didn't think inline elements could have margins?
No it's just that the default is 0 for inline elements but some differ.
>>> Not sure you need to use ".indent"; why not just "li ul" or something?
>>
>> Because the first ul isn't indented and it allows you to create an extra
>> indent for a third level if needed without messing with child indicators
>> that IE doesn't understand.
>
> Ah. So the answer to "why not use child selectors" is simply "IE doesn't
> understand child selectors"? Oh I *so* don't give a damn. :-P
Ah well they do work for IE7 so ul>ul would have been neater.
>>> Anyway, absolute positioning seems to work fine, but for the minor
>>> detail that I need to figure out how wide the columns are supposed to
>>> be...
>>
>> I try to avoid absolute positioning when possible, just because it takes
>> things out of the flow. if I have to use it I ensure it's well-wrapped,
>> but even then there can be some glitches where the positioning relates
>> to the first parent that specifies a position rather than its container.
>
> Yeah, it looks like styling this correctly is going to be fun... Still,
> at this point, I'm still getting the page content to be generated
> correctly. Assuming I tag enough stuff, it should be possible to fiddle
> with the CSS later.
Well the benefit to the way I've done it is that it keeps the flow. That
is the third column will be positioned by default behind the second column
with no extra styling so you only need to set the sizes to indent+width
for everything to line up.
--
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
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 12/09/2010 01:21 PM, Orchid XP v8 wrote:
> 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
> ...
Facepalm moment: Using CSS, you can render any element AS A TABLE! >_<
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Tue, 21 Sep 2010 21:59:13 +0100, Orchid XP v8 <voi### [at] devnull>
did spake thusly:
> On 12/09/2010 01:21 PM, Orchid XP v8 wrote:
>
>> 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
>> ...
>
> Facepalm moment: Using CSS, you can render any element AS A TABLE! >_<
Well yeah that was going to be my first response, but you wanted the
columns offset within rows and that would have ended up just as messy as
absolute positioning.
--
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
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Facepalm moment: Using CSS, you can render any element AS A TABLE! >_<
>
> Well yeah that was going to be my first response, but you wanted the
> columns offset within rows and that would have ended up just as messy as
> absolute positioning.
Well, I can make it so that a <ul> who's <li> elements contain multiple
<span> tags gets rendered as a regular table. What I *cannot* do is make
nested <ul> elements render correctly. Not for love nor money.
I can, however, take a <table> and annotate each <tr> with a style class
indicating how far to indent it, and get a result that looks exactly
like what I want.
So I have a choice here: The information I want to present is
semantically tabular *and* hierarchical. I can mark it up as <ul> (which
lets be expose the hierarchy but hides the tabular nature in <span>
tags), or I can mark it up as <table> (which exposes the tabular
structure but hides the hierarchy in style class declarations).
I think I'm going to go with <table>, simply because it lets me actually
achieve the rendering result I want. Sure, tables are evil. OTOH, my
data actually *is* a table! So putting it in <table> isn't that much of
a hack.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Wed, 22 Sep 2010 10:35:08 +0100, Invisible <voi### [at] devnull> did
spake thusly:
> I think I'm going to go with <table>, simply because it lets me actually
> achieve the rendering result I want. Sure, tables are evil. OTOH, my
> data actually *is* a table! So putting it in <table> isn't that much of
> a hack.
Well yeah if it's tabular data present it in a table nothing evil about
that well unless you're going to use nested tables just for display
purposes that's frowned upon; and if you're not then you're going to have
to style every single cell and that's just messy.
--
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
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 22/09/2010 10:50 AM, Phil Cook v2 wrote:
> And lo On Wed, 22 Sep 2010 10:35:08 +0100, Invisible <voi### [at] devnull> did
> spake thusly:
>
>> I think I'm going to go with <table>, simply because it lets me
>> actually achieve the rendering result I want. Sure, tables are evil.
>> OTOH, my data actually *is* a table! So putting it in <table> isn't
>> that much of a hack.
>
> Well yeah if it's tabular data present it in a table nothing evil about
> that well unless you're going to use nested tables just for display
> purposes that's frowned upon; and if you're not then you're going to
> have to style every single cell and that's just messy.
Nested tables won't even help me here. And no, I don't need to style
every single cell. I just style each row (so I can get alternating
colours) and each cell in column 1 (so I can set the indent). And since
the whole table will be machine-generated anyway...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 22/09/2010 10:52 AM, Invisible wrote:
> Nested tables won't even help me here. And no, I don't need to style
> every single cell. I just style each row (so I can get alternating
> colours) and each cell in column 1 (so I can set the indent). And since
> the whole table will be machine-generated anyway...
Only remaining problem is how to expand/collapse subtrees (now that a
subtree isn't a single XML element any more). I'm sure it's solvable.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Wed, 22 Sep 2010 10:52:30 +0100, Invisible <voi### [at] devnull> did
spake thusly:
> On 22/09/2010 10:50 AM, Phil Cook v2 wrote:
>> And lo On Wed, 22 Sep 2010 10:35:08 +0100, Invisible <voi### [at] devnull> did
>> spake thusly:
>>
>>> I think I'm going to go with <table>, simply because it lets me
>>> actually achieve the rendering result I want. Sure, tables are evil.
>>> OTOH, my data actually *is* a table! So putting it in <table> isn't
>>> that much of a hack.
>>
>> Well yeah if it's tabular data present it in a table nothing evil about
>> that well unless you're going to use nested tables just for display
>> purposes that's frowned upon; and if you're not then you're going to
>> have to style every single cell and that's just messy.
>
> Nested tables won't even help me here. And no, I don't need to style
> every single cell. I just style each row (so I can get alternating
> colours) and each cell in column 1 (so I can set the indent). And since
> the whole table will be machine-generated anyway...
tr:nth-child(odd){background-color:red;}
tr:nth-child(even){background-color:blue;}
Seeing as you don't care about IE :-)
As for column 1 styling how will that line up the dates? You'll need to
line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
and then do the same for column 2.
--
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
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> Nested tables won't even help me here. And no, I don't need to style
>> every single cell. I just style each row (so I can get alternating
>> colours) and each cell in column 1 (so I can set the indent). And
>> since the whole table will be machine-generated anyway...
>
> tr:nth-child(odd){background-color:red;}
> tr:nth-child(even){background-color:blue;}
>
> Seeing as you don't care about IE :-)
That works? Impressive... (As you say, it's only taken 10 years!)
> As for column 1 styling how will that line up the dates? You'll need to
> line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
> and then do the same for column 2.
Just adjust the padding property for column one. The other columns
automatically line up, the way they always do in a table.
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Wed, 22 Sep 2010 11:34:03 +0100, Invisible <voi### [at] devnull> did
spake thusly:
>> As for column 1 styling how will that line up the dates? You'll need to
>> line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
>> and then do the same for column 2.
>
> Just adjust the padding property for column one. The other columns
> automatically line up, the way they always do in a table.
Well would you look at that. You learn something new every day.
--
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
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 22/09/2010 02:05 PM, Phil Cook v2 wrote:
> And lo On Wed, 22 Sep 2010 11:34:03 +0100, Invisible <voi### [at] devnull> did
> spake thusly:
>
>>> As for column 1 styling how will that line up the dates? You'll need to
>>> line up column 1 of rows 2 and 5, and then column 1 of rows 3, 4, and 6
>>> and then do the same for column 2.
>>
>> Just adjust the padding property for column one. The other columns
>> automatically line up, the way they always do in a table.
>
> Well would you look at that. You learn something new every day.
See, that's what's so awesome about this newsgroup. ;-)
--
http://blog.orphi.me.uk/
http://www.zazzle.com/MathematicalOrchid*
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
|
|
