ByRei - EliseBox


Simple dynamic Content by Markus Bordihn

Example: Sidebar with Position

Width EliseBox_pos-left or EliseBox_pos-right you can define if the sidebar image should be at the left or the right side.
You can also use this together with the float option EliseBox_float-... to realize all possible Sidebars.

Live Example

It is the beginning of an example.

This is a small Content.

And this is the end my friend of this Content.
It is the beginning of an example.

This is a small Content.

And this is the end my friend of this Content.

Test W3C Validation: Valid HTML 4.01 Strict

HTML Code 

...
 <script type="text/javascript" src="byrei-elisebox_0.6.js"></script>
 <script type="text/javascript">
  if (typeof(ByRei_EliseBox) !== "undefined") {ByRei_EliseBox.config.path.img = '../images/';}
 </script>

 <div class="EliseBox_sidebar-expand EliseBox_hover EliseBox_pos-left" style="height: 162px; width: 250px;">
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee; height: 150px;">
   It is the beginning of an example.<br>
   <br>
   This is a small Content.<br>
   <br>
   And this is the end my friend of this Content.<br>
  </div>
 </div>

 <div class="EliseBox_sidebar-expand EliseBox_hover EliseBox_pos-right" style="height: 162px; width: 250px;">
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee; height: 150px;">
   It is the beginning of an example.<br>
   <br>
   This is a small Content.<br>
   <br>
   And this is the end my friend of this Content.<br>
  </div>
 </div>
...