Sliding Notes HowTo – Centered Button With 1.0 Series

Dan asked me today how to accomplish a centered slider button/title, while keeping the note content left-aligned. While I try to work out a neater solution, I’d like to present to the impatient a way to do it right away, with the current version of Sliding Notes (1.0rc5), taking Dan’s example as a foundation. It’s a bit involved in the sense that it takes editing some HTML first, but it’s a feasible way to go nonetheless (and after setting up the HTML structure, the visual editor can be used as well).

Dan’s been using a 1×1 table to wrap the sliding note and make it float to the left. His HTML code1 is:

<table border="0" width="320" align="right">
<tbody>
<tr>
<td>[SLIDER title="Click Here for Page Outline and Notes"]What’s on this page:
(1) I provide some important reminders and strategy we already discussed
(2) a strategy outline for newbies
(3) some thoughts on copyright and content and
(4) my closing remarks.
After you read, please provide comments/feedback at the bottom of page.[/SLIDER]</td>
</tr>
</tbody></table>

 
The key is to center the table cell and wrapp the note itself in a right-aligned DIV element, like this:2
 

<table border="0" width="320" align="right">
<tbody>
<tr>
<td align="center">[SLIDER title="Click Here for Page Outline and Notes"]
<div align="left">What’s on this page:
(1) I provide some important reminders and strategy we already discussed
(2) a strategy outline for newbies
(3) some thoughts on copyright and content and
(4) my closing remarks.
After you read, please provide comments/feedback at the bottom of page.</div>[/SLIDER]</td>
</tr>
</tbody></table>

 
The result:

1. In the HTML code samples, I had to write “slider” in uppercase, to prevent the slider from actually showing. Of course, your real HTML code needs to write it in lowercase. [↩]
2. You may also use a paragraph tag, <P>, but that’s subject to paragraph spacing, which might not be what you want. [↩]

Comments are closed.