Tuning the layout of published html

Tuning the layout of published html

[Jarmo Hurri]

Greetings.

I am writing teaching material (for programming) using Org. All the
material (text, figures, code, program outputs) are written using Org
and Babel-supported languages. Publishing to html works just fine. What
I would like to do, however, is to add some layout structure to the
produced html.

More specifically, I would like to add, on all pages, a navigation bar
on the left-hand side and a title bar with no functionality on the top
of each page.

What options do I have to accomplish this? Searches led me to "derived
backends," but they sound like an overkill for a task that is this
simple. Or?

Jarmo

Re: Tuning the layout of published html

[Christian Moe]

Hi,

No need for derived backends.

You could just add both the title bar and the navigation bar in the HTML
preamble to each page, and position the different parts as needed with
CSS.

If you're using Org's publishing function, define a :html-preamble in
org-publish-project-alist. 

Yours,
Christian


Jarmo Hurri writes:

> Greetings.
>
> I am writing teaching material (for programming) using Org. All the
> material (text, figures, code, program outputs) are written using Org
> and Babel-supported languages. Publishing to html works just fine. What
> I would like to do, however, is to add some layout structure to the
> produced html.
>
> More specifically, I would like to add, on all pages, a navigation bar
> on the left-hand side and a title bar with no functionality on the top
> of each page.
>
> What options do I have to accomplish this? Searches led me to "derived
> backends," but they sound like an overkill for a task that is this
> simple. Or?
>
> Jarmo

Re: Tuning the layout of published html

[Eric S Fraga]

On Tuesday, 19 Jul 2016 at 13:09, Jarmo Hurri wrote:
> More specifically, I would like to add, on all pages, a navigation bar
> on the left-hand side and a title bar with no functionality on the top
> of each page.

You are probably looking for cascading style sheets (CSS) for the
HTML.  org's HTML export already tags everything of note so you may
be able to achieve what you want with careful style choices.

You might like to look at the example web pages at

http://orgmode.org/worg/org-web.html

-- 
: Eric S Fraga (0xFFFCF67D), Emacs 25.0.94.1, Org release_8.3.4-1049-g481709

Re: Tuning the layout of published html

[Josiah Schwab]

On 19 July 2016 at 13:35 GMT, Eric S Fraga wrote:

> On Tuesday, 19 Jul 2016 at 13:09, Jarmo Hurri wrote:
>> More specifically, I would like to add, on all pages, a navigation bar
>> on the left-hand side and a title bar with no functionality on the top
>> of each page.
>
> You are probably looking for cascading style sheets (CSS) for the
> HTML.  org's HTML export already tags everything of note so you may
> be able to achieve what you want with careful style choices.

I agree with Eric (and now Christian) that is the way to go.

Personally, I have enjoyed using the styles in Fabrice Niessen's
org-html-themes, especially

https://github.com/fniessen/org-html-themes#readtheorg

It already has some similarities to the layout you describe.

Hope that helps,
Josiah

Re: Tuning the layout of published html

[Robert Klein]

Hi,
Jarmo Hurri <jarmo.hurri@iki.fi> wrote:

> I am writing teaching material (for programming) using Org. All the
> material (text, figures, code, program outputs) are written using Org
> and Babel-supported languages. Publishing to html works just fine.
> What I would like to do, however, is to add some layout structure to
> the produced html.
> 
> More specifically, I would like to add, on all pages, a navigation bar
> on the left-hand side and a title bar with no functionality on the top
> of each page.
> 
> What options do I have to accomplish this? Searches led me to "derived
> backends," but they sound like an overkill for a task that is this
> simple. Or?

You can use the preamble and postamble features for this.

You'd have to edit the navigation bar manually, though.

Example preamble (file: html/preamble.html):
--- snip ---
<!-- I'm the html/preamble.html file -->
  <p class="alignleft"><a href="index.html">Home</a></p>
  <p class="alignright"><a href="imprint.html">Imprint</a></p>
</div> <!--  force closing of org-supplied preamble-div --> 
<div class="colmask leftmenu">
  <div class="colleft"><!-- = outer nested divs -->
    <div class="col1wrap">
      <div class="col1">
        <!-- Column 1 start = main content -->
        <!-- h1 class="title">%t</h1 -->
        <div id="apreambletoclose"> <!-- fool preamble for the one
        closed above -->
--- snip ---

