von "Online-Tools" die
Klasse current_page_item, faerbt die Regel JEDEN Link darin weiss -
auch alle neunzehn Eintraege im Untermenue. Gemeint war nur der Punkt
selbst.
2. Ihre Spezifitaet ist (1,1,2), die des Hover-Effekts
#header-menus-page a:hover nur (1,1,1). Die Farbe des aktiven Punktes
gewinnt deshalb auch beim Darueberfahren - der Hover blieb wirkungslos.
Behoben per Ueberschreibung statt im Originalblock, damit dessen Zeilen
unangetastet bleiben.
========================================================================== */
/* Untermenue-Eintraege sind nicht der aktive Punkt, nur weil ihr Elternteil
es ist. (1,1,3) schlaegt (1,1,2). */
#header-menus-page li.current_page_item ul a,
#header-menus-page li.current_page_ancestor ul a,
#header-menus-page li.current_page_parent ul a{color:#777;}
/* Nur der tatsaechlich aktive Punkt bleibt weiss. */
#header-menus-page li.current_page_item > a{color:#fff;}
/* Darueberfahren gewinnt jetzt ueberall. (1,2,2) beziehungsweise (1,2,3). */
#header-menus-page a:hover,
#header-menus-page li.current_page_item > a:hover,
#header-menus-page li.current_page_item ul a:hover,
#header-menus-page li.current_page_ancestor ul a:hover,
#header-menus-page li.current_page_parent ul a:hover{color:#00ff00;background:#222;}
/* ==========================================================================
TRENNER ZWISCHEN DEN WIDGETS
==========================================================================
WARUM EINE WAAGRECHTE LINIE UND KEIN KASTEN
-------------------------------------------
Dieses Design besteht aus einer einzigen Sorte Linie: durchgezogen, ein
Pixel, #00FF00. Ein gestrichelter Rahmen waere eine zweite Sprache - und
ein geschlossener Kasten je Widget viel Rahmen fuer wenig Inhalt.
WARUM SIE OHNE KORREKTURWERT AUFGEHT
------------------------------------
#wrapper ist 899 Pixel breit und traegt rechts die gruene Rahmenlinie.
Darin liegen #content mit 610 links und #sidebar mit 260 rechts. Die
rechte Kante der Seitenleiste faellt damit genau auf diese Linie.
#sidebar .widget hat seinen Innenabstand innen (padding:10px 10px 20px)
und spannt deshalb ueber die vollen 260 Pixel. Eine Oberlinie laeuft von
selbst bis an den Rahmen und stoesst dort an - wie eine Sprosse zwischen
zwei Holmen. Kein negativer Aussenabstand, keine ausgerechnete Breite,
nichts, was beim naechsten Eingriff verrutschen kann.
WARUM DER NACHBAR-SELEKTOR
--------------------------
.widget + .widget laesst das erste Widget aus. Bekaeme auch das eine
Oberlinie, saesse sie direkt unter dem Suchfeld und haette kein
Gegenueber - ein Trenner, der nichts trennt.
UNTERHALB VON 980 PIXELN
------------------------
Dort entfaellt border-right am Wrapper, den Anschluss gibt es also nicht
mehr. Die Linie bleibt als Trenner sinnvoll, sie bedeutet nur weniger.
Deshalb steht die Regel bewusst NICHT in einer Media Query.
ANDERE VARIANTE
---------------
Wer statt der Sprosse die Ecke will - dieselbe Form, die #header-title
und #search im Kopfbereich verwenden - ersetzt den Block durch:
#sidebar .widget{
border-top:1px solid #00ff00;
border-left:1px solid #00ff00;
padding-left:14px;
}
========================================================================== */
#sidebar .widget + .widget{
border-top:1px solid #00ff00;
padding-top:20px;
}
/* ==========================================================================
ARTIKELRAHMEN BUENDIG ZUM KOPFBEREICH
==========================================================================
DAS PROBLEM
-----------
Die gruene Senkrechte im Kopfbereich (border-left an #header-title) und die
gruene Linie am Artikelrahmen standen 11 Pixel auseinander. Nahe genug,
dass das Auge sie fuer denselben Strich haelt, und weit genug, dass es
stoert.
DIE RECHNUNG, gemessen ab der Linkskante von #container:
#container Inhalt padding:0 40px -> 40
#header (980-900)/2 = 40 dazu -> 80
#header-title Linie -> 80
#wrapper Inhalt margin-left:0 + padding-left:40 -> 80
#content Linkskante -> 80
.post gruene Linie +1 Rahmen #content, +10 margin -> 91
Bei 80 liegt alles. Der einzige Ausreisser ist der Artikel.
WARUM NICHT EINE DURCHGEHENDE LINIE
-----------------------------------
Ein frueherer Versuch hat die Kante von #content eingefaerbt und die Luecken
darueber und darunter geschlossen. Rechnerisch sauber, gestalterisch falsch:
dieses Design lebt von versetzten L-Formen - Kopftitel, Suchfeld, Fussbereich
greifen ineinander, ohne sich zu beruehren. Eine durchgezogene Senkrechte
macht daraus einen geschlossenen Kasten und nimmt dem Ganzen die Schwingung.
DER EINGRIFF
------------
margin-left:-1px zieht den Artikel um 11 Pixel nach links: 10 vom bisherigen
Aussenabstand, 1 vom Rahmen des Elternteils. Die Linkskante landet auf 80.
Die Rechtskante bleibt, wo sie war. Die Breite steht auf auto und waechst
deshalb nach links; margin-right bleibt bei 10, der rechte Rahmen also bei
681. Nichts an der rechten Haelfte des Layouts bewegt sich.
WARUM #wrapper flow-root STATT overflow:hidden BEKOMMT
------------------------------------------------------
Das Datumskaestchen haengt mit left:-50px an .post und wandert mit. Es sitzt
heute bei 42, der Beschnittrand von #wrapper{overflow:hidden} liegt bei 40 -
ganze 2 Pixel Luft. Nach der Verschiebung saesse es bei 31 und waere um 9
Pixel angeschnitten.
flow-root umschliesst die schwebenden Spalten genauso wie overflow:hidden,
beschneidet aber nichts. Damit darf das Kaestchen mitwandern und behaelt
seinen Bezug zum Rahmen: sein rechter Rand steht wie bisher 2 Pixel hinter
der Linie. Deshalb bleibt .date unangetastet.
NUR OBERHALB VON 980
--------------------
Darunter steht #content auf voller Breite und die 11 Pixel gibt es nicht
mehr. Eine min-width-Abfrage statt einer Ueberschreibung, damit im
Handy-Layout garantiert nichts ankommt.
========================================================================== */
@media (min-width: 981px) {
/* padding-bottom von 20 auf 10: zwischen der gruenen Linie des letzten
Artikels und der des Fussbereichs standen rund 63 Pixel, davon etwa 14
fuer den Text. Nur hier oben - auf dem Handy stehen Inhalt und
Seitenleiste untereinander, dort sind die 20 Pixel sinnvoller.
Nebenwirkung: die rechte Linie an #wrapper laeuft dessen ganze Hoehe
und endet damit 10 Pixel naeher am Fussbereich. */
#wrapper{display:flow-root;overflow:visible;padding-bottom:10px;}
/*
* Links UND rechts buendig. Die Kurzschreibweise margin:10px 10px 0
* setzt beide Seiten auf 10; bis 1.2.10 war nur die linke gezogen,
* rechts blieb ein grauer Streifen stehen.
*
* Der Artikel deckt damit die Kastenkante von #content genau ab:
* 80 bis 692, also 1 + 610 + 1. Die sichtbare Begrenzung der Spalte
* ist der gruene Rahmen des Artikels - dort gehoert sie hin.
*/
.post{margin-left:-1px;margin-right:-1px;}
/*
* Zwischen zwei Artikeln trennt margin-top. Ueber dem ersten hat er
* nichts zu trennen und liess nur einen grauen Streifen von zehn
* Pixeln stehen - ein Aussenabstand ist durchsichtig, das #181818
* von #content schien hindurch.
*
* .post ist in index.php, archive.php, search.php, single.php und
* page.php das erste Kind von #content, direkt hinter dem oeffnenden
* Tag ohne Leerzeichen dazwischen. :first-child greift also.
*/
.post:first-child{margin-top:0;}
}
/* ==========================================================================
DIE GRAUE SPALTE ENDET AM LETZTEN ARTIKEL
==========================================================================
#content traegt background:#181818. Die Blaetternavigation steht als letztes
Kind darin, also lag "Next page" bisher auf Grau - die Spalte lief unter der
Navigation weiter, obwohl der Inhalt oben laengst zu Ende war.
Jetzt schliesst das Grau an der Unterkante des letzten Artikels, genau an
dessen gruenem Rahmen. Alles darunter ist schwarz.
margin:0 statt 10px 0
Der Aussenabstand war durchsichtig, das Grau von #content schien
hindurch. Ohne ihn beginnt Schwarz direkt an der gruenen Linie.
padding:14px 30px
Die 30 sind kein runder Wert, sondern der Innenabstand von .post. Der
Text der Navigation steht damit auf derselben Senkrechten wie der Text
der Artikel darueber.
DIE UNSICHTBARE FALLE
---------------------
posts_nav_link() gibt NICHTS aus, solange es nur eine Ergebnisseite gibt -
im Kern haengt die ganze Ausgabe an "max_num_pages > 1". Das steht
aber trotzdem in der Vorlage, mitsamt seinem Innenabstand. Das ergibt einen
leeren Streifen von rund zwanzig Pixeln.
Bisher fiel er nicht auf: dieselbe Farbe wie alles ringsum. Schwarz
eingefaerbt waere daraus auf jeder Seite ohne Blaetternavigation ein
schwarzer Balken mitten in der grauen Spalte geworden.
:empty greift hier zuverlaessig, weil in der Vorlage kein Leerzeichen
zwischen den Tags steht - . Ein
einziges Leerzeichen wuerde den Selektor aushebeln, ein Textknoten zaehlt
als Inhalt.
========================================================================== */
#pagination{margin:0;padding:8px 30px;background:#000;}
#pagination:empty{display:none;}
/* ==========================================================================
DER GRAUE RAHMEN UM #content
==========================================================================
#content traegt border:1px solid #222 auf allen vier Seiten. Solange innen
und aussen Grau war, sah man ihn nicht. Sobald die Blaetternavigation
schwarz wurde, zeichnete er sich als Kaesten um sie herum ab.
Dasselbe Muster zum dritten Mal: erst der unsichtbare Rahmen an
#header-menus, dann dessen unsichtbarer Hintergrund, jetzt dieser. Etwas,
das nur deshalb nicht zu sehen war, weil sein Umfeld dieselbe Farbe hatte.
Statt ihn an einer Stelle zu ueberdecken, bekommt er die Farbe des
Untergrunds. Damit ist der Fall erledigt und nicht nur diese eine Ecke.
Sichtbar begrenzt wird die graue Spalte durch den Farbwechsel #181818 gegen
Schwarz, nicht durch diesen Rahmen - es geht also nichts verloren.
NUR border-color, NICHT border
------------------------------
Die Breite von einem Pixel bleibt stehen. Wuerde man den Rahmen entfernen,
ruecken alle Kinder um ein Pixel nach links und oben - und der Artikel
steht seit 1.2.7 genau auf 80.
========================================================================== */
#content{border-color:#000;}
/* ==========================================================================
HANDY: RANGFOLGE DER TITEL, WIDGETS, SEITLICHES SCHWANKEN
==========================================================================
1. WARUM DER WEBSITE-TITEL KLEINER WIRKT, OBWOHL ER GROESSER IST
---------------------------------------------------------------
Bei rund 393 Pixeln Fensterbreite liefert clamp(18px,6vw,28px) etwa 23,6
Pixel fuer "The.Fischerman.CH", der Artikeltitel steht auf 18. Der
Website-Titel ist also der groessere - aber er traegt font-weight:normal,
waehrend der Artikeltitel aus der Grundregel h1,h2,h3...{font-weight:bold}
fett kommt und ueber fuenf Zeilen laeuft.
Fett auf fuenf Zeilen schlaegt mager auf einer. Es war nie ein
Groessenproblem, sondern eines der Flaeche.
Die neuen Werte: bei 393 Pixeln 29,5 gegen 17, bei 320 Pixeln 24 gegen 17.
"|||The.Fischerman.CH" braucht bei 24 Pixeln rund 204 Pixel Platz, bei 320
Pixeln Fensterbreite abzueglich 2x16 Innenabstand stehen 288 zur Verfuegung.
2. WELCHE WIDGETS AUF DEM HANDY BLEIBEN
---------------------------------------
Nicht die ganze Seitenleiste, sondern zwei benannte Widgets. Grund:
Suchmaschinen bewerten vorrangig die mobile Fassung. Ein ausgeblendetes
#sidebar haette das LLM-Radar-Widget aus genau der Version entfernt, die
zaehlt - und die Streuung der internen Verweise auf die 250 Modellseiten
war sein Hauptzweck.
Die Klassennamen bildet WordPress selbst: beide Plugins setzen keinen
eigenen classname, also entsteht "widget_" plus Kennung. Das Radar-Widget
setzt seinen classname ausdruecklich auf llmr-widget und bleibt stehen.
3. DAS SEITLICHE SCHWANKEN
--------------------------
Jede feste Pixelbreite des Themes wird unterhalb von 980 zurueckgesetzt -
#container, #header, #header-title samt h1, #header-menus, #wrapper,
#content, #sidebar, #footer mit .left und .right, #searchform, .nav_link,
#comment - und img,video,iframe,embed,object stehen auf max-width:100%.
Das Theme ragt also nicht hinaus.
Es kommt demnach aus Inhalt oder Plugin. Diese Regel behandelt das
Symptom, nicht die Ursache: sie schneidet ab, was hinausragt, statt es
schmaler zu machen.
clip statt hidden: overflow:hidden macht aus dem Element einen
Scrollbehaelter. Das stoert Sprungmarken und position:sticky. clip
schneidet nur. Aeltere Browser ignorieren den Wert und verhalten sich wie
bisher - kein Rueckschritt, nur keine Verbesserung.
========================================================================== */
@media (max-width: 980px) {
html{overflow-x:clip;}
}
@media (max-width: 760px) {
#header-title h1{font-size:clamp(22px,7.5vw,32px);}
.postinfo h2 a,
.single-title h2 a,
.postinfo-archive h2 a{font-size:17px;}
/*
* ERLAUBNISLISTE, nicht Verbotsliste.
*
* Zuerst standen hier die beiden Widgets, deren Klassennamen ich
* kannte. Das war der falsche Ansatz: die Seitenleiste enthaelt
* auch Archives, Random Backgrounds und Site QR Code, und was
* morgen dazukommt, weiss ich erst recht nicht.
*
* Umgekehrt braucht es kein Wissen ueber die anderen: alles weg,
* das Radar-Widget zurueck. Neue Widgets sind damit auf dem Handy
* von sich aus unsichtbar - das ist die sichere Richtung, denn ein
* vergessenes Widget kostet dort mehr als es bringt.
*
* Spezifitaet: #sidebar .widget ist (1,1,0), die Ausnahme mit dem
* zweiten Klassennamen (1,2,0) und gewinnt deshalb.
*/
#sidebar .widget{display:none;}
#sidebar .widget.llmr-widget{display:block;}
}
/* ==========================================================================
DIE RSS-ECKE IM HANDY-LAYOUT
==========================================================================
DIE URSACHE DES SEITLICHEN SCHWANKENS
-------------------------------------
Der sichtbare RSS-Link wurde unterhalb von 980 auf position:static gesetzt
und unterhalb von 760 ganz ausgeblendet. Die DREI Kaestchen, aus denen die
kleine Ecke gebaut ist, hat dabei niemand angefasst. Sie stehen weiterhin
auf position:absolute mit left:50% und margin-left:320px.
Nachgerechnet bei 393 Pixeln Fensterbreite: #header ist dort 361 breit,
die Haelfte davon 180,5, plus 16 Innenabstand von #container, plus 320
Versatz, plus 15 Breite - das erste Kaestchen endet bei 531. Das Fenster
hoert bei 393 auf. Rund 139 Pixel Ueberhang.
Ein absolut positioniertes Element nimmt keinen Platz im Fluss ein, aber
es vergroessert die scrollbare Flaeche. iOS liess die Seite deshalb seitlich
wandern - sichtbar nur beim schnellen Scrollen, weil sie danach
zurueckfedert.
Das ist auch der Grund, warum die Suche im Stylesheet nach festen Breiten
nichts ergab: hier ist keine Breite zu gross, sondern eine Position.
WARUM AUSBLENDEN UND NICHT VERSCHIEBEN
--------------------------------------
Die Ecke ist reine Zier - drei Rahmen ohne Inhalt, die zusammen ein
RSS-Symbol andeuten. Sie gehoert zum Desktop-Kopf, wo sie neben dem
Schriftzug sitzt. Im Handy-Layout gibt es diesen Platz nicht, und der Feed
ist dort ohnehin als Menuepunkt erreichbar.
Damit ist overflow-x:clip weiter oben vom Heilmittel zum Sicherheitsnetz
geworden. Es darf bleiben, faengt kuenftige Ueberhaenge aus Beitraegen ab -
wer Probleme lieber sieht als versteckt, nimmt es heraus.
========================================================================== */
@media (max-width: 980px) {
#header-rss-logo1,
#header-rss-logo2,
#header-rss-logo3{display:none;}
}
/* ==========================================================================
JEDER ARTIKEL EIN EIGENER KASTEN
==========================================================================
Zwischen zwei Artikeln lag ein grauer Streifen ueber die volle Spaltenbreite.
Er war kein Element: .post traegt margin:10px 10px 0, und ein Aussenabstand
ist durchsichtig - man sah das background:#181818 von #content hindurch.
Damit wirkten die Artikel wie Abschnitte einer durchgehenden Flaeche statt
wie einzelne Kaesten. Ohne diesen Hintergrund steht jeder Beitrag fuer sich:
#111 innen, gruener Rahmen, schwarz dazwischen.
WAS DABEI MIT VERSCHWINDET
--------------------------
Zwei Bereiche haben keinen eigenen Hintergrund und lagen bisher auf diesem
Grau:
- die Kommentarliste auf Einzelbeitraegen. Die Kommentare selbst haben
background:#151515 und einen Rahmen in #252525, bleiben also als Kaesten
lesbar; nur der Untergrund dazwischen wird schwarz.
- #add-info auf der 404-Seite.
Nichts Unsichtbares kommt zum Vorschein: hinter #content liegt #wrapper ohne
Hintergrund und dahinter body mit #000.
background:transparent, nicht background:none - die Kurzschreibweise wuerde
auch Bild, Position und Wiederholung zuruecksetzen. Hier ist nur die Farbe
gemeint.
Gilt in beiden Layouts. Es ist eine reine Farbaenderung, am Kastenmodell
aendert sich nichts, und ein Handy-Layout mit grauen Streifen und der
Desktop ohne waeren zwei verschiedene Entwuerfe.
========================================================================== */
#content{background:transparent;}