X-posted to opera.page-authoring, because this is a bit Opera-specific for
the moment. F'up to ciwas.
I am playing around with dedicated styling for the projection media type..
Currently the only browser to support it is Opera, which uses projection
when in full-screen mode.
On a website I maintain (http://www.jules-verne.nl/), I have set up some
special styles for projection. Not that this specific website really needs
it, but I'm just trying to get some experience before starting to do my
professional presentations this way.
Some of the things I do are fairly straightforward: a larger font size,
sans-serif font, having the h1 of each page display as a full-width
coloured header, idem for copyright and last modified info in the footer,
etc.
Another thing I did, which took some more trial and error, was to put the
navigation menu as a popup menu in the lower left corner. In the end, I
made this work, although I haven't yet looked at accessibility for
keyboard navigation. Basically, the menu is in a special div like this:
<div id="menu">
<h1>Navigation menu</h1>
<ul>
... menu ...
</ul>
</div>
I fix the header in the lower left corner of the screen:
div#menu h1 { display: block; position: fixed; bottom: 0; left: 0;
height: 2em; width: 10.5em; }
and put the menu above it:
#menu ul { position: fixed; bottom: 2.5em; left: 0; width: 13.2em; }
Now I hide the menu until the h1 is hovered, and keep the menu displayed
as long as it is hovered:
#menu ul { display: none; }
#menu h1:hover + ul { display: block; }
#menu ul:hover { display: block; }
(That same menu is displayed as a sidebar on the left in screen media, as
a normal list at the bottom of the page in handheld, and not at all in
print.)
The next thing I wanted to try is page breaks. Just as an experiment, I
put a
h2, h3 { page-break-before: always; }
in my projection CSS. This makes a new "slide" start at each h2 or h3. I
think if a document is well structured, you don't need special <div
class="slide"along with div.slide { page-break-before: always; }.
Now the page breaking in itself works great, but there's a strange effect
on the menu ul. Look for example at <http://www.jules-verne.nl/>: at the
first page, the menu shows up as it should, but after a few PageDowns, it
loses its background colour and its fixed position at the bottom left.
I created a test document without h2 and h3
<http://www.jules-verne.nl/test.html>. There are no page breaks here, and
the document just scrolls vertically at PageDown. Now the menu stays where
it is, and looks good even after PageDowning all the way to the end of the
document.
I would expect a block element that is fixed at bottom: 0 and left: 0 to
stay there. And all block-level descendants should be positioned with
respect to this fixed box, right? But it doesn't seem to happen like that
in Opera.
Is there something I'm overlooking here? Or is this a bug in Opera?
--
Garmt de Vries-Uiterweerd