Example postamble file:
<!-- I'm the html/postamble.html file -->
</div> <!-- closing the postamble div I can't use, here -->

          <!-- Column 1 end -->
        </div><!-- / #col1 -->
      </div> <!-- / #col1wrap -->
      <div class="col2">
        <!-- Column 2 start = left/running sidebar -->
        <p><strong>Contents</strong></p>
        <ul class="navmain">
          <li><a href="index.html">main page</a></li>
          <li class="nolink"><strong>Heading</strong></li>
          <li><a href="impressum.html">imprint</a></li>
        </ul> -->
        <!-- Column 2 end -->
      </div><!-- / #col2 -->
      
      
      <!-- end outer nested divs -->
    </div><!-- / #colleft -->
  </div><!-- / #colmask -->
<div class="footer">
  <p>&copy; 2012&ndash;2015 Robert Klein</p>
</div>
<div id="apostambletoclose"> <!-- fool postamble for the one closed
above -->
--- snip ---


Preamble and postamble functiond in .emacs:
--- snip ---
;; pre- and postamble for html export
(defun my-preamble (options)
  (with-temp-buffer
    (insert-file-contents "~/projects/myprj/html/preamble.html")
(buffer-string)))

(defun xyzzys-postamble (options)
  (with-temp-buffer
    (insert-file-contents "~/projects/myprj/html/postamble.html")
    (buffer-string)))
--- snip ---

project-alist excerpt(in .emacs, too):
--- snip ---
(add-to-list 'org-publish-project-alist
             '("myprj-html"
               :base-directory "~/projects/myprj"
               :base-extension "org"
               :publishing-directory "~/public_html/myprj"
               :publishing-function org-html-publish-to-html
               :html-head "<link rel=\"stylesheet\" type=\"text/css\"
href=\"css/myprj.css\" />" :html-head-include-default-style nil
               :html-head-include-scripts nil
               :html-preamble my-preamble
               :html-postamble my-postamble
--- snip ---


A lot depends on the CSS.  I'm dumping one here, not a very good one...

---snip---
/* 
  a lot of stuff is from Matthew James Taylor's ultimate 2 column
  left menu layout.
  */

body {
    margin: 0 auto;
    padding: 0; /* 0 5em 0; */
    /* padding for the footer is in colmask */
    /* border: 0; */
    width: 100%;
    /* max-width: 40em; */
    /* line-height: 1.4; */
    /* background: #fff; */
    background: #fffaf0; /* floralwhite */ /* whitesmoke; #f5f5f5 */
    font-size:100%;
    color: #000;
    text-align: justify;
    /* font-family: "Linux Libertine", Georgia, serif; */
    font-family: wfSourceSansPro, serif;
    display: block;
}

code {
    font-family: wfSourceCodePro, monospace;
    font-size: 90%;
}


/* if i use a breadcrumb again */
#breadcrumb {
    float:left;
    width:100%;
    padding:.1em 0 ;
    margin:0;
    background-color: #eee;
    font-size: small;
/* border-bottom: 4px solid #75A838; */
}
#breadcrumb p {
    padding:0;
    margin:0;
}

#preamble {
    clear: both;    /* nothing to the left or right of the header */
    float: none;    /* essentially the same */
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: mintcream;
    font-size: small;
    border-bottom:1px solid gainsboro; /* #7ca6a6; */ /* solid #000; */
    /* Fixed header at the top of the screen. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    height: 1.5em;
    /* letter-spacing: 0.1em; */
    /* background: none repeat scroll 0 0; */
/*    border-bottom: 1px dotted #7ca6a6; */
}


#preamble p {
    margin:0;
    padding: .2em 1em .2em 1em;
    /* space above text and below letters g and y. */
}

.alignright { float: right; }
.alignleft { float: left; }

/* Here begins Matthew James Taylor's 2 ultimate 2 column layout.  I
   removed anything left over from the other layouts as well as stuff
   which would allow me to reuse the components (that is, I can use
   only one liquid layer per page) */


/* column container */
/* I use only colmask instead of colmask and leftmenu. Doesn't make
   a difference if I use only this 2-column layout */
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
    /* background color for the fixed (navigation) column.  Note: this
       also requires the color for the main column to be set in
       .colleft, so the main column doesn't get the background of the
       this column. */
    background-color: OldLace; /*linen; /* whitesmoke */
    padding-top: 1.5em; /* padding for the header/preamble */
    padding-bottom: 1.5em; /* padding for the footer */
}

.colleft {
    float: left;
    width:200%;
    position:relative;
    left: 2em;
    background-color: #fffaf0; /* floralwhite */
    border-left: 1px dotted silver; /* for roklein */
}

