emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Sebastian Rose <sebastian_rose@gmx.de>
To: Richard Riley <rileyrgdev@googlemail.com>
Cc: org-mode <emacs-orgmode@gnu.org>
Subject: Re: export and containers
Date: Mon, 02 Mar 2009 17:50:15 +0100	[thread overview]
Message-ID: <87fxhvvph4.fsf@kassiopeya.MSHEIMNETZ> (raw)
In-Reply-To: <49abef4e.0437560a.1ed0.52f0@mx.google.com> (Richard Riley's message of "Mon, 02 Mar 2009 15:38:05 +0100")

Richard Riley <rileyrgdev@googlemail.com> writes:
> Sebastian Rose <sebastian_rose@gmx.de> writes:
>
>> Richard Riley <rileyrgdev@googlemail.com> writes:
>>> Sebastian Rose <sebastian_rose@gmx.de> writes:
>>>
>>>> Richard Riley <rileyrgdev@googlemail.com> writes:
>>>>> It's been a while since I've looked at my org set up. One thing that
>>>>> always struck me as a bit hacky was my use of
>>>>>
>>>>> :preamble "<div id='content'>
>>>>>
>>>>> and the corresponding postamble to enclose the exported web pages into a
>>>>> "container" div. Is there a better way to do this? I would think it
>>>>> would be a common enough need that by default or via an option all html
>>>>> should be enclosed in a "webcontainer" ID.
>>>>
>>>> While one container around everything makes it possible to center the
>>>> page horizontally, two containers make it possible to center the page
>>>> vertically as well.
>>>>
>>>> If we would go and change the structure once again, I'd even suggest the
>>>> following:
>>>>
>>>> <body>
>>>>   <div id="percent-50">         -- center the page if desired
>>>>     <div id="wrap">             -- center the page if desired
>>>
>>> Why always IDs as opposed to classes?
>>
>>
>> `percent-50' and `wrap' are there for a special purpose and unique in
>> that concern. `wrap' is the `content' you originally requested. I did
>> not use my brain and called it `wrap' without any annotation.
>
> "content" or "org-container". Wrap made no sense to me. It suggests word
> wrap in the context. wrapper would be better. Purely vocabulary issue.
>
>>
>>>>> :preamble "<div id='content'>
>>
>> I'd say they should have an ID assigned.
>
> Just an academic question : Why not a class?



Because it's supposed to be the exact entity, that contains exact all
the other stuff and shares no styles but those all <div> elements and
<body> share. A user could add another container "<div class='content'>"
and break the page layout.

But as no browser seems to force the uniquety of IDs, it doesn't yet
make a difference really.




>>> Can css selectors select based on a part of a name? If not then there is
>>> no link between column-1 and column-2. e.g in this convention how does
>>> one create a common style for all columns or all "sec-" objects?
>>
>> Aaah, OK, sorry for being unclear - a misunderstanding.
>>
>> I did *not* mean to _change_ the structure of the XHTML in it's
>> current
>
> FYI I have abandoned xhtml in the smalle bit of web UI I touch.. It is
> not cross platform/browser. Common concensus says make it html 4.01
> strict compliant.



I can't tell that, and I touch quite some UIs. XHTML is more rigid
though. Case sensitive and so on. It's what WEB-programming always was:
fiddling with different browsers, each of which having it's own
`standard' and finding the Lowest Common Denominator...
It doesn't really have to do anything with programming, where things
usually are well defined even accross different plattforms.

But I can say, that XHTML is just as crossbrowser as HTML. Validating
helps a lot though. 


>> form, but simply _add_ additional containers to partition the whole
>> thing (just as you suggested) and thus make it possible to move certain
>> groups of content around through CSS.
>>
>> All the "sec-" objects should go into `column-2'.
>
> I dont know/understand what you mean with "columns".
>
> Columns suggest layout in columns. It should simply be a "wrapper". That
> wrapper may or may not be CSSd to a column. It might be a float or a
> fixed position or .....


Yes, sorry - those where stupid names...


>> All the `sec-' objects share classes via the containers they live in:
>>
>>     <div id="outline-container-2" class="outline-2">
>>     <div id="outline-container-2.1" class="outline-3">
>>
>> etc.
>
> Yes. Thats what I was suggesting but see later on regarding css descendants.
>
>>
>> That's already the case, and I think we don't need to change that.
>>
>
> There is still this difference between ID and class name. I'm not sure I
> see why.


Hmm - let's see...

Each of the elements has a class assigned, that is common to those on
the same level.

Some of them have an additional ID that makes it possible to address
exactly that very element:

<div id="outline-container-4.1" class="outline-3">
<h3 id="sec-4.1"><span class="section-number-3">4.1</span> Pi </h3>
<div class="outline-text-3" id="text-4.1">

The headline `PI' is no different from other headlines in the document
from JavaScript's or XML-Tools point of view. What makes the element
special, is just it's ID.

There could be a headline `PI' on the same level in any other Section of
the document. That's why we need the ID.

Sure you may use CSS-selectors like this, to style all the level 3 <p>
elements:

.outline-text-3 p
{
  color:green;
}





>>
>> * Suggestions for names
>>
>>   `wrap' is, what they use in typolight and some other CMSs. But
>>   `content' sounds good to me too.
>>
>>   <div id="center">
>>     <div id="wrap"><!-- or `content' -->
>>
>>       <div id="box-1">
>>         <div id="table-of-contents">
>>          ...
>>         </div>
>>       </div><!-- end of box-1 -->
>>
>>       <div id="box-2">
>
> where is the "base" class for box-2?
>
> The issue I see is that theres no way using this method to change all
> "sec-" entries in an outline container for example since you cant use
> css descendants since all have *unique* class names and IDs.


Hihi, I just see what you mean (below). I seem to have no luck in
answering your mails ;-)

In this example below it seems that `outline-2' has the `2' in it's class
name, because it's the class of the container that holds section 2. But
that's not true. Sorry for being so stupid.
Each container on depth 2 has this class name assigned.
So you may change the number in all IDs and the section number to 14.


>>         <div id="outline-container-2" class="outline-2">
>>           <h2 id="sec-1"><span class="section-number-2">2</span> Konfiguration </h2>
>>           <div class="outline-text-2" id="text-2">
>
> and another div here is what?
>
>
> ,----
> | >           <div class="outline-text-2" id="text-3">
> `----
>
> ?

My next being unclear :-/

I'd better copy and paste from real exported stuff:

<div id="outline-container-6" class="outline-2">
  <h2 id="sec-6"><span class="section-number-2">6</span> Computer </h2>
  <div class="outline-text-2" id="text-6">
     content of section 6
  </div>

  <div id="outline-container-6.1" class="outline-3">
    <h3 id="sec-6.1"><span class="section-number-3">6.1</span> Linux </h3>
    <div class="outline-text-3" id="text-6.1">
       content of section 6.1
    </div>
  </div>

  <div id="outline-container-6.2" class="outline-3">
    <h3 id="sec-6.2"><span class="section-number-3">6.2</span> Linux </h3>
    <div class="outline-text-3" id="text-6.2">
       content of section 6.2
    </div>
  </div>

</div>


> I'm not sure I understand the need for the container container. Maybe I
> need to Google up centering vertically.


Hrm, just ignore me. We can center the page vertically without an additional
container.


Regard,

  Sebastian

--
Sebastian Rose, EMMA STIL - mediendesign, Niemeyerstr.6, 30449 Hannover
Tel.:  +49 (0)511 - 36 58 472
Fax:   +49 (0)1805 - 233633 - 11044
mobil: +49 (0)173 - 83 93 417
Http:  www.emma-stil.de

      reply	other threads:[~2009-03-02 16:47 UTC|newest]

Thread overview: 25+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2009-02-28 10:29 Richard Riley
2009-02-28 11:37 ` Sebastian Rose
2009-02-28 19:23   ` Carsten Dominik
2009-02-28 21:09     ` Sebastian Rose
2009-03-02  8:03   ` Richard Riley
2009-03-02  9:29     ` Sebastian Rose
2009-03-02 11:11       ` Carsten Dominik
2009-03-02 11:58         ` Sebastian Rose
2009-03-02 13:10           ` Carsten Dominik
2009-03-02 16:00             ` Sebastian Rose
2009-03-02 17:03               ` Carsten Dominik
2009-03-02 18:12                 ` Richard Riley
2009-03-02 18:56                   ` Sebastian Rose
2009-03-02 20:22                     ` Richard Riley
2009-03-03  0:52                       ` Sebastian Rose
2009-03-03  1:16                         ` Richard Riley
2009-03-03 10:02                           ` Carsten Dominik
2009-03-03 10:14                             ` Sebastian Rose
2009-03-03 10:50                               ` Carsten Dominik
2009-03-03 10:57                             ` Sebastian Rose
2009-03-02 19:03                   ` Sebastian Rose
2009-03-02 18:54                 ` Sebastian Rose
2009-03-02 19:06                   ` Sebastian Rose
2009-03-02 14:38       ` Richard Riley
2009-03-02 16:50         ` Sebastian Rose [this message]

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: https://www.orgmode.org/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=87fxhvvph4.fsf@kassiopeya.MSHEIMNETZ \
    --to=sebastian_rose@gmx.de \
    --cc=emacs-orgmode@gnu.org \
    --cc=rileyrgdev@googlemail.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
Code repositories for project(s) associated with this public inbox

	https://git.savannah.gnu.org/cgit/emacs/org-mode.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).