Web: Issue 958 (partial) Scroll wide examples

 - Examples on web pages which are divided into two columns
   run off the right-hand edge when the width of the browser
   window is reduced.  This patch adds a horizontal scroll
   bar to examples which do this.

diff --git a/Documentation/css/lilypond-web.css b/Documentation/css/lilypond-web.css
index fd883b5b51bebdbf77e6b49d6c7fc24dc303f645..c101fd15eeb5235b8d1faeb0ea4036cf841bc619 100644 (file)
--- a/Documentation/css/lilypond-web.css
+++ b/Documentation/css/lilypond-web.css
@@ -891,6 +891,18 @@ div.color4 h3 {
   line-height: 0.8;
 }
 
+.example {
+  position: relative;
+  left: -3em;
+}
+
+.h-scroll-auto {
+  position: relative;
+  left: 1em;
+  width: 240px;
+  overflow: auto;
+}
+
 .warning {
   background: #eef;
   text-align: left;

diff --git a/Documentation/web/download.itexi b/Documentation/web/download.itexi
index 08238c9ce538c358d030262e55f195deb50cfca4..c9af00daed70aed4a58e297f8123870697b8e05d 100644 (file)
--- a/Documentation/web/download.itexi
+++ b/Documentation/web/download.itexi
@@ -339,11 +339,11 @@ cd ~/bin
 @item
 Create a file called @command{lilypond} which contains
 
-@help obvious css issue to be dealt with.  :(
-@c we need a small font here to fit.  -gp
-@smallexample
+@divClass{h-scroll-auto}
+@example
 exec @var{DIR}/LilyPond.app/Contents/Resources/bin/lilypond "$@@"
-@end smallexample
+@end example
+@divEnd
 
 @warning{@var{DIR} will generally be @code{/Applications/}}
 
@@ -386,9 +386,11 @@ inside the @code{.app} file for MacOS@tie{}X.
 Scripts can also be run from the command line by invoking them
 directly:
 
+@divClass{h-scroll-auto}
 @example
 @var{path/to}/LilyPond.app/Contents/Resources/bin/lilypond
 @end example
+@divEnd
 
 The same is true for all other scripts in that directory, such as
 @command{lilypond-book} and @command{convert-ly}.
@@ -606,6 +608,3 @@ is given in @ref{Freedom}.
 @include gpl.itexi
 
 @divEnd
-
-
-