.col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:12em;
    padding-bottom:1em;
}

/* #content is col1 of Matthew James Taylor's ultimate 2 column left
   menu layout. */

#content {
    margin:0 1em 1em 13em;  /* bottom 1 em is for the fixed footer */
    position:relative;
    right:100%;
    overflow:hidden;
}
.col2 {
    float:left;
    width:1em;
    position:relative;
    right:2em;
}

/* end of Matthew Taylors layout */


.header {
    clear:both;
    float:left;
    width:100%;
    margin:0;
    background-color: #eee;
    font-size: small;
    border-top:1px solid gainsboro; /* #7ca6a6; */  /* solid #000; */
    /* Fixed footer at the bottom of the screen. */
    position: fixed;
    top: 0px;
}

/* #postamble nicht verwenden!!! */

.footer {
        clear:both;
    float:left;
    width:100%;
    margin:0;
    background-color: mintcream;
    font-size: small;
    border-top:1px solid gainsboro; /* #7ca6a6;*/  /* solid #000; */
    /* Fixed footer at the bottom of the screen. */
    position: fixed;
    bottom: 0px;
}

.footer p {
    margin:0;
    padding: .2em 1em .2em 1em;
    /* space above text and below letters g and y. */
}


/* navigation using lists. */
ul.navmain {
    list-style: none;
    padding-left: 0;
}
ul.nav {
    list-style: none;
    padding-left: 0;
}
ul.navmain > li {
    background:  url('../imgs/red_arrow.gif') 0 0 no-repeat;
    list-style: none;
    padding: 0 0 0 15px;
}
ul.nav > li {
    background:  url('../imgs/red_arrow.gif') 0 0 no-repeat;
    list-style: none;
    padding: 0 0 0 15px;
}
ul.navmain > li.nolink {
    background: none;
    list-style: none;
    padding: .7em 0 .3em 0;
}
ul.nav > li.nolink {
    background: none;
    list-style: none;
    padding: .5em 0 .2em 0; /* 15; */
}
ul.navmain > li.submenu {
        background: none;
        list-style: none;
        padding: 0.2em 0 0.2em 15px;
}
ul.navinner {
    padding-left: 1em;
    /* background-color: yellow; */
    list-style: disc inside url('../imgs/red_arrow.gif');
}
/* end of navigation */



/* standard markup for headers and paragraphs */
#content > h1 {  /* former h1.title */
    text-align: center;
/*    font-size: large; */
    font-weight: bold;
    padding: .75em 1em;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: wfSourceSansPro;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #eee; /* underline headline */
}

#content h2 {
    font-size: 110%;
    font-style: bold;
}

#content h4 {
    font-size: 100%;
    font-style: bold;
}
/* end of standard markup */


/* org-mode coloring.  I included the org-info.js stuff, even if I
   don't use it. */

