Float-Formular im Text

Hier wird das Buchungsformular in ein '1-Spalten-Layout' so eingebunden, dass es innerhalb der Beschreibung ab 'Lorem ipsum …' nach links floatet. Der zugehörige HTML-Code wird am Ende der Seite angezeigt.


Objekt Fewo Berg, Strandweg 4, 12345 Urlaubsort

In diesem Objekt befinden sich zwei Appartements, AppMuschel und AppSeestern.
Diese Appartements können einzeln gebucht werden, Sie können aber auch das ganze Haus buchen, wobei Sie dann einen aus der Preisinfo ersichtlichen Rabatt erhalten. Die Beschreibung der Appartements finden Sie unten.
6.8 km vom Meer, an einer Nebenstrasse gelegen. Zur Mitbenutzung: Grundstück, Garten. Im Hause: Zentralheizung. Parkplatz beim Haus. Lebensmittelgeschäft 250 m, Supermarkt 1.4 km, Restaurant 1.3 km, Cafe 1.2 km, Bushaltestelle 600 m, Bahnstation 'Norden' 1.5 km. Freibad 6.8 km, Hallenbad 4 km, Sandstrand, Strandbad 6.8 km, Tennis, Tennishalle 4.7 km, Reitstall 200 m. Im 200 m entfernten Reitstall können nach Absprache und gegen Gebühr eigene Pferde in Gastboxen untergebracht werden.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

HTML-Code des Content-Bereiches

Hinweise zum Einfügen des Buchungsformulars in Ihre Seite

Die farblich markierten Zeilen stellen die zur Einbindung des Buchungsformulars notwendigen Teile dar, wobei manche <p>- bzw. <div>-Tags und Abstände zwischen den Absätzen layoutbedingt automatisch eingefügt wurden.
Diese Zeilen müssen Sie an die entsprechenden Stellen in Ihrer Seite kopieren, die rot markierten Teile müssen Sie durch die Werte Ihrer Installation ersetzen (Pfad zum Ordner OBS, Objektname).
Durch die erste Zeile wird die Bibliothek, durch die weiteren das Buchungsformular eingebunden. Evt. vorhandene Zeilenumbrüche in diesen Bereichen sind durch das Layout bedingt und sollten vermieden werden.

Wegen der etwas ungünstigen CSS-Formatierung des <p>-Tags wurde dieses hier einmal ersetzt duch ein <div>-Tag.
Damit das Buchungsformular nach links 'floatet' und zur Korrektur der Abstände zum Text wurden folgende CSS-Stylesheet-Eigenschaften verwendet:
"float:left;margin-top:10px;margin-right:10px;".

In der OnBuSys-JS-Bibliothek werden die eingefügten Teile ausführlich beschrieben.

Beginn des Quellcodes der Demoseite

<p>
    <script type="text/javascript" src="http://onbusys.de/101/OBS/obs_lib.js"></script>
</p>

<p>
    <strong>Hier wird das Buchungsformular so eingebunden, dass es innerhalb der Beschreibung vor &#39;Lorem ipsum …&#39; erscheint. Der zugeh&ouml;rige HTML-Code wird am Ende der Seite angezeigt.</strong>
</p>

<hr style="color:#cccccc; width:100%" />
<p>
    <strong>Objekt Fewo Berg, Strandweg 4, 12345 Urlaubsort</strong>
</p>

<p>
    <img alt="" height="150" src="https://onbusys.de/101/OBS/Demos/Berg.jpg" style="float:right;margin-left:5px; margin-bottom:3px;" width="200" />
</p>

<div>
    In diesem Objekt befinden sich zwei Appartements, AppMuschel und AppSeestern.<br />
    Diese Appartements k&ouml;nnen einzeln gebucht werden, Sie k&ouml;nnen aber auch das ganze Haus buchen, wobei Sie dann einen aus der Preisinfo ersichtlichen Rabatt erhalten. Die Beschreibung der Appartements finden Sie unten.<br />
    6.8 km vom Meer, an einer Nebenstrasse gelegen. Zur Mitbenutzung: Grundst&uuml;ck, Garten. Im Hause: Zentralheizung. Parkplatz beim Haus. Lebensmittelgesch&auml;ft 250 m, Supermarkt 1.4 km, Restaurant 1.3 km, Cafe 1.2 km, Bushaltestelle 600 m, Bahnstation &#39;Norden&#39; 1.5 km. Freibad 6.8 km, Hallenbad 4 km, Sandstrand, Strandbad 6.8 km, Tennis, Tennishalle 4.7 km, Reitstall 200 m. Im 200 m entfernten Reitstall k&ouml;nnen nach Absprache und gegen Geb&uuml;hr eigene Pferde in Gastboxen untergebracht werden.
<script type="text/javascript">
var buchkal1 = new buchkal("
onbusys.de/101","Berg",556,"float:left;margin-top:10px;margin-right:10px;","background-color:#ffffff;border:0px solid #909090;","de-DE");
buchkal1.erstelle();
</script>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>