Ein Link auf eine PDF-Datei wird automatisch mit einem PDF-Icon angezeigt, wenn folgende CSS-Anweisung vorhanden ist:
WeiterlesenArchiv der Kategorie: css
CSS: Farbige Aufzählungszeichen
Manchmal wär’s schön, wenn die Aufzählungszeichen in Listen (bullets) farbig wären – oder sogar statt bullet etwas Originelleres .
so gehts:
/* Farbe der Aufzählungspunkte */
.entry-content ul { list-style: none; } /* Entferne Aufzählungspunkt */
.entry-content li::before {
font-family: Arial, Helvetica, sans-serif;
content: "\2055"; /* Unicode--Symbol */
color: #1c9135; /* Aufzählungspunkt-Farbe */
/* Optional tweaks */
font-weight: bold;
padding-right: 10px; }
Und so sieht es aus:
- hallo
- ich
- bin eine
- Aufzählung
CSS: Spalten (2) mit Gutenberg responsive machen
Von Haus aus bietet der Gutenberg-Editor das Einfügen von Spalten an. Diese verhalten sich auch ganz schön responsive, das heisst, dass sie schön artig untereinander dargestellt werden, sobald das nötig ist (zb mobile-Device).
WeiterlesenCSS: Browserfenster-Höhe
Bei einer Webseite soll die Fusszeile unten kleben bleiben. Wir gelangen in den Bereich position:absolute… Das wiederum bedingt, dass definiert wird, dass die Seite 100% hoch ist.
CSS: Telefon-Nummer in mobile device
Eine Eigenschaft der Browser auf mobile devices ist, dass Telefon-Nummern automatisch zu Links umgewandelt werden. Ganz schön praktisch, für denjenigen, der mit einem Klick grad einen Telefonanruf starten möchte.
CSS: Tabs im Web wie im Word?
Sicher sind Sie auch schon mal konfrontiert worden damit, dass Sie Texte auf eine ganz bestimmte Art – mittels Tabulatoren – darstellen sollten/wollten. Ja eben wie im „Word“.
CSS: Google Map ohne Mausrad
das nervt…. Auf einer Seite ist eine Google-Map eingebunden. Funktioniert bestens – ABER, wenn der Benutzer mit der Muas (Mausrad) scrollt und in den Map-Bereich gelangt, dann gibts ne Riesen-Zoomerei.
das kann vermieden werden mit:
<div class="map-wrap">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5424.971764998638!2d8.294026668792464!3d47.167922726068724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479002b7e09d4a1b%3A0xf865138a071382d1!2sEichenweg+4%2C+6280+Hochdorf!5e0!3m2!1sde!2sch!4v1461835851289" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</div>
und folgendem CSS-Code:
/* google maps enable mouse scrolling */
.map { width:100%; height:450px; }
.map-wrap { position:relative; }
.overlay {
width:100%;
min-height:450px;
position:absolute;
top:0; }
Nach dem erstmaligen reinclicken in die Karte wird die Zoom-Möglichkeit freigegeben.
Beispiel gefällig? Hier: tierarztpraxis-eberli.ch/kontakt/
CSS: Line-Title
Letzthin habe ich eine interessante Art von Titeln gesehen, nämlich so:
Dies ist ein solcher Line-Title
CSS: Theme „twenty twelve“ mit full-size-header-image
Beim Theme „twenty twelve“ möchte ich manchmal beim Verwenden des Header-Bildes die Standard-Ränder (links und rechts) zum Bild eliminieren.
WeiterlesenCSS: Die gleiche-Spaltenhöhe-Problematik
Ein Evergreen….
2 oder 3 Spalten nebeneinander. Diese haben nicht gleich viel Inhalt – sind also verschieden lang. Sieht gar nicht schön aus.
Weiterlesen
CSS: Links stylen
Nebst farblicher Hervorhebung von Links wird oft mit „underscore“ gearbeitet. Dieser undersore hängt mir ein wenig nahe am Text – ist halt Geschmacksache.