CSS Multiple Hintergrundfarben

-=Renegade=- · 2. November 2010

Hallo,

Ich habe momentan folgendes Problem:

Gegeben ist eine Tabelle mit verschiedenen Feldern, in denen Werte zentriert in der Form
Z ( V / W / X / Y ) stehen, wobei Z = V + W + X + Y, also die Gesamtanzahl. V, W, X, Y sind verschiedene Werte, deren Prozentanteil in der Tabellenspalte visualisiert werden soll.

Am einfachen Beispiel soll dies zB so aussehen

100 ( 40 / 30 / 20 / 10 )

40% dieser Tabellenspalte sollen nun zB grün als Hintergrundfarbe erhalten,
30% sollen blau als Hintergrundfarbe haben
20% sollen gelb als Hintergrundfarbe haben
und 10% sollen rot als Hintergrundfarbe haben.

Ich hätte ja kein Problem, wenn ich einfach mehrere <div> Boxen hintereinander ebenso anordne, aber wie bekomme ich dann den Text Z ( V / W / X / Y ) noch zentriert in die Tabellenspalte?

Ich gehe davon aus, dass man das nur über Layer lösen kann? Aber wie?

JavaScript soll dabei NICHT zum Einsatz kommen.

Vielen Dank im Voraus,

so long
Renegade

Flup · 2. November 2010

Darfs CSS3 sein? (Wobei das eher unwahrscheinlich ist, wenn du JS ausm weg gehn willst)

EDIT: Sry hatte die Frage falsch verstanden, dachte du wolltest quasi auf bedingte Formatierung raus. Ob das miit dem "Anteilindikator" auch geht, weiß ich nicht, sry.

Jesterfox · 2. November 2010

Eleganter Ansatz: SVG als Hintergrundgrafik.. dürfte aber momentan an der Browserkompatibilität scheitern...

Die DIVs sind wohl der beste Weg, auch wenns in gerfrickel ausartet...

Den Text kann man mittels absoluter Positionierung über die DIVs legen, aber dazu sind Tricks notwendig, wegen der Tabelle.

Damit die absolute Positionierung klappt musst du die DIVs und den Text nochmals in einen DIV zusammefassen und diesem ein "position:relativ" verpassen. Dann kannst du den Inhalt des äußeren DIVs per position:absolute innerhalb des Wrappers ausrichten.

Gajel · 2. November 2010

Du könntest den einzelnen Tabellenspalten id's oder klassen zuweisen und diese dann mit css füttern.

Alle Spalten mit 40% haben z.B. die id="40er"
Alle Spalten mit 40% haben z.B. die id="30er"
usw.....

Das ganze ist dann aber extrem unflexibel und mühsam, je nach dem wieviel Tabellen du mit wieviel Spalten hast.

Zu 2. text-align:center; oder verstehe ich da was falsch?

-=Renegade=- · 2. November 2010

@Flup: Wenn vermeidbar wäre es bevorzugt, aber wenn du ein Beispiel hast, würde ich auch das probieren.

@Gajel: Das war nur ein Beispiel, die Werte sind immer grundverschieden, ebenso die Prozentsätze, ergo wird das nicht klappen.
Das mit text-align:center war mir schon klar, es ging nur darum, zu unterstreichen, dass es zentriert werden muss (sonst könnte man im ersten div beginnen und mit whitespace:no-wrap arbeiten)

@Jesterfox: SVG... hmja, IE kanns erst ab 9 oder? Dann siehts eher schlecht aus, zumindest IE8 (bevorzugt natürlich IE6) kompatibel sollte es sein.

Welche Tricks mit der Tabelle??

so long

Gajel · 2. November 2010

hm dann wirst du wohl nicht um php drum herum kommen.

Garbanas · 2. November 2010

Angenommen du kannst die Werte, die du in die Tabellen schreibst, auch anderswohin schreiben (ins HTML), dann geht das mit Layern so:

HTML:

<html>
<head>
<style type="text/css">
td {
	width: 200px;
	height: 40px;
	border: 1px solid red;
	padding: 0;
}

.wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.tdbg {
	position: absolute;
	height: 100%;
	background-color: green;
}

.tdtext {
	position: absolute;
	width: 100%;
	text-align: center;
}
</style>
</head>
<body>