.title  { text-align: center; }
.todo   { color: red; }
.done   { color: green; }
.tag    { background-color: #add8e6; font-weight:normal }
.target { }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.right  {margin-left:auto; margin-right:0px;  text-align:right;}
.left   {margin-left:0px;  margin-right:auto; text-align:left;}
.center {margin-left:auto; margin-right:auto; text-align:center;}
p.verse { margin-left: 3% }
pre {
    border: 1pt solid #AEBDCC;
    background-color: cornsilk; /*#fdf5e6; /* OldLace */
    font-family: wfSoureCodePro, monospace;
    font-size: 80%;
    overflow:auto;
    margin:0.5em 1em 0.5em auto;
    padding:1em;

}

/* pre.src { background-color:#E8E8E8;
        border:1px inset;
        color:#4d3e32;
        font-family: "monospace";
        font-size: 100%;
        line-height:1.5;
    margin:0.5em 1em 0.5em auto; 
        max-height:700px;
        overflow:auto;
        padding:1em;} */
table { border-collapse: collapse; }
td, th { vertical-align: top; padding-right: 0.75em; padding-left:
0.75em; } th.right  { text-align:center;  }
th.left   { text-align:center;   }
th.center { text-align:center; }
td.right  { text-align:right;  }
td.left   { text-align:left;   }
td.center { text-align:center; }
dt { font-weight: bold; }
div.figure { padding: 0.5em; }
div.figure p { text-align: center; }
div.inlinetask {
    padding:10px;
    border:2px solid gray;
    margin:10px;
    background: #ffffcc;
}

table.grid {
    border: 1px black solid;
}
table.grid  td {
    padding: 0.25em;
    border: 1px gray solid;
}

table.grid  th {
    padding: 0.25em;
    border: 1px gray solid;
}

textarea { overflow-x: auto; }
/* .linenr { font-size:smaller } */
.code-highlighted {background-color:#ffff00;}
.org-info-js_info-navigation { border-style:none; }
#org-info-js_console-label { font-size:10px; font-weight:bold;
                             white-space:nowrap; }
.org-info-js_search-highlight {background-color:#ffff00; color:#000000;
                               font-weight:bold; }
/* end of org-mode coloring */

--- snip ---


Does this help a bit?

Best regards
Robert

Re: Tuning the layout of published html

[Scott Randby]

On 07/19/2016 09:09 AM, Jarmo Hurri wrote:
>
> Greetings.
>
> I am writing teaching material (for programming) using Org. All the
> material (text, figures, code, program outputs) are written using Org
> and Babel-supported languages. Publishing to html works just fine. What
> I would like to do, however, is to add some layout structure to the
> produced html.
>
> More specifically, I would like to add, on all pages, a navigation bar
> on the left-hand side and a title bar with no functionality on the top
> of each page.
>
> What options do I have to accomplish this? Searches led me to "derived
> backends," but they sound like an overkill for a task that is this
> simple. Or?
>
> Jarmo
>
>
>

I don't know if I can answer your questions, but I used to do something 
similar to what you want using Org and CSS. I had a navigation list at 
the top and a fixed table of contents. There are some disadvantages to 
this setup and I no longer use it.

I still have some pages up which use this setup. You can see these pages 
by clicking on the following link:

   http://srandby.org/ictcm-2014/index.html

To get the navigation list, I had the following at the top of the Org 
file before any headlines (two items are not used in the above page):

#+BEGIN_HTML
<!-- Begin navigation list -->
<div id="nav">
   <ul>
     <li><a href="./home.html" title="Home page">Home</a></li>
     <li><a href="./lessons.html" title="Lessons">Lessons</a></li>
     <li><a href="./help.html" title="Help">Help</a></li>
   </ul>
</div>
<!-- End navigation list -->
#+END_HTML

In the CSS file for the page, I had the following code to style the list:

/* Navigation List Styles Begin */
div #nav {
   position: absolute;
   left: 10px;
   top: 5em;
}

#nav ul {
   margin: 3px 10px 10px 5px;
   list-style: none outside none;
   padding: 0px 0px 0px 0px;
}

#nav ul li {
   margin-right: 4px;
   margin-bottom: 5px;
   float: left;
   margin-top: 20px;
}

#nav a {
   color: white;
   background-color: navy;
   padding: 5px;
   text-decoration: none;
   font-weight: bold;
   border: 5px solid blue;
   border-radius: 10px;
}
/* Navigation List Styles End */

It is easy to place the table of contents generated by Org wherever you 
want it using CSS. Here is to CSS code I used to style the table of 
contents. This code is sloppy.

#table-of-contents {
   font-size: small;
   position: fixed;
   right: 1em;
   top: 0.5em;
   background-image: url(./styleimages/toc-back.jpg);
   border-radius: 10px;
   height: 5em;
   max-height: 15%;
   width: 18em;
   overflow: auto;
   z-index: 1;
   border: 5px solid seagreen;
}
#table-of-contents h2 {
   font-size: medium;
   color: springgreen;
   font-style: oblique;
   text-align: center;
   margin-right: 15px;*/
   margin-top: 5px;
   margin-bottom: 5px;
   border-bottom: 0px solid silver;
   padding-top: 0px;
   padding-left: 0px;
   margin-left: 0px;
   margin-right: 0px;
}
#table-of-contents ul {
   color: aqua;
   list-style-type: disc;
   float: none;
   margin-left: 0px;
   margin-bottom: 0px;
}
#table-of-contents li {
   margin-bottom: 0px;
}
#table-of-contents a {
   color: white;
   font-weight: bold;
}
#table-of-contents #text-table-of-contents {
   display: block;
   text-align: left;
   padding-left: 0px;
   padding-right: 0px;
   margin-left: 10px;
   margin-right: 5px;
   margin-bottom: 10px;
}

Re: Tuning the layout of published html

[Marcin Borkowski]

On 2016-07-19, at 15:09, Jarmo Hurri <jarmo.hurri@iki.fi> wrote:

