CSS-Snippets

Seitenbreite Elemente werden immer wieder eingesetzt, um auffällig die Seite zu unterbrechen/Highlights zu setzen. Diese führen aber fast immer zum unerwünschtem seitlichen (horizontalem) Scrollen. So wirkst Du diesem entgegen:

Auf der Seite Germania Akademie wurde der Text des Kontrolkastens von
"The Privacy Policy applies" auf deutsch "Ich habe die Datenschutzerklärung zur Kenntnis genommen" über css geändert .

Mittlerweile haben wir einige Artikel hier zusammengetragen. Das führt leider dazu, dass Jimdo nicht mehr alle Artikel aufführt, weshalb ich schnell die externe Suche von Findberry hier eingefügt habe – ist ab sofort im Footer platziert! 🙌

Auf der Seite Grigoleit hatte ich das Problem, dass das Youtube-Video sich nicht an die Bildschirmbreite anpassen wollte. Das habe ich wie folgt gelöst.

Die am Seitenrand positionierten floatenden Kontaktbox ist von vielen Kunden gewünscht: Mit diesem Code-Snippet brauchst Du nur noch die Infos austauschen und ggf. die Hintergrundfarbe abändern!

Mit "Even and odd rules" einfach Tabellen optisch aufwerten geht aber auch für alle Elemente innerhalb eines Kontainer wir z.B. ein DIV

Eigenschaften und Styles können ohne Class durch Zählung vergeben werden

Hier wird ein Accordeon ohne Java-Scrippt erstellt

Childen Elemente ohne eigene CSS-Class mit css ansprechen und gestalten

Wir spielen ja gerne mal mit Elementen, die links und rechts aus dem Browserrand farbig auslaufen sollen.

Hier erkläre ich euch wie das geht!

Diese kleinen ausfahrbaren Elemente sind ja manchmal auch ganz schickt. Besonders für Telefonnummern oder Adressen oder E-Mail-Adresse, die man nicht in einem großen Störer präsentieren will.

Der Jimdo-Slider ist immer genauso breit, wie der Content-Bereich im Jimdo-Template. Wie Du mit einem kleinen Code-Schnipsel den Slider auf volle Fensterbreite bringen kannst, ließt Du in diesem Beitrag

Die kleinen Aufzählungszeichen, gerne auch Bullets genannt, tausche ich gerne durch Icons oder kleine Grafiken aus, um der Seite einen individuelleren. Und so geht's!

Ich (T-2-the-imo) brauche fast auf jeder Seite Teaser auf der Startseite. Im groben sehen Teaser immer gleich aus: farbiger Hintergrund, abgerundete Ecken, Teaserheadline/-text und ein Button, der meist auf gleicher Höhe sein soll.

Der Cookie Hinweis soll bei Beeinflussung bzw. Störung des Designs unten positioniert werden

Um unseren Code zu strukturieren und für andere und einen selbst zu verdeutlichen, können wir Code-Schnipsel auskommentieren oder den Code direkt gliedern und aufteilen.

Manchmal möchte ich die li's in der Subnavigation stärker durch einen Trennstrich voneinander trennen.

Mit folgendem kurzen Befehl könnt ihr alle li's in einer Subnavigation ansprechen und das letzte li dabei ausschließen.

Wenn Du z. B. auf jeder Unterseite verschiedene Bilder per css einfügen möchtest, sprichst Du normalerweise die page-ID einer Seite an. Start- und Datenschutzseite haben eine ID. Um hier zu unterscheiden, brauchst Du nur die folgende Klasse.

Die Kontaktbox soll meistens immer sichtbar sein. Also wird diese im Footer platziert und per position: absolute in den sofort sichtbaren Bereich geschoben. Auf der Website siehts gut aus – im Bearbeitungsmodus ist die Kontaktbox nicht mehr zu finden. Hier hilft die CSS-Class .cc-pagemode-default weiter!

Mit sogenannten Mediaqueries kannst Du Breakpoints setzen, um bspw. die Navigation ab einer gewissen Breite in ein kleines Symbol zu verwandeln oder zwei Spalten nicht mehr nebeneinander sondern auf Smartphones untereinander anzuzeigen.