Sliding Notes HowTo – Centered Button With 1.0 Series

Dec 19, 2008   //   by Hackadelic   //   WordPress  //  No Comments
This entry is part of a series, Sliding Notes Advice»

Carte au TrésorDan 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>
CAVEAT: 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.

 
The result:

Click Here for Page Outline and Notes»

Lorem ipsum at eros primis audiam quo, facete alterum blandit eu mei. Te iudicabit imperdiet est, corpora consequat prodesset eos in, eum nonumy fabulas quaestio ei. Tibique argumentum ea cum, usu wisi mazim no. Brute dicant integre ad pro, adhuc iuvaret lobortis ei nam, augue definitiones concludaturque mel id. In duo solum diceret constituam, pro altera eligendi ea, populo explicari scribentur ea vel. Eam vidit dolore veritus ex, ut mei aperiri placerat reprimique. Cu simul soluta discere duo, affert quando neglegentur ne duo.

  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. []

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.
Powered by Hackadelic Sliding Notes 1.6.5

Comments are closed.

Blog Categories

I have come here to chew bubblegum and kick ass...
and I'm all out of bubblegum.
-- Nada in They Live