> Greetings.
>
> I am writing teaching material (for programming) using Org. All the
> material (text, figures, code, program outputs) are written using Org
> and Babel-supported languages. Publishing to html works just fine. What
> I would like to do, however, is to add some layout structure to the
> produced html.
>
> More specifically, I would like to add, on all pages, a navigation bar
> on the left-hand side and a title bar with no functionality on the top
> of each page.
>
> What options do I have to accomplish this? Searches led me to "derived
> backends," but they sound like an overkill for a task that is this
> simple. Or?

I don't know about other ways, but a derived backend /can/ be really
simple -- you might as well use the "derived backend" feature to modify
just the page template.  You'd probably have to look at the
`org-html-template' function and write your version of it.

> Jarmo

Best,

-- 
Marcin Borkowski
http://octd.wmi.amu.edu.pl/en/Marcin_Borkowski
Faculty of Mathematics and Computer Science
Adam Mickiewicz University

Re: Tuning the layout of published html

[Jarmo Hurri]

Greetings.

> No need for derived backends.
>
> You could just add both the title bar and the navigation bar in the
> HTML preamble to each page,

Can do that.

> and position the different parts as needed with CSS.

This is where I don't know what exactly is going to happen. Org writes
quite a bit of CSS in each exported HTML file. If I add in, say, a
vertical navigation bar, how am I going to control its placement with
respect to everything else that is already in the CSS?

I can start my trial and error -period...

Thanks!

Jarmo

Re: Tuning the layout of published html

[Jarmo Hurri]

Robert Klein <roklein@roklein.de> writes:

> You can use the preamble and postamble features for this.
>
> You'd have to edit the navigation bar manually, though.
>
> Example preamble (file: html/preamble.html):
> ...
> Does this help a bit?

Yes it does, but it is impossible for me to tell which parts of these
files are really necessary to achieve the desired result. But I will
start experimenting.

Thanks!

Jarmo

Re: Tuning the layout of published html

[Jarmo Hurri]

Eric S Fraga <e.fraga@ucl.ac.uk> writes:

> On Tuesday, 19 Jul 2016 at 13:09, Jarmo Hurri wrote:
>> More specifically, I would like to add, on all pages, a navigation
>> bar on the left-hand side and a title bar with no functionality on
>> the top of each page.
>
> You are probably looking for cascading style sheets (CSS) for the
> HTML.  org's HTML export already tags everything of note so you may
> be able to achieve what you want with careful style choices.

I guess "careful" is the operative word here. Unfortunately I feel like
I am inserting new stuff into ready-to-eat spaghetti. ;-)

> You might like to look at the example web pages at
>
> http://orgmode.org/worg/org-web.html

I took a look at some of those. The unfortunate thing is that most of
them are not accompanied by source code.

All the best,

Jarmo

Re: Tuning the layout of published html

[Robert Klein]

Hi,
Jarmo Hurri <jarmo.hurri@iki.fi> wrote:

> 
> Robert Klein <roklein@roklein.de> writes:
> 
> > You can use the preamble and postamble features for this.
> >
> > You'd have to edit the navigation bar manually, though.
> >
> > Example preamble (file: html/preamble.html):
> > ...
> > Does this help a bit?
> 
> Yes it does, but it is impossible for me to tell which parts of these
> files are really necessary to achieve the desired result. But I will
> start experimenting.


I'll try to put together something more cohesive...

Best regards
Robert

Re: Tuning the layout of published html

[Scott Randby]

On 07/19/2016 10:27 AM, Jarmo Hurri wrote:

>
> This is where I don't know what exactly is going to happen. Org writes
> quite a bit of CSS in each exported HTML file. If I add in, say, a
> vertical navigation bar, how am I going to control its placement with
> respect to everything else that is already in the CSS?
>
> I can start my trial and error -period...

If you put the following line in your Org file, then the exported HTML 
will use only your CSS.

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style.css">

Scott

Re: Tuning the layout of published html

[Scott Randby]

On 07/19/2016 09:59 AM, Robert Klein wrote:
> You can use the preamble and postamble features for this.

This solves a problem that has been bugging me for some time. All I need 
to do is use the preamble to solve my problem. Why didn't I think of 
that sooner?

Scott Randby

Re: Tuning the layout of published html

[Christian Moe]

Jarmo Hurri writes:

>> and position the different parts as needed with CSS.
>
> This is where I don't know what exactly is going to happen. Org writes
> quite a bit of CSS in each exported HTML file. If I add in, say, a
> vertical navigation bar, how am I going to control its placement with
> respect to everything else that is already in the CSS?

Say you put the navbar at the end of the HTML preamble and give it a
#navbar id (<div id="navbar">). Org already gives the main content a
#content id. Then this should be all the CSS you need to get started:

#navbar { float: left;
          ...loads more CSS here...
          }
#content { float: left;
           ...and more CSS here...
           }

Yours,
Christian

Re: Tuning the layout of published html

[Eric Abrahamsen]

Robert Klein <roklein@roklein.de> writes:

> Hi,
> Jarmo Hurri <jarmo.hurri@iki.fi> wrote:
>
>> I am writing teaching material (for programming) using Org. All the
>> material (text, figures, code, program outputs) are written using Org
>> and Babel-supported languages. Publishing to html works just fine.
>> What I would like to do, however, is to add some layout structure to
>> the produced html.
>> 
>> More specifically, I would like to add, on all pages, a navigation bar
>> on the left-hand side and a title bar with no functionality on the top
>> of each page.
>> 
>> What options do I have to accomplish this? Searches led me to "derived
>> backends," but they sound like an overkill for a task that is this
>> simple. Or?
>
> You can use the preamble and postamble features for this.

[...]

> A lot depends on the CSS.  I'm dumping one here, not a very good one...

FWIW, this seems like a perfect place to use flexboxes, where the actual
location of the elements in the document matters a bit less...

Re: Tuning the layout of published html

[Jarmo Hurri]

Eric Abrahamsen <eric@ericabrahamsen.net> writes:

> Robert Klein <roklein@roklein.de> writes:
>
>> Jarmo Hurri <jarmo.hurri@iki.fi> wrote:
>>
>>> More specifically, I would like to add, on all pages, a navigation bar
>>> on the left-hand side and a title bar with no functionality on the top
>>> of each page.
>>
>> You can use the preamble and postamble features for this.
>
> [...]
>
>> A lot depends on the CSS.  I'm dumping one here, not a very good one...
>
> FWIW, this seems like a perfect place to use flexboxes, where the actual
> location of the elements in the document matters a bit less...

A quick search on flexboxes looks promising indeed. I guess it would be
possible to open a flexbox div in preamble and close it in
postamble. Or maybe I can make the body of the page a flexbox in the
CSS?

Jarmo

Re: Tuning the layout of published html

[Jarmo Hurri]

Christian Moe <mail@christianmoe.com> writes:

> Jarmo Hurri writes:
>
>>> and position the different parts as needed with CSS.
>>
>> This is where I don't know what exactly is going to happen. Org writes
>> quite a bit of CSS in each exported HTML file. If I add in, say, a
>> vertical navigation bar, how am I going to control its placement with
>> respect to everything else that is already in the CSS?
>
> Say you put the navbar at the end of the HTML preamble and give it a
> #navbar id (<div id="navbar">). Org already gives the main content a
> #content id. Then this should be all the CSS you need to get started:
>
> #navbar { float: left;
>           ...loads more CSS here...
>           }
> #content { float: left;
>            ...and more CSS here...
>            }

Yes indeed, something like this seems to work.

For anyone embarking on a similar trip, a tight placement of the
horizontal title bar on top of the page requires, among other things,
something along the following lines in your CSS:

body
{
    margin: 0;
}

All the best,

Jarmo

Re: Tuning the layout of published html

[Eric Abrahamsen]

Jarmo Hurri <jarmo.hurri@iki.fi> writes:

> Eric Abrahamsen <eric@ericabrahamsen.net> writes:
>
>> Robert Klein <roklein@roklein.de> writes:
>>
>>> Jarmo Hurri <jarmo.hurri@iki.fi> wrote:
>>>
>>>> More specifically, I would like to add, on all pages, a navigation bar
>>>> on the left-hand side and a title bar with no functionality on the top
>>>> of each page.
>>>
>>> You can use the preamble and postamble features for this.
>>
>> [...]
>>
>>> A lot depends on the CSS.  I'm dumping one here, not a very good one...
>>
>> FWIW, this seems like a perfect place to use flexboxes, where the actual
>> location of the elements in the document matters a bit less...
>
> A quick search on flexboxes looks promising indeed. I guess it would be
> possible to open a flexbox div in preamble and close it in
> postamble. Or maybe I can make the body of the page a flexbox in the
> CSS?

Yep, it's all doable from CSS alone. So long as the elements you want to
align are siblings (and can be uniquely selected) that's all you need.