 |
|
|
|
|
|
| |
| |
|
|
|
|
| |
| |
|
|
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
|
|
| |
| |
|
|
|
|
| |
|
|
