Richard Riley <rileyrg...@googlemail.com> writes: > Sebastian Rose <sebastian_r...@gmx.de> writes: > >> Richard Riley <rileyrg...@googlemail.com> writes: >>> Sebastian Rose <sebastian_r...@gmx.de> writes: >>> >>>> Richard Riley <rileyrg...@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 _______________________________________________ Emacs-orgmode mailing list Remember: use `Reply All' to send replies to the list. Emacs-orgmode@gnu.org http://lists.gnu.org/mailman/listinfo/emacs-orgmode