Vorgefertigte Klassen für HTML-Texte

Aus e-vendo Wiki
Wechseln zu: Navigation, Suche
zum Anfang der Seite
Templ info-blk.png
Die hier dargestellten Informationen sind ab der Shop-Version 7.6.11.0 verfügbar.



Textgestaltung ohne HTML-Editor

Basis-Kentnisse

HTML

Die eingesetzen HTML-Elemente beschränken sich auf <div> und <img>.


Das div-Tag

Ein <div> stellt einen Container dar. Dieser Container kann beliebige weitere Elemente enthalten und dient zur Strukturierung einer Website. Diesen Containern kann durch geschickten Einsatz von CSS ein beliebiges Aussehen und Verhalten gegeben werden.

Ein div-Element besteht immer aus einem öffnenden <div> und einem schließenden </div>.

Templ code-blk.png
<div>

Mein beliebiger Inhalt

</div>


Das img-Tag

Um Bilder in HTML anzuzeigen wird <img> benötigt. Das img-Tag hat ein notwendiges Attribut "src", welches die Bildadresse enthält: <img src="pfad/mein_Bild.jpg">. Optional kann dem Bild noch ein alternativer Text, der angezeigt wird, wenn das Bild nicht geladen werden konnte, und ein Titel hinzugefügt werden. Der alternative Text wird mit "alt" gekennzeichnet und der Titel mit "title". Beide Angaben sind für Google von Bedeutung.

Um ein Bild aus der e-vendo-Grafikgalerie einzufügen, wird anstatt eines Pfades der Platzhalter @@@e-vendo_src@@@ verwendet und dahinter mit einem Schrägstrich getrennt der Bildname, z.B. /mein_bild.jpg.

Templ code-blk.png
<img src="@@@e-vendo_src@@@/mein_bild.jpg" alt="mein_Bild" title="Dies ist mein wunderschönes Bild">


CSS

Damit die nun bekannten HTML-Elemente sich auch wie gewünscht verhalten, sind Cascading Style Sheets, oder kurz CSS, notwendig.

Es gibt zwei grundsätzliche Wege den Elementen CSS zuzuordnen: intern und extern.

Intern bedeutet, dass die CSS-Angaben direkt als Attribut im Element stehen:

Templ code-blk.png
<div style="width:300px; height:500px: background:green">

Mein beliebiger Inhalt.

</div>

Dieser Weg führt aber schnell zu unübersichtlichem und schlecht lesbarem Code.

Einfacher ist es deshalb, die CSS-Angaben in Klassen und IDs zu schreiben und extern zu speichern. Der Zugriff erfolgt dann über das class- oder id-Attribut. Der Unterschied zwischen beiden ist, dass IDs in der gesamten HTML-Seite nur einmal, Klassen aber mehrfach vorkommen dürfen. Wir verwenden nur Klassen.

Wenn mehr als eine Klasse eingesetzt wird, so werden diese mit einem Leerzeichen getrennt.

Templ code-blk.png
<div id="meine_id" class="meine_Klasse noch-eine-Klasse">

Mein beliebiger Inhalt.

</div>


Glossar

divContainer, mit dem die Inhalte einer Website strukturiert werden können
imgBildelement
AttributBestandteil eines HTML-Elements. Enthält weitere Spezifikationen.
CSSCascading Style Sheet. Enthält gesammelte Informationen zur Gestaltung der Elemente einer Website.
HTMLHypertext Markup Language. Auszeichnungssprache zur Strukturierung einer Website.
classAttribut, um einem HTML-Element eine CSS-Klasse zuzuordnen.
IDAttribut, um einem HTML-Element eine CSS-ID zuzuordnen.
JavaScriptScript-Sprache, welche vom Browser interpretiert wird.
hrFügt eine horizontale Linie ein.


verfügbare Klassen

e-vendo stellt einige vorbereitete CSS-Klassen zur Verfügung, die an allen Stellen, an denen HTML genutzt werden kann, verwendet werden können.

Unter den Klassennamen und deren Zusatzinformationen werden in den code-Boxen Anwendungsbeispiele dargestellt.


einfacher Kasten

tp-container


Einfacher Container für beliebigen Inhalt, analog zu einem <div>. Folgen zwei tp-container aufeinander, werden diese durch einen kleinen Abstand (20px) getrennt.


