Sidebar mit IVML

Sidebar mit IVML

Ein übliches Erklärungsfeld ...

Nun gibt es auch Text, welchen man manchmal mit einer Erklärung versehen möchte. Für diesen Fall ist ein Erklärungsfeld (Sidebar) geeignet. Der Text soll dabei um das Erklärungsfeld (Sidebar) herum fliessen wie hier dargestellt.

Sidebar Wie erstellt man ein Erklärungsfeld?

Mit CTRL E oder via Kontextmenü im Formular WebInfo im Feld Details (oder Auszug) den IVML-Editor öffnen. Den Tabulator 'Text' anwählen (wird automatisch angewählt). Den Knopf Stil x drücken ('Text Stil' -> 'Schrifart') und die Klasse Sidebar eingeben.

Natürlich kann die Sequenz <|STYLE sidebar|> ... <|/STYLE|> auch direkt im Textfeld eingetippt werden.
 Das Prinzip ist ganz einfach. Mittels StyleSheet kann ein Stil der Klasse .Sidebar erstellt werden und mittels dem IVML Tag <|STYLE Sidebar|> kann dann der Text im Erklärungsfeld flankiert werden.

Der Trick damit der Text um das Erklärungsfeld herumfliesst besteht im Stil .sidebar {float: right;} oder .sidebar {float: left;}, je nachdem ob der Text links oder rechts um das Erklärungsfeld herumfliessen soll.

Wenn Sie das Fenster vom Web Browser vergrössern oder verkleinern, passt sich der Textfluss der Grösse vom Fenster an.

Es gibt noch eine Alternative: Man kann das Erklärungsfenster mit einer Tabelle erstellen.
Eine andere Art von Erklärungsfeld

Hier wird eine Tabelle benutzt als spezielles Feld. Der Abstand zum Text wurde absichtlich gross eingestellt mit  dem Stil .my-sidebar .IVTable {margin: 20px 10px 20px 60px;}

Auch hier kann mittels Stil .my-sidebar {float: right;} oder .my-sidebar {float: left;} bestimmt werden ob der Text links oder rechts um das Erklärungsfeld herumfliessen soll.

Und wenn Sie das Fenster vom Web Browser vergrössern oder verkleinern, passt sich der Textfluss auch hier der Grösse vom Fenster an.


Diese Seite wurde mit folgender IVML-Information erzeugt:

<|H1|>Sidebar mit IVML
<|B|>Ein übliches Erklärungsfeld ...<|/B|>

Nun gibt es auch Text, welchen man manchmal mit einer Erklärung versehen möchte. Für diesen Fall ist ein Erklärungsfeld (Sidebar) geeignet. Der Text soll dabei um das Erklärungsfeld (Sidebar) herum fliessen wie hier dargestellt.

<|STYLE sidebar|>
<|B|>Sidebar<|/B|> Wie erstellt man ein Erklärungsfeld?

Mit CTRL E oder via Kontextmenü im Formular WebInfo im Feld Details (oder Auszug) den IVML-Editor öffnen. Den Tabulator 'Text' anwählen (wird automatisch angewählt). Den Knopf Stil x drücken ('Text Stil' -> 'Schriftart') und die Klasse Sidebar eingeben.

Natürlich kann die Sequenz <|STYLE sidebar|> ... <|/STYLE|> auch direkt im Textfeld eingetippt werden.
<|/STYLE|>

Das Prinzip ist ganz einfach. Mittels StyleSheet kann ein Stil der Klasse .Sidebar erstellt werden und mittels dem IVML Tag |STYLE Sidebar| kann dann der Text im Erklärungsfeld flankiert werden.

Der Trick damit der Text um das Erklärungsfeld herumfliesst besteht im Stil .sidebar {float: right;} oder .sidebar {float: left;}, je nachdem ob der Text links oder rechts um das Erklärungsfeld herumfliessen soll.

Wenn Sie das Fenster vom Web Browser vergrössern oder verkleinern, passt sich der Textfluss der Grösse vom Fenster an.

<|B|>Es gibt noch eine Alternative: <|/B|> Man kann das Erklärungsfenster mit einer Tabelle erstellen.
<|DIV my-sidebar|>
<|TABLE COL:1 CLASS:"sidebar"|>
<|C|>
<|B|>Eine andere Art von Erklärungsfeld<|/B|>

Hier wird eine Tabelle benutzt als spezielles Feld. Der Abstand zum Text wurde absichtlich gross eingestellt mit  dem Stil .my-sidebar .IVTable {margin: 20px 10px 20px 60px;}
<|/C|>
<|/TABLE|>
<|/DIV|>

Auch hier kann mittels Stil .my-sidebar {float: right;} oder .my-sidebar {float: left;} bestimmt werden ob der Text links oder rechts um das Erklärungsfeld herumfliessen soll.

Und wenn Sie das Fenster vom Web Browser vergrössern oder verkleinern, passt sich der Textfluss auch hier der Grösse vom Fenster an.

Der zugehörige Style wurde wie folgt definiert:


<|IVSTYLE|>

.sidebar {
float: right;
width: 50%;
border-right: black 1px solid;
border-bottom: black 1px solid;
padding-right: 5px;
border-top: black 1px solid;
padding-top: 5px;
padding-left: 5px; FONT-SIZE: smaller;
padding-bottom: 5px; MARGIN: 5px;
border-left: black 1px solid;
background-color: rgb(216,216,216);
}

.my-sidebar .sidebar {
float: right;
margin: 20px 10px 20px 60px; top right bottom left */
border: 10px groove #663399;
border-color: green;
width: 300px;
font-size: 8pt;
background-color: rgb(216,216,216);
color: gray;
}

.my-sidebar .sidebar b {
font-size:14px;
color: red;
}

<|/IVSTYLE|>

Der Style kann in das dem Thema zugehörige StyleSheet verschoben werden.

Um dies im WebTracker zu testen, gehen Sie wie folgt vor:

  • Erstellen Sie einen neuen Eintrag für eine Webseite im WebTracker mit dem Titel "sidebar"
  • Kopieren Sie den grauen Text in das Feld "Inhalt" und drücken Sie den OK-Knopf um den Datensatz zu speichern. Kopieren sie zuerst nur den IVML-Text und später den CSS-Style (IVSTYLE) um den Effekt von CSS zu sehen.
  • Klicken Sie mit der rechten Maustaste auf den Rahmen vom Textfeld 'Details'.
  • Wenn Sie noch nicht auf den WebBrowser umgeschaltet haben, tun Sie das nun (Menü-Punkt WebBrowser/Editieren)
  • Schalten Sie um auf Vollbild (Menü-Punkt Vollbild/Normal)
  • Klicken Sie auf das Rechteck im Fenster vom WebTracker (oben rechts) und passen Sie die Grösse vom WebTracker entsprechend an um den Effekt zu sehen.
  • Um WebTracker wieder in Normalansicht zu sehen, schalten Sie wieder um auf Normal (Menü-Punkt Vollbild/Normal beim Rechtsklicken auf den Rahmen)


Publizieren Sie die Seite lokal (Rechtsklicken auf den Rahmen und Menü-Punkt "Dargestellte Webseite lokal publizieren" auswählen) und sehen Sie sich den Effekt mit dem Web Browser an.