<table>
 <tr>
  <td>
   <div class="wrap">
    <div class="tdbg" style="width:40%"></div>
    <div class="tdtext">40%</div>
   </div>
  </td>
  <td><div class="wrap"><div class="tdbg" style="width:30%"></div><div class="tdtext">30%</div></div></td>
  <td><div class="wrap"><div class="tdbg" style="width:20%"></div><div class="tdtext">20%</div></div></td>
  <td><div class="wrap"><div class="tdbg" style="width:10%"></div><div class="tdtext">10%</div></div></td>
 </tr>
</table>

</body>
</html>

-=Renegade=- · 2. November 2010

@Gajel: Ich setze auch PHP ein, um die Werte aus der DB zu holen, aber warum sollte mir das hier weiterhelfen?

@Garbanas: Ich werde das ausprobieren, aber so auf den ersten Blick glaub ich geht das nicht, da du den Text ja wieder immer extra schreibst.

Hab mal ein Bild einer Tabellenspalte angehängt, wie es am Ende ca. aussehen sollte.

so long

Jesterfox · 2. November 2010

Habs ja versucht im letzten Absatz zu beschreiben, hatte zu wenig Zeit für konkreten Code. Aber den hat ja Garbanas jetzt nachgeliefert ;-)

Garbanas · 2. November 2010

Achsooo - mit der Grafik wird das klar. Code kommt nach dem Edit

edit:

HTML:

<html>
<head>
<style type="text/css">

.wrap {
	position: relative;
	width: 400px;
	height: 50px;
	overflow: hidden;
}

.balken {
	float: left;
	height: 100%;
}

.text {
	position: absolute;
	width: 100%;
	text-align: center;
	line-height: 50px;
}


.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue; }
.yellow { background-color: yellow; }
</style>
</head>
<body>


 <div class="wrap">
  <div class="balken green"  style="width:40%"></div>
  <div class="balken red"    style="width:30%"></div>
  <div class="balken blue"   style="width:20%"></div>
  <div class="balken yellow" style="width:10%"></div>
  <div class="text">40% / 30% / 20% / 10%</div>
 </div>


</body>
</html>

-=Renegade=- · 2. November 2010

Okay danke, werd das dann probieren und Rückmelden.

Aber vielen Dank erstmal, sieht schon sehr erfolgsversprechend aus.

so long
Renegade

S.o.T. · 3. November 2010

-=Renegade=-,

leider ist das, was du dir wünschst wirklich nur sehr schwer zu basteln. Das Problem sind allerdings nicht die Möglichkeiten von HTML und CSS, sondern die Browser-Unterstützung. Spontan fällt mir keine Lösung ein, die ich nach meinen Grundsätzen akzeptieren könnte, weil am Ende immer totaler Blödsinn im Code steht (jedenfalls habe ich zurzeit den Eindruck). Daher würde ich mich zunächst fragen, ob ich diese Friemelei und den Chaos-Code für mein Wunschergebnis in Kauf nehmen sollte: Ich meine nein.

Die schönste Lösung wäre natürlich ein vom Browser berechneter Farbverlauf mit CSS3, aber ich schätze, dass du auch wert darauf legst, dass es am Ende überall funktioniert und das wäre nicht gegeben. Falls du dennoch darüber etwas wissen möchtest, wie man mit CSS3 Farbverläufe (auch mit mehreren prozentualen Abstufungen, wie du sie eben haben willst) erstellt, dann lege ich dir folgende Tags für ein bisschen Recherche ans Herz:

css3 gradients
moz-linear-gradient
webkit-gradient

Ich hoffe, du kannst damit ein bisschen was anfangen.

-=Renegade=- · 3. November 2010

@S.o.T: Vielen Dank für den Input, aber es ist gar nicht so kompliziert

@Garbanas: Nochmals vielen Dank für die Lösung, wenig aufwand und relativ wartungsfreundlich

Funktioniert im FF und sogar im IE8 einwandfrei (6er werd ich mal ausprobieren sobald ich wieder wo einen finde

)

Vielen Dank,

so long

S.o.T. · 3. November 2010

Zitat von -=Renegade=-:
@S.o.T: Vielen Dank für den Input, aber es ist gar nicht so kompliziert

Es ist sehr schlechter Code, weil er eben total bedeutungslos (unsemantisch), aufgebläht und eben nicht leicht wartbar ist. Aber wie gesagt: Das ist eine Frage des eigenen Anspruchs an Qualität.

Edit: Um Webseiten mit allen relevanten Versionen des Internet Explorers zu testen, gibt es ein tolles Werkzeug: IETester

In dem Programm kannst du einfach Tabs mit den unterschiedlichen IEs öffnen (geht bei IE5.5 los und hört bei IE8 auf; IE9 musst du logischerweise extra installieren).
Ideal zum Testen, ein richtiges Profiwerkzeug!

-=Renegade=- · 3. November 2010

Natürlich mag es vllt nicht so "einfach" sein, wie es mit CSS3 möglich wäre, aber allemal einfacher, als wenn man mit Layern oder dergleichen hätte arbeiten müssen. Das ich dafür ein paar DIV Boxen brauche, damit hab ich schon gerechnet, da es ja für eine einzelne DIV Box eben keine adequate Funktion gibt

Da sich die Anforderung (4 Farben) nicht ändert, ist es auch relativ einfach wartbar, da ich alle Einstellungen direkt im Style Sheet vornehmen kann (ändern der Farbe, Höhe, Border hinzufügen,...)

Also ich denke, bevor ich auf diese geforderte Funktionalität verzichte, kann man diesen Code allemal verwenden.

@IE Tester: Danke für das Tool, kannte bisher nur IE Tab.

so long

Jesterfox · 3. November 2010

Ja, wirklich schön ist die Lösung nicht. Deswegen hoffe ich ja, dass der IE9 bald die älteren Versionen ablöst, damit man SVG verwenden kann ;-)

Der Code an sich sollte eigentlich in allen noch relevanten Browsern funktionieren. Der problematische ist diesmal eh der FF, wegen dem braucht man den extra Wrapper-DIV. Allerdings liegt das ganze an den CSS-Specs die da leider seltsam sind und das verhalten der Browser bei position:relative an TDs als "undefiniert" beschreiben. Und der FF nimmt das ziemlich wörtlich ;-)

-=Renegade=- · 4. November 2010

So, soeben ist eine sehr lustige Sache mit dem Code aufgetaucht.

Hier ist mal die etwas modifizierte Version, die ich gerade verwende:

Code:

	.wrap {
		position: relative;
		width: 98%;
		height: 18px;
		overflow: hidden;
		padding:2px;
	}
	
	.balken {
		float: left;
		height: 18px;
		outline-width:2px;
		outline-style:outset;
	}
	
	.text {
		position: absolute;
		width: 100%;
		text-align: left;
		font-weight: bold;
	}
	
	.gut { background-color:#339933; outline-color:#339933 }
	.ws { background-color:#FF9900; outline-color:#FF9900; }
	.ut { background-color:#FF3300; outline-color:#FF3300; }
	.wsut { background-color:#CC0000; outline-color:#CC0000; }

Der Code funktioniert in FF und Chrome ohne Probleme, nur im IE tritt ein merkwürdiger Fall auf: In ca. 50% der getesteten Browser wird der Text nicht über die Balken geschrieben, sondern rechts davon (und ist daher nicht oder nur teilweise sichtbar). Das ist aber unabhängig von der Versionsnummer, in manchen IE 8 geht es, in manchen nicht.

Ich hab absolut keine Ahnung woran das liegen kann, eine solche Einstellungsoption kann ich mir nicht vorstellen?? Oder gibt es irgendetwas was das beeinflussen kann??

Vielen Dank im Voraus

so long
Renegade

Jesterfox · 4. November 2010

Hm, möglicherweise liegts daran, das der Text keine expliziten Koordinaten hat, ich glaub da reagiert der IE ab und an komisch. Gib mal top:0 und left:0 mit an, evtl. gehts dann.

-=Renegade=- · 4. November 2010

Okay, hab jetzt bei Balken und Text jeweils top und left hinzugefügt und jetzt wird es richtig lustig:

In den IEs, in denen es bereits ging, passt alles nach wie vor, aber in den IEs, in denen es nicht ging, werden jetzt manche Tabellenspalten richtig angezeigt und bei manchen seh ich noch immer nichts. Das ganze ist unabhängig von Reihe und Spalte, mal wird ein Wert angezeigt, mal nicht. In einem IE 8 werden zB nur 2 von aktuell 23 Werten nicht angezeigt, in einem IE6 sind es 11 von 23 Werten, die nicht angezeigt werden.

Das gibts doch nicht oder??

CSS Multiple Hintergrundfarben

Lt. Junior Grade

Flup

Gast

Legende

Banned

Lt. Junior Grade

Banned

Cadet 4th Year

Lt. Junior Grade

Anhänge

Legende

Cadet 4th Year

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Legende

Lt. Junior Grade

Legende

Lt. Junior Grade

Ähnliche Themen