CSS Multiple Hintergrundfarben

-=Renegade=-

Lt. Junior Grade
Dabei seit
Nov. 2006
Beiträge
408
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
 
F

Flup

Gast
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.
 
Zuletzt von einem Moderator bearbeitet:

Jesterfox

Fleet Admiral
Dabei seit
März 2009
Beiträge
40.434
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

Banned
Dabei seit
Mai 2010
Beiträge
1.146
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?
 
Zuletzt bearbeitet:

-=Renegade=-

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2006
Beiträge
408
@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
 

Garbanas

Cadet 4th Year
Dabei seit
Mai 2010
Beiträge
72
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=-

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2006
Beiträge
408
@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
 

Anhänge

Garbanas

Cadet 4th Year
Dabei seit
Mai 2010
Beiträge
72
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>
 
Zuletzt bearbeitet:

-=Renegade=-

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2006
Beiträge
408
Okay danke, werd das dann probieren und Rückmelden.


Aber vielen Dank erstmal, sieht schon sehr erfolgsversprechend aus.



so long
Renegade
 

S.o.T.

Ensign
Dabei seit
Aug. 2009
Beiträge
145
-=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. :)
 
Zuletzt bearbeitet:

-=Renegade=-

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2006
Beiträge
408
@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.

Ensign
Dabei seit
Aug. 2009
Beiträge
145
@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! ;)
 
Zuletzt bearbeitet:

-=Renegade=-

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2006
Beiträge
408
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

Fleet Admiral
Dabei seit
März 2009
Beiträge
40.434
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=-

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2006
Beiträge
408
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
 

-=Renegade=-

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2006
Beiträge
408
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??
 
Top