Einfache Linie

tp-hr


Eine Linie ist in HTML ein eigenes Element – das <hr>-Tag. Im Gegensatz zu anderen Elementen gibt es hier kein schließendes Tag.

Die Klasse <tp-hr> hat einen Abstand von 20px nach oben und unten.


Beispiel

Templ code-blk.png
<div class="tp-container">

 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div>

<hr class="tp-hr">

<div class="tp-container">

 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div>


Bild links im Text

tp-picture_left


Beispiel

Templ code-blk.png
<div class="tp-container">

 <img src="@@@e-vendo_src@@@/bild.jpg" class="tp-picture_left">

 <div>

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

 </div>

</div>
Klassen cat1.jpg
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.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer


Bild rechts im Text

tp-picture_right


Beispiel

Templ code-blk.png
<div class="tp-container">

 <img src="@@@e-vendo_src@@@/bild.jpg" class="tp-picture_right">

 <div>

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

 </div>

</div>
Klassen cat2 klein.jpg
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.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer


Text linksbündig

tp-left


Beispiel

Templ code-blk.png
<div class="tp-container tp-left">

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div>


Text rechtsbündig

tp-right


Beispiel

Templ code-blk.png
<div class="tp-container tp-right">

 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div>


Text mittig

tp-center


Beispiel

Templ code-blk.png
<div class="tp-container tp-center">

 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div>


Text als Block

tp-block


Beispiel

Templ code-blk.png
<div class="tp-container tp-block">

 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div>


2 Container nebeneinander

tp-container_2


Es werden zwei Elemente nebeneinander dargestellt.

Templ att-blk.png
Text muss immer von einem HTML-Element umschlossen sein.


Beispiel 1: Zwei Bilder

Templ code-blk.png
<div class="tp-container_2">

 <img src="@@@e-vendo_src@@@/bild1.jpg">

 <img src="@@@e-vendo_src@@@/bild2.jpg">

</div>
Klassen cat3 m.jpg
Klassen cat4 m.jpg


Beispiel 2: Zwei Texte

Templ code-blk.png
<div class="tp-container_2">

 <div class="tp-container">

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

 </div>

 <div class="tp-container">

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

 </div>

</div>
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.


3 Container nebeneinander

tp-container_3


Es werden drei Elemente nebeneinander dargestellt.

Templ att-blk.png
Text muss immer von einem HTML-Element umschlossen sein.


Beispiel 1: Drei Bilder

Templ code-blk.png
<div class="tp-container_3">

 <img src="@@@e-vendo_src@@@/bild1.jpg">

 <img src="@@@e-vendo_src@@@/bild2.jpg">

 <img src="@@@e-vendo_src@@@/bild3.jpg">

</div>
Klassen cat5 m.jpg
Klassen cat6 m.jpg
Klassen cat7 m.jpg


Beispiel 2: Text zwischen Bildern

Templ code-blk.png
<div class="tp-container_3">

 <img src="@@@e-vendo_src@@@/bild1.jpg">

 <div>

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

 </div>

 <img src="@@@e-vendo_src@@@/bild2.jpg">

</div>
Klassen cat8 m.jpg
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.
Klassen cat9 m.jpg


Rahmen

tp-border-left & tp-border-right


Fügt einem Element einen Rahmen entweder rechts oder links hinzu.

Besipiel:

Templ code-blk.png
<div class="tp-container_2">

 <div class="tp-container tp-border-right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

 </div>

 <div class="tp-container">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

 </div>

</div>

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.


Klassen kombinieren

Es können auch mehrere Klassen miteinander kombiniert und Container verschachtelt werden.

Vier gleich große Spalten erzeugen:

Templ code-blk.png
<div class="tp-container_2">

 <div class="tp-container_2">

  <div class="tp-container">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  </div>

  <div class="tp-container">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  </div>

 </div>

 <div class="tp-container_2">

  <div class="tp-container">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  </div>

  <div class="tp-container">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  </div>

 </div>

</div>

Da tp-container_2 zwei gleich große Spalten erzeugt, können diese Spalten wiederum mit jeweils einem weiteren tp-container_2 geteilt werden, wodurch insgesamt 4 gleich große Spalten erzeugt werden.