![](/i/fill.gif) |
![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |