POV-Ray : Newsgroups : povray.off-topic : Web page construction Server Time
4 Sep 2024 01:18:01 EDT (-0400)
  Web page construction (Message 16 to 25 of 35)  
<<< Previous 10 Messages Goto Latest 10 Messages Next 10 Messages >>>
From: Invisible
Subject: Re: Web page construction
Date: 14 Sep 2010 04:03:20
Message: <4c8f2c48$1@news.povray.org>
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

From: Invisible
Subject: Re: Web page construction
Date: 14 Sep 2010 04:04:12
Message: <4c8f2c7c$1@news.povray.org>
>> 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

From: Invisible
Subject: Re: Web page construction
Date: 14 Sep 2010 04:07:29
Message: <4c8f2d41$1@news.povray.org>
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

From: Phil Cook v2
Subject: Re: Web page construction
Date: 14 Sep 2010 06:31:35
Message: <op.vi0p66qlmn4jds@phils>
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

From: Invisible
Subject: Re: Web page construction
Date: 14 Sep 2010 07:33:06
Message: <4c8f5d72$1@news.povray.org>
>> 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

From: Francois Labreque
Subject: Re: Web page construction
Date: 14 Sep 2010 08:47:49
Message: <4c8f6ef5$1@news.povray.org>

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

From: Phil Cook v2
Subject: Re: Web page construction
Date: 14 Sep 2010 12:15:36
Message: <op.vi054jw4mn4jds@phils>
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

From: Orchid XP v8
Subject: Re: Web page construction
Date: 14 Sep 2010 13:22:43
Message: <4c8faf63$1@news.povray.org>
>>> .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

From: nemesis
Subject: Re: Web page construction
Date: 14 Sep 2010 13:55:17
Message: <4c8fb705$1@news.povray.org>
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

From: Phil Cook v2
Subject: Re: Web page construction
Date: 15 Sep 2010 04:03:32
Message: <op.vi2d0ggcmn4jds@phils>
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

<<< Previous 10 Messages Goto Latest 10 Messages Next 10 Messages >>>

Copyright 2003-2023 Persistence of Vision Raytracer Pty. Ltd.