Ich will einen CSS-Style bauen, bei dem jede Überschrift rechts eine Reihe von Streifen bekommt, die bis zum Ende der Zeile läuft, vielleicht kennen einige den Stil ja von alten Windowmanagern. Die Höhe und der Abstand der Streifen soll sich natürlich an der größe der Überschrift orientieren, damit der visuelle Eindruck der gleiche bleibt, wenn man bei seinem Browser die Schriftgrößen umstellt. Soweit so gut, für einen einzigen Streifen hab ich mal naiv an folgenden Code gedacht:
<html><head><style type="text/css">
h1 { width:auto; }
h1 span { height:0.5em; width:auto; background:#f00; } </style><title>css test</title></head><body>
<h1>test<span></span></h1>
</body>
Leider funktioniert das nicht, denn inline-elementen kann man irgendwie kein width-attribut geben. Und wenn man daraus ein Block-Element macht, gehts auf ne neue Zeile, was der Absicht, es als Dekoration für eine Zeile zu benutzen irgendwie zuwiderläuft ;)
Falls wer Probleme hat sich vorzustellen was am Ende rauskommen soll hab ich auch nen Bild onlinegestellt, das nehm ich aber beizeiten wieder runter:
[img]
http://hrz.da.ru/tmp/cssproblem.png[/img]
<html><head><style type="text/css">
h1 { width:auto; }
h1 span { height:0.5em; width:auto; background:#f00; } </style><title>css test</title></head><body>
<h1>test<span></span></h1>
</body>
Umgekehrt wird ein Schuh draus:
<html>
<head>
<style type="text/css">
<!--
h1 { width:100%; background:red; }
h1 span { background: white; }
//-->
</style>
</head>
<body>
<h1><span>test</span></h1>
</body>
</html>
Das hilft Dir nur leider nicht, wenn es unter dem Text nicht weiß (oder sonstwie einfarbig) ist, ich glaub nicht, dass Du mit CSS die rote Färbung löschen, sondern nur überdecken kannst (Cascading eben).
[EDIT: Es sei denn, Du bist in der Lage, die Position von h1 relativ zum Hintergrundbild exakt vorherzusagen, dann kannst Du es mit background-position versuchen … /EDIT]
Der IE bietet seit Ewigkeiten transparente Hintergründe an. Ich wollte immer noch mal nachgesehen haben, ob das beim Mozilla nicht auch endlich geht. Das wäre in dem Fall dann die Lösung. Willst Du nicht nachgucken Harzilein? [img]
http://www.fb18.de/gfx/15.gif[/img]
Der IE bietet seit Ewigkeiten transparente Hintergründe an. Ich wollte immer noch mal nachgesehen haben, ob das beim Mozilla nicht auch endlich geht.
Nuja. Wenn der Text im <span /> einen transparenten Hintergrund hat (style="background:transparent"), dann scheint das rot darunter durch. Das bringt also nix. Wenn IE "transparent" so interpretiert, dass der Dokumentenhintergrund genommen wird ist das schön und gut. Aber was genau ist das, der "Dokumentenhintergrund"? In unserem Fall hoffentlich nicht das darunterliegende Rot. Aber möglicherweise die Farbe eines dahinterliegenden <div />. Wie genau bestimmt IE denn diese ominösen transparenten Hintergründe? Eine tolle Idee wäre ein Konstrukt wie style="background:inherit-from('DOM-ID')". Aber sowas gibt's bestimmt nicht, oder?
h1 { width:100%; background:red; }
h1 span { background: white; }
Das hilft Dir nur leider nicht, wenn es unter dem Text nicht weiß (oder sonstwie einfarbig) ist, ich glaub nicht, dass Du mit CSS die rote Färbung löschen, sondern nur überdecken kannst (Cascading eben).
Ein Hintergrundbild gibts zwar nicht, aber nun gibts natürlich das Problem, dass ich aus dem Streifen nicht einfach mehrere machen kann. Wie gesagt, die Streifen als Hintergrundbild will ich nicht, weil sie dann relativ zur überschrift mal dünner und mal dicker sind, ich Streifen, die (wie in meinem source ja angedeutet) z.B. 1/2n em hoch sind mit 1/2n em abstand
Deine Andeutungen versteh aber auch mal einer. Ich dachte, die roten Streifen im Bild wären einfach bunt verteilt gewesen ;-)
Ansonsten dürfte Dir ein aktueller Firefox und inline-table helfen. Ich kann mangels brandaktuellem Firefox leider nicht prüfen ob folgendes geht:
<h1>test
<span style="display: inline-table; width: 100%;"><span
style="display: table-row; background-color: red;"></span><span
style="display: table-row; background-color: white;"></span><span
style="display: table-row; background-color: orange;"></span>
</span></h1>
Eigentlich gibt es keinen Grund, warum das _nicht_ funktionieren sollte…
ich würde folgendes empfehlen, wenn auch ein wenig umstäändlich vielleicht…
<html><head>
<style type="text/css">
#gross,#mittel,#mittelgross,#klein,#mittelklein{
font-family: Arial;
width: 800px;
background-color: red;
margin-top: 10px;
}
#gross{font-size: 70px;}
#mittel{font-size: 35px;}
#mittelgross{font-size: 25px;}
#klein{font-size: 5px;}
#mittelklein{font-size: 15px;}
span.textRed{color: red;}
span.backWhite{background-color: white;border: 1px solid white;}
</style>
<title>css test</title>
</head><body>
<div id="gross"><span class="backWhite">Texttext</span><span class="textRed">Texttext</span></div>
<div id="mittel"><span class="backWhite">Texttext</span><span class="textRed">Texttext</span></div>
<div id="mittelgross"><span class="backWhite">Texttext</span><span class="textRed"Texttext</span></div>
<div id="klein"><span class="backWhite">Texttext</span><span class="textRed">Texttext</span></div>
<div id="mittelklein"><span class="backWhite">Texttext</span><span class="textRed">Texttext</span></div>
</body>
hat bei mir tadellos funktioniert im ie, firefox und bei opera…
Ansonsten dürfte Dir ein aktueller Firefox und inline-table helfen.
Harr, da fängt man grad an sich zaghaft von seinem "webdesign like it's 1999"-mindset zu verabschieden und dann ist die Lösung für das Problem wieder ne Tabelle. ^_^
Find ich gut. Ist natürlich schade, dass es dann nicht für cross-browser-kompatibilität reicht. Aber ich kanns dann ja aufm Radar haben wenns mal Standard wird. Schönen Dank.
[EDIT]
Eigentlich gibt es keinen Grund, warum das _nicht_ funktionieren sollte…
Doch, leider der gleiche wie bisher, der span bekommt einfach keine Breite.
[/EDIT]
Nene, also px will ich bei mir gar nicht drin stehen haben. Ich benutz selber sehr gerne Ctrl-+ und Ctrl– und mags überhaupt nicht wenn so Designer da irgendwelche Größen vorgeben. Farben, Schriftfamilien, ok, kein Problem.
