Content einfügen mit CSS

July 19th, 2010 • CSS, Coding
Tags: CSS, Wordpress

Weil ich’s grad gesucht (und nicht gleich wiedergefunden) habe: Man kann mit CSS Content einfügen. Zum Beispiel diese kleinen Doppelpfeile (») im WordPress-Standardtheme werden dort wie folgt eingefügt:

.entry ul li:before, #sidebar ul ul li:before {
	content: "bla";
	}

UPDATE: Upsala, Copy&Paste-Formatierungs-Fehler

Abgerundete Ecken

July 10th, 2009 • CSS, Javascript
Tags: abgerundet, abgerundete Ecken, CSS, css3, round, rounded corners

Wer abgerundete Ecken auf seiner Webseite will, und keine Lust auf Photoshop-Orgien hat (oder CSS3 verwenden will^^), sollte sich mal die Corner Demo für jQuery ansehen. Danke an Moritz, once again!

outline: none;

December 7th, 2008 • 2 comments CSS
Tags: CSS, outline

Ein “aktiver” Link wird durch eine schmale gepunktete Linie dargestellt (oben). Allerdings nicht mehr, wenn man ein

* { outline: none; }

einfügt (unten). PS: Angeblich hilft das auch gegen diese blau glühenden Rahmen auf dem Mac.

Firefox vs. “background-position: center center;”

September 16th, 2008 • CSS, Firefox, Javascript
Tags: background-position, CSS, Firefox, Javascript

Während meiner Nachforschungen zum folgenden Problem habe ich auf einer Seite den Satz gelesen “Vielleicht das einzig Gute am Internet Explorer!”. Dem kann ich mich anschliessen Also. Ich habe ein Hintergrundbild in einem HTML-Element, zB dem body dieser Seite. Mit CSS setze ich dieses in die Mitte:

background-image: url(‘images/backg.jpg’);
background-attachment: fixed;
background-position: 50% 50%;

Nun habe ich einen sehr langen Text auf meiner Seite (zB dieses Blog), ein vertikaler Scrollbalken wird angezeigt. Und ich habe einen sehr kurzen Text (der Photobereich zur Zeit noch), bei dem keine Scrolleiste angezeigt wird. Beim Wechseln zwischen diesen beiden Bereichen springt das Hintergrundbild. Warum? Weil Firefox die Breite der Scrolleiste von der Breite der eigentlichen Seite abzieht, bevor er die Position des Hintergrundes auf der – nun schmaleren – Seite berechnet. Sehr nervig. Folgende Lösungen stehen zur Wahl:

Den ersten Ansatz liest man sehr häufig: Man mache die komplette Seite immer mindestens 1 Pixel höher als sie müsste:

html { min-height: 100%; margin-bottom: 1px; }

Die Folge: Man hat immer einen aktiven Scrollbalken rechts, der um mindestens einen Pixel scrollt. Auch nicht besser. Als nächstes bin ich über die Möglichkeit gestolpert, die Breite der Scrolleiste per Javascript auszulesen (ich leihe mir den Code mal, aus Archivierungsgründen ):

function getScrollerWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;

// Outer scrolling div
scr = document.createElement(‘div’);
scr.style.position = ‘absolute’;
scr.style.top = ‘-1000px’;
scr.style.left = ‘-1000px’;
scr.style.width = ’100px’;
scr.style.height = ’50px’;

// Start with no scrollbar
scr.style.overflow = ‘hidden’;

// Inner content div
inn = document.createElement(‘div’);
inn.style.width = ’100%’;
inn.style.height = ’200px’;

// Put the inner div in the scrolling div
scr.appendChild(inn);

// Append the scrolling div to the doc
document.body.appendChild(scr);

// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;

// Add the scrollbar
scr.style.overflow = ‘auto’;

// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;

// Remove the scrolling div from the doc
document.body.removeChild(document.body.lastChild);

// Pixel width of the scroller
return (wNoScroll – wScroll);
}

Da tun sich doch unvermutete Möglichkeiten auf!? Tja, bloß leider keine, die funktioniert hätte. Wenn jemand eine Idee hat, wie ich die Position eines Elementes, das prozentual (bzw. über “center”) positioniert ist, um eine Anzahl von Pixeln ändern kann: Immer her damit Mir blieb nur folgende Lösung, bei der ebenfalls ein permanenter Scrollbalken eingeblendet wird – allerdings ist dieser inaktiv, wenn er nicht benötigt wird, was ich persönlich sehr viel angenehmer finde:

:root { overflow-y: scroll; }

Diese Lösung ist die valide (!) CSS3-Version des invaliden

html { overflow: -moz-scrollbars-vertical !important; }

, das sowieso nur für Mozilla-Browser gilt. Erstaunlicherweise funktioniert die CSS3-”:root”-Version praktisch “überall”: Firefox 2.0.0.16 auf dem Mac, Safari 3.1.2 auf dem Mac, Firefox 3.0.1 auf dem PC, Safari 3.1 auf dem PC, dem IE soweiso, und dem W3C CSS Validator!