Deine Weiterbildung über Kursnet

Info zum articlefull

Der Artikel wird mit der CSS Klasse articlefull auf die zur Verfügung stehenden Breit im Browser aufgezogen. Wie hier zu sehen rutscht der Text an den Rand. Auch in der mobilen Ansicht geht der Artikel auf die komplette Breite.

Weiter unten stelle ich noch einen Artikel zur Verfügung mit einem Wrapper, Innenabstände und Hintergrundfarben.

Demo Übersicht

Eine Demo-Übersicht mit unterschiedlichen Formatierungen, Beispielen als Vorlage zum Kopieren.

H Überschriften default von H1-H6

Eine H1 Überschrift

Eine H2 Überschrift

Eine H3 Überschrift

Eine H4 Überschrift

Eine H5 Überschrift
Eine H6 Überschrift

Überschriften per CSS auf H1-H4 verändern

Um eine Überschrift die eigentlich als H4 eingestellt ist, in der Größe einer H2 anzuzeigen gibt es folgende neuen CSS Klassen:

fontsize-m = H4
fontsize-l = H3
fontsize-xl = H2
fontsize-xxl = H1

Überschrift in Italic

Mit der CSS-Klasse italic wir die Überschrift in Italic formatiert.

Eine H3 Überschrift - in Italic und fontsize-xxl wie eine H1

Eine H3 Überschrift - in Italic und fontsize-xl wie eine H2

Akkordeon Demo

Eine Vorlage mit der Option das erst Akkordeon geschlossen oder geöffnet darzustellen.

Im dem "Umschlag Anfang" muss die CSS Klasse accordion-inactiv in das Fels CSS eingetragen werden, damit das erste Akkordeon geschlossen dargestellt wird.

Akkordeon geschlossen

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Frage 2

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Frage 3

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Tabelle mit inline Formatierung

In der Tabelle können mit bestimmten CSS Klassen Textstellen angehübscht werden.

Zur Verfügung stehen folgende inline CSS Formatierungen:

<strong>FETT</strong>

<span class="color7">color7 in rot</span>

<span class="color8">color8 in grün</span>

Überschrift 1 Überschrift 2 Überschrift 3
Text in FETT mit einem Text in grün oder rot xyz 5.941,00
Geprüfter Fachwirt für Prävention & Gesundheitsförderung (IHK) 671/37/2021 6.581,76
Geprüfter Fitnessfachwirt (IHK) 671/11/2021 4.997,28

SpaltenSet als Custom Elemente mit 2-4 Spalten

SpaltenSet 2 Spalten - 50/50%

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

SpaltenSet 2 Spalten - 25/75%

Verwaltung und Bildungsberatung der Academy of Sports

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

SpaltenSet 2 Spalten - 30/70%

Verwaltung und Bildungsberatung der Academy of Sports

Können wir dich unterstützen?

Wir beraten dich gerne!

SpaltenSet 2 Spalten - 40/60%

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

SpaltenSet 3 Spalten

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

SpaltenSet 4 Spalten

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Trenner / Trennline

Mit dem Trenner-Element wird ein DIV mit der CSS Klasse trenner bereitgestellt, um Abschnitte zu unterteilen.
Zusätzlich können per CSS Klassen Abstände nach oben und unten hinzugefügt werden. p-t-40 m-b-40

Mit der CSS Klasse trenner auf ein anderes Element wird die graue Linie drunter eingefügt.

Hier am ce_text Element mit Abstand nach unten + Trennlinie.

Trenner / Trennline drunter als eigenes Element

Wrapper DIV

Ein Wrapper DIV in dem eigene CSS Klassen eingetragen werden können.

Die Hilfsklassen können hier in der helper.css und farben-kategorien.css eingesehen werden.

Verwaltung und Bildungsberatung der Academy of Sports

Können wir dich unterstützen?

Wir beraten dich gerne!

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

articlefull mit Hintergrundfarbe am Wrapper-DIV

Aufbau mit Wrapper-DIV und SpaltenSet.

Verwaltung und Bildungsberatung der Academy of Sports

Können wir dich unterstützen?

Wir beraten dich gerne!

Eine H3 Überschrift

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Verwaltung und Bildungsberatung der Academy of Sports

articlefull mit Hintergrundfarbe und padding Abstand

Bavaria ipsum dolor sit amet soi guad sodala, aba Meidromml Greichats. Vergeltsgott glacht sauba kimmt boarischer, heid gfoids ma sagrisch guad unbandig. Damischa Ohrwaschl unbandig, und wos. Fias hi i mog di fei im Beidl Watschnbaam san und sei! Ned vui huift vui jo leck mi kimmt amoi und sei Brezn.

Buttons / Farbe

Die Buttons können in den Kategorien mit den CSS Klassen layout-color1 bis layout-color8 in die jeweilige Farbe geändert werden.

Default ist das AoS orange!

Buttons inline und block

Buttons default inline in einer Reihe und können per CSS Klasse w-100 untereinander mit voller Breite (z.B. rechte Spalte) angeordnet werden.

Inline haben die Buttons auf der rechten Seiten einen Abstand von xx Pixel zum nächsten Button. Der letzte Button hat keinen Abstand (margin).

Untereinander haben die Buttons immer einen Abstand von xx Pixel nach unten zum nächsten Button. Der letzte Button hat keinen Abstand (margin).

Buttons voller Breite mit CSS Klasse w-100

Bilder

Ausrichtung mit CSS.