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%
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%
Können wir dich unterstützen?
Wir beraten dich gerne!
- Gebührenfreie Servicehotline: 0800-5891254
- aus dem Ausland: +49 7191-22987-0
- Kontaktformular
- Termin Rückruf
- Termin Videoberatung
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.
Können wir dich unterstützen?
Wir beraten dich gerne!
- Gebührenfreie Servicehotline: 0800-5891254
- aus dem Ausland: +49 7191-22987-0
- Kontaktformular
- Termin Rückruf
- Termin Videoberatung
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.
Können wir dich unterstützen?
Wir beraten dich gerne!
- Gebührenfreie Servicehotline: 0800-5891254
- aus dem Ausland: +49 7191-22987-0
- Kontaktformular
- Termin Rückruf
- Termin Videoberatung
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 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.
Bilder
Ausrichtung mit CSS.
