CSS Tabellenzellen mit eigenem Hintergrund - skaliert

[cumulonimbus8]

Hallo!

Ich hoffe, dass CSS auch die richtige Baustelle ist.

Über etwas Mathematik erzeuge Code für eine Tabelle mit einer Hand voll Zellen. Das heißt: die interessanten Zellen fallen je nach dem unterschiedlich groß aus. Mein Traum sieht so aus, zwei Zellen mit eigener Hintergrundgrafik (Hintergrund!) zu versehen die aber, und das ist der riesige Stolperstein, aus einer ›übergroßen‹ Datei genau auf die jeweilige Zelle skalierte wird. Nicht gekachelt, nicht beschnitten!

<img …> kann ich ja einfach skalieren - nur nimmt das dann allen Platz in der Zelle ein. Es soll aber einfacher Fließtext über einem Hintergrund bei rauskommen, also müsste <td background= …> gezogen werden wo ich aber im Gegensatz zu img nicht skalieren kann.

Mit CSS einzelne Zellen über ID anzusprechen ist einfach. Nur das Skalieren will nicht gelingen. Geht das überhaupt?
Bisher habe ich die Quellgrafik(en) durch IrfanView geschleust und eine damit skalierte (mithin statische) eigene Datei eingeblendet. Das würde ich mir gerne dynamisch sparen.

CN8

 

[Daaron]

- background-size: contain;
- background-size: cover;
Je nach Situation. Willkommen in CSS3, willkommen in einer Welt, die IE<9 ewig verschlossen bleiben wird (und das ist GUT SO!)

Oh... und du hast nicht allen ernstes den Hintergund per background= setzen wollen, oder? Wenn ich so etwas nochmal sehe, ich schwör dir, ich find einen Weg dir durch das Forum heißen Kaffee auf die Finger zu schütten!

 

[Kaulin]

was ist denn an background= so schlimm?

 

[Daaron]

Eine solche Schreibweise verweist auf HTML Attribute... und 90% dieser dämlichen Styling-Attribute wurden Gott sei Dank endlich entweder als deprecated markiert oder aber komplett gestrichen.
Also: NEIN NEIN NEIN. Design und Semantik müssen streng getrennt werden.

 

[cumulonimbus8]

Am Rande:
Tschö… Das Dings an dem ich rumschustere müssen Laien einigermaßen kapieren. Da ist für den bisherigen einfachen Fall der «background» da in der Tabelle wo man ihn sucht immer noch… unfallfreier… als CSS.

Was ich vor habe ist in der Tat das so umzustricken, dass in einem Style-Block ›oben‹ (alles nicht so einfach da ich dynamisch aus Vorlagen maschinengerierten Code habe der möglichst auch dynamisch neu zu erzeugen sein muss - ein arges Gezerre) die paar Eckdaten einbauen will an denen man nach der Erzeugung und Optimierung (durch den Laien, mittels Makro in XL…) nur noch Feinheiten nachstellen kann & darf.

Wie erwähnt gehen die Grafiken (in besagtem Makro, auf Wunsch) durch IrfanView, das gibt ein Bilderchaos das ich durch live-Skalieren »greifen« will. Die lieben Leutchen erzeugen nämlich gar zu ungern neu, da wird fleißig aus alten Projekten geklont - und zwar mehr als wirklich nötig wäre. Und wo kommt die geklaute Grafik mit dem alten Namen hin? Erraten…

Ach ja… Ich habe das unbestimmte Gefühl, dass mir IE<9 auf den Fersen bleibt… Können 7, 8, 9 der den Code nicht werde ich wegen mangelnder Abwärtskompatibilität erwürgt.


-cover tut - wie Chrome beweist. Aber eben nicht in den ollen IEs. Und ich will noch ein bisschen leben. Es wäre zu schön gewesen… Sieht also nach Plan B aus den ich meiden wollte wie der Teufel das Weihwasser. Oder gibts Rettung?

CN8

 

[Kaulin]

@Daaron
Und wo hast du bei CSS3 die Trennung von Design und Semantik?

 

[Daaron]

Was ich vor habe ist in der Tat das so umzustricken, dass in einem Style-Block ›oben‹ (alles nicht so einfach da ich dynamisch aus Vorlagen maschinengerierten Code habe der möglichst auch dynamisch neu zu erzeugen sein muss - ein arges Gezerre)

während background= und ähnlicher Scheiß sich einfahc nicht gehört, ist style="background:url()" vollkommen legitim, wenn es das Anforderungsprofil so erfordert.

Ach ja… Ich habe das unbestimmte Gefühl, dass mir IE<9 auf den Fersen bleibt… Können 7, 8, 9 der den Code nicht werde ich wegen mangelnder Abwärtskompatibilität erwürgt.

Schreib ein JS-Fallback.
Du hattest doch z.B. schon den Ansatz mit <img>. Du hat bei diesem Ansatz nur den z-index und position:absolute; vergessen.

Mein Tip: Schreib es mit CSS Cover. Zusätzlich bindest du Modernizr im Head ein (würd ich eh immer machen). Für alle Browser, die kein background-size beherrschen, liest du die HG-URL der Zelle aus, setzt sie dann auf none. Jetzt erstellst du als erstes Kind der Zelle n <img> mit absoluter Position und als src die HG-URL.
Mit einem der gängigen JS-Frameworks ist das ein Kinderspiel.

Für das Schlachtvieh, das weder einen CSS3/HTML5-Browser verwendet noch JS aktiv hat... Einfach krepieren lassen.

Und wo hast du bei CSS3 die Trennung von Design und Semantik?

Cascading Style Sheets... Noch Fragen?

 

[cumulonimbus8]

während background= und ähnlicher Scheiß sich einfahc nicht gehört,

Ich weiß das - aber hantier du mal mit vorsintflutlichen ›Vorlagen‹… Was alles so einfach scheint haut dir alle Nase lang einen Torpedo rein…

<html>
  <head>
<style type="text/css">
 #AA { background: url("http://www.irgendwie.de/irgend/wo/irgndwann1.gif") }
 #BB { background: url("http://www.irgendwie.de/irgend/wo/irgndwann2.gif"); background-size: cover;}
 #DD {background-color:"#ffff00"}
</style>
  </head>
  <body>
<table>
 <tr height="200">
  <td id="AA" width="60">A</td>
  <td id="BB" width="350">B</td>
 </tr>
 <tr height="70">
  <td id="DD">C</td>
  <td id="DD">D</td>
 </tr>
</table>
  </body>
</html>

OK, für das Machwerk muss man sich bei HTML (und Nena) geradezu entschuldigen - aber meinste das klappt? Der Alte IE füllt die unteren Zellen brav in Gelb. Chrome ignoriert das geflissentlich!! Die Idee 3x3 Zellen so zu einem Rahmen mit Inhalt zu benutzen machts wie einer der 99 Luftballons: sie platzt laut.

Irgendwie bin ich völlig bedient. Da denkste es klappt leise und geschmeidig, ein kleiner Skalierbaustein noch zum Glück - päng… Da auch FF keine Lust hat mit dem Füllen ist diese Methode offenbar mal wieder zu irgendwas nicht konform Also zurück zum Anfang und (Abbitte) bgcolor. Oder ist das ein brüllender Syntaxbockschuss?


Fallback? Musste ich mir eben erst mal ansehen was das ist. Da lasse ich besser mal die Finger von, das derzeit aktuelle Gewusel reicht im Augenblick völlig aus mir den Tag zu vermiesen.

CN8

 

[Daaron]

IDs sind eindeutig. Daher heißen sie auch IDs... Jeder Validator haut dir das links und rechts um die Ohren. Kannst du dir übrigens für die Zukunft merken: validator.w3.org Solange du nicht 100% valides HTML im Blindflug schreiben kannst, solltest du immer den Validator füttern. Wenn er meckert, dann hast du Scheiße gebaut.

Und weise nicht jeder Kasper-Zelle ne ID zu, nur damit du jeder ID ne Background-Grafik zuweist. Schreibs als Inline-Style, das ist hier vollkommen legitim. Dazu gibtst du allen Zellen noch einheitliche Klassen, damit du dich nciht laufend wiederholst, was background-size, -repeat und -position angeht.

Und ein Fallback ist nichts anderes als: Wenn A nicht geht, mache B.

 

[cumulonimbus8]

Das war und ist nur Test-Code um überhaupt zu sehen was passiert (grummel…) Dass ich nicht alles mit IDs (was statt seiner?) versehen weiß ich selbst; für ein Hintergrundbild sollen auch nur 2 aus einer ganzen Menge Zellen herhalten (AA und BB).

Die Idee 3x3 Zellen so zu einem Rahmen mit Inhalt zu benutzen
Und da verließen sie ihn. OK, eine ID 2x zu verwenden war wohl nicht so sonderlich schlau - nur habe ich CSS eben (bisher) so verstanden: ich definiere eine Bezeichnung [Selector?!] und weise der bestimmte [Property?!] Eigenschaften [Value?!] zu um einen »Label« (Selector) einsetzen zu können.
So doof bin ich nun auch nicht - würde ich z.B. das <a>-Tag anfassen würde sich ja eben jeder Link entsprechend verändern. Ich will aber nicht jede Zelle erfassen sondern (allerdings) einzelne Gruppen. Daher dachte ich an ID… Es muss ja offenbar anders gehen. Class? Aber wie geht das denn nun wieder?

Schreibs als Inline-Style
So weit ich das jetzt kapiere wäre «Inline-Style» ein voller Angaben-Satz für jede einzelne Zelle. Und genau das will ich ja weghaben - oder ich bin handwerklich und von der Übersichtlichkeit so weit als täte ich pures HTML zu verwenden. OK, kann das Makro abfrühstücken; wär' aber schöner ohne…


Gibts denn kein plumpes Syntax-Buch für dumme Intelligente wie mich? Kapitel Schriftgestaltung - wie definiere ich Font, Größe, Farbe, Stil, Stiltypen (z.B. Kapitälchen); wie heißen Schlüsselworte, wie ist ihre Syntax? Oder wem alles dürfte ich «background» andingen - Zellen, Links, Text (vermutlich), den Body… Was ich nicht konkret kenne da kann ich nicht nach fragen. Was ich will weiß ich, nur die Syntax fehlt mir (oder die Auskunft: gibts nicht.)

CN8

 

[[ChAoZ]]

... nur habe ich CSS eben (bisher) so verstanden: ich definiere eine Bezeichnung [Selector?!] und weise der bestimmte [Property?!] Eigenschaften [Value?!] zu um einen »Label« (Selector) einsetzen zu können.
So doof bin ich nun auch nicht - würde ich z.B. das <a>-Tag anfassen würde sich ja eben jeder Link entsprechend verändern. Ich will aber nicht jede Zelle erfassen sondern (allerdings) einzelne Gruppen. Daher dachte ich an ID… Es muss ja offenbar anders gehen. Class? Aber wie geht das denn nun wieder?

<style>
 .class1 { border: 1px solid red; }
#id1 { font-size: 20px; }
</style>

<div id="id1" class="class1">Hello world!</div>
<div class="class1">Hello world 2!</div>
<div class="class1">Hello world 3!</div>
<div class="class1">Hello world 4!</div>
<div class="class1">Hello world 5!</div>

IDs (# Selektor) sind Unique.
Hast du 2 identische IDs im Dokument und du wendest einen Selektor auf diese ID an, so erhälst du nur das erste Element was gefunden wurde.

$('#id1') gibt dir exakt EIN Element zurück.

Classen (. Selektor) dürfen unendlich oft vorkommen.
Stichwort: Wiederverwendbarkeit.

$('.class1') gibt dir exakt FÜNF Elemente zurück.

Schreibs als Inline-Style
So weit ich das jetzt kapiere wäre «Inline-Style» ein voller Angaben-Satz für jede einzelne Zelle. Und genau das will ich ja weghaben - oder ich bin handwerklich und von der Übersichtlichkeit so weit als täte ich pures HTML zu verwenden. OK, kann das Makro abfrühstücken; wär' aber schöner ohne…

<div style="border: 1px solid red"><!-- inline style --></div>

Ist einfacher zum Lesen im Forum.
Im Code bitte ehr drauf verzichten.

Gibts denn kein plumpes Syntax-Buch für dumme Intelligente wie mich? Kapitel Schriftgestaltung - wie definiere ich Font, Größe, Farbe, Stil, Stiltypen (z.B. Kapitälchen); wie heißen Schlüsselworte, wie ist ihre Syntax? Oder wem alles dürfte ich «background» andingen - Zellen, Links, Text (vermutlich), den Body… Was ich nicht konkret kenne da kann ich nicht nach fragen. Was ich will weiß ich, nur die Syntax fehlt mir (oder die Auskunft: gibts nicht.)

http://www.css4you.de/
http://de.selfhtml.org/

 

[Daaron]

Die Idee 3x3 Zellen so zu einem Rahmen mit Inhalt zu benutzen

Das ist eh sowas von grundlegend falsch, das glaubst du gar nicht. <table> soll NUR UND AUSSCHLIESSLICH tabellarische Inhalte enthalten. NICHTS sonst.

ich definiere eine Bezeichnung [Selector?!] und weise der bestimmte [Property?!] Eigenschaften [Value?!] zu um einen »Label« (Selector) einsetzen zu können.

Du hast kaskadierende Selektoren, denen du Style-Definitionen zuweist, ja. Das Zauberwort ist hier die Kaskade. (rate mal, wofür das C in CSS steht)

Daher dachte ich an ID… Es muss ja offenbar anders gehen. Class? Aber wie geht das denn nun wieder?

Und es ist dir nie in den Sinn gekommen, bei irgend einer x-beliebigen Webseite einfach mal zu gucken, wie alle Anderen sowas machen?

So weit ich das jetzt kapiere wäre «Inline-Style» ein voller Angaben-Satz für jede einzelne Zelle.

Inline-Styles sind eine nützliche und kompakte Lösung, wenn man EINZELNE Elemente EINZIGARTIG manipulieren will.

Gibts denn kein plumpes Syntax-Buch für dumme Intelligente wie mich?

Egal, was du mal gelernt hast, du musst doch mal mit SelfHTML in Berührung gekommen sein. Auch wenn der Kram inzwischen schon n ellenlangen Bart hat (kein HTML5, kein CSS3), es ist aber immer noch korrekt genug und vor allem verständlich.

 

[cumulonimbus8]

@[ChAoZ]
Ich bin ja mal heilfroh, dass ich nach den Tritten von Daaron in den Hintern deine Beispiele auf Anhieb kapiert habe.
Die Crux ist - das was ich mir so vorstelle lässt sich wohl doch nicht so einfach erreichen.


<table> soll NUR UND AUSSCHLIESSLICH tabellarische Inhalte enthalten. NICHTS sonst.
Ööööhhh..? Irgndwas muss und möchte ich wohl denn doch in die Tabelle (als uraltes Strukturelement) schreiben. Und auch dem Auge etwas bieten.
Nochmals: ich kriege Kram vorgebacken aus der Retorte und muss an dem so gut es geht rumfriemlen. Dürfte ich das selbst bauen sähe die Welt ganz anders aus.

Kaskadieren wäre nett - wenn die Browser das auch täten was nach der Syntax logisch erschiene. Meine Tabellenstruktur hat leider nun mal unterschiedliche Gefache, und da hat's noch weitere Tabellen die mir aus der Retorte spendiert werden - globales Styling scheitert. Fasse ich 1x <td> an habe ich das leidlich unkontrollierbar überall, und das nützt mir nix.

Und es ist dir nie in den Sinn gekommen, bei irgend einer x-beliebigen Webseite einfach mal zu gucken, wie alle Anderen sowas machen?
Schlaumeier. Wenn CSS' mit Definitionen im Hintergrund geladen werden und ich die nicht kenne nützt mir der Rest vom Quelltext auch nicht viel.
Inline-Styling nutze ich nun schon für Fonts. Fließtext ist in dem Gemörkse das Wenigste, alles Tabellenstrukturen aus der Maschine. Daher hatte ich auf IDs oder Klassen gehofft. Bleibt also Inline-Styling - womit ich vom Aufwand auch nicht weiter wäre.

Inline-Styles sind eine nützliche und kompakte Lösung, wenn man EINZELNE Elemente EINZIGARTIG manipulieren will.
Das Blöde ist, dass ich einen (ach was, mindestens zwei) ganzen Schwung gut sortiert verteilter Einzeklämpfer habe die alle gleich gestylt sein sollen - damit explodiert die Einzelanfertigung. Und der wollte ich an den Kragen.


Bezüglich SelfHTML (was ich wahrlich schon Jahre kenne) oder das empfohlene CSS4YOU kann ich nur sagen, dass ich ›rein zufällig‹ von Google aus auch da landete u d heute fleißig las. In diesen Kompendien steht alles, nur nicht das Nötige an Details was ich bei den Beispielen sofort rückfragen würde. Oder sie sind nicht ausführlich intern vernetzt - wer Schriftgestaltung braucht wird, ohne Hinweise drauf, nie auf Dinge wie Pseudo-Elemente (p::first-letter) kommen oder danach suchen.
Deswegen wäre mir ein gedrucktes Buch daneben lieber als all diese Hilfen in denen man sich verläuft.


Damit schlage ich vor diesen Fall zu schließen. Was ich erfahren wollte habe ich erfahren und rudere alle schönen CSS-Ideen auf HTML zurück da diese Mittelchen alles Unmögliche können, beim Einfachen Möglichen aber eine Bauchlandung hinlegen oder eher noch komplizierter ausschlagen.

CN8

 

[Daaron]

@[ChAoZ]
Ööööhhh..? Irgndwas muss und möchte ich wohl denn doch in die Tabelle (als uraltes Strukturelement) schreiben. Und auch dem Auge etwas bieten.

Es gibt Daten, die von ihrer Natur her tabellarisch sind. So ein Warenkorb in nem Online-Shop ist da ein gutes Beispiel. Viele Zeilen mit ner festen Folge von Spalten für Produktname, Bild, Beschreibung, Preis pro Stück, Anzahl, Gesamtpreis. Oder denk an das Produktdatenblatt eines PCs:
RAM: 4GB
CPU: Rumsdibums mit 4x3,6GHz
Grafik: hatter, hatter
Auch das ist tabellarisch.

Was hingegen NICHT tabellarisch ist, ist folgendes:
[Platzhalter][Platzhalter][Platzhalter]
[Platzhalter][Content][Platzhalter]
[Platzhalter][Platzhalter][Platzhalter]

Du hast es richtig erfasst, <table> ist ein STRUKTUR-Element, kein DESIGN-Element. Es GIBT keine Design-Elemente. HTML definiert ausschließlich eine semantische Struktur, niemals Design.

Kaskadieren wäre nett - wenn die Browser das auch täten was nach der Syntax logisch erschiene.

Ähm... Du verstehst nur die Syntax nicht. Jeder Selektor hat eine Gewichtung. X-wieviele Selektoren können auf ein- und dasselbe Element verweisen. Wollen mehrere Selektoren den selben Style eines Elementes ändern, dann gewinnt der Selektor mit der höchsten Gewichtung.

also: td < td.class < td.class.class2

Fasse ich 1x <td> an habe ich das leidlich unkontrollierbar überall, und das nützt mir nix.

Und genau dafür gibt es Klassen.

Schlaumeier. Wenn CSS' mit Definitionen im Hintergrund geladen werden und ich die nicht kenne nützt mir der Rest vom Quelltext auch nicht viel.

Selber Schlaumeier... Egal was für einen Browser du nutzt (solange er nur leidlich modern ist), alle haben Entwickler-Tools. Die vom IE sind ziemlicher Scheiß, die vom FF gut, die vom Chrome einfach grandios.
Kleine Hausaufgabe für dich: Rechtsklick auf ein DOM-Element deiner Wahl hier auf der Webseite und dann das jeweilige Äquivalent von "Element untersuchen" anklicken.... Sehen und staunen.

Inline-Styling nutze ich nun schon für Fonts.

Brr.... Schriftarten werden nach Möglichkeit global definiert, damit sich über die gesamte Seite ein einheitliches Bild ergibt. Braucht man für spezifische Situationen weitere Schriften, dann gibt es dafür Klassen. Inline-Styles sind immer der letzte Ausweg.

Daher hatte ich auf IDs oder Klassen gehofft. Bleibt also Inline-Styling - womit ich vom Aufwand auch nicht weiter wäre.

IDs: 1x verwenden pro Seite
Klassen: so oft verwenden, wie man will...
Ein DOM-Element kann EINE ID haben (und eine ID darf nur auf EINEM DOM-Element auftauchen). Ein DOM-Element darf aber BELIEBIG viele Klassen haben, vorbei man es schlichtweg nicht übertreiben sollte, um die Übersicht zu wahren.

In deinem Falle:
All den Scheiß der für alle deine Zellen gilt (Größe, Wiederholung und Ausrichtung des Hintergrunds) in eine Klasse. Alles was nur für eine einzige Zelle überall und immerdar gilt: Wahlweise in ne ID oder als Inline-Style. Inline-Styles sind hier oftmals performanter, haben aber die ultimative Gewichtung.

Das Blöde ist, dass ich einen (ach was, mindestens zwei) ganzen Schwung gut sortiert verteilter Einzeklämpfer habe die alle gleich gestylt sein sollen - damit explodiert die Einzelanfertigung. Und der wollte ich an den Kragen.

Mehr als 1 Ding, dass absolut gleich sein soll: Gib den Dingen ne Klasse. Dafür sind Klassen da. Denke objektorientiert.

Oder sie sind nicht ausführlich intern vernetzt - wer Schriftgestaltung braucht wird, ohne Hinweise drauf, nie auf Dinge wie Pseudo-Elemente (p::first-letter) kommen oder danach suchen.

Ich hab in einigen Jahren aktiver Webentwicklung noch nicht ein einziges mal first-letter verwendet. Das sind First-World-Problems...

Außerdem: CSS hat ne echt schön geradlinige Syntax. Alles, was irgendwie mit Hintergründen zu tun hat, heißt irgendwas mit background-***. Weißt du, was man da macht? Man nimmt sich Werkzeuge, die diese Syntax kennen und außerdem noch Autocomplete beherrschen. Wie z.B. die Chrome Developer Tools. Wenn ich da "bac" anfange zu tippen, schlägt er mir garantiert die verschiedenen Background-Optionen vor.... und für jede der Optionen auch noch deren mögliche Settings, schön als Dropdown.

Deswegen wäre mir ein gedrucktes Buch daneben lieber als all diese Hilfen in denen man sich verläuft.

CSS3 und HTML5 sind "Living Standards"... Noch während das Buch gedruckt würde, wäre es veraltet.

 

[cumulonimbus8]

Kaskadierung hatte ich nur als Aufhänger genommen - mit der Syntax meinte allgemein, dass das was da steht leider nicht überall so rauskommt wie man erwarten dürfte →

→ und Entwicklertools nützen mit in meiner Lage nicht das Geringste da ich (wie geschrieben) mit maschinell erzeugtem Kram arbeiten muss was mich bestimmten Zwängen unterwirft. Meine HP aufzubauen - das wäre fast Urlaub gegen diesen Krampf. →

→ Und noch muss ich abwärtskompatibel bleiben da wir die, denen wir unsere Pages anbieten, aktiv ›streicheln‹ müssen.

Schriftarten werden nach Möglichkeit global definiert
Würde jede Page diesem netten Konzept folgen - hurra. Leider ist mein Material völlig anders gestrickt. Das was ich da definiere müsste ich für die paar Besonderheiten einmalig definieren. Und das kann ich praktisch gleich inline tun. Und so manche überstrapazierte Syntax (aus der ich mehr als gedacht heraushole) lässt mich da auch oft ohne Ausweg zurück..: „Und jetzt wiederholen wir das ganze noch mal.“

Denke objektorientiert.
Ich hab nur das Gefühl, dass sich die Browser bei den Objekten an die ich denke völlig anders orientieren als ich… Einzelne Zellen so (nach Syntax - s.o.) mit Hintergrundfarbe zu füllen (müsste eine Klasse gewesen sein) klappt im eine und scheitert im anderen Browser. Die Syntax habe ich direkt von Vorschlagsseiten - dennoch Fehlschuss.

Ich hab in einigen Jahren aktiver Webentwicklung noch nicht ein einziges mal first-letter verwendet.
Muss ja ein seltsamer Zufall sein. Mir wäre es gewiss nicht anders ergangen.

Wie z.B. die Chrome Developer Tools.
Dies hat einen Makel: Developer. Ich hae das Gefühl. ich bin da viel mehr ein Re-Veloper oder mehr einer der Abusus betreibt. Deswegen auch mehr der verzweifelte Wunsch nach Syntaxhandbüchern. →

CSS3 und HTML5 sind "Living Standards"... Noch während das Buch gedruckt würde, wäre es veraltet.
→ Ob die Browser auch so schnell sind alles neue korrekt zu interpretieren? Nicht gerade abgeschaffter Code sollte Jahre lang genügsam meinen Bedürfnissssen niedrigster Anforderungen genügen. Außer - ich denke so bekloppt, dass das was ich ›einfach‹ nenne das System überfordert während es mir bärenstark Dinge andreht die ich nie brauche oder vermisse.


Die Aktuelle Lösung des übelsten Problems sieht nun so aus:
#TGTIMG { background: url("http://[schnipp]/TabelleVerlauf.png"); background-size:300px 630px; }
Die Datei kann damit hartvercoded bleiben und die Größen kann dann das Makro in einem Ersetzdurchlauf (sprechender Dummytext durch Wert; einem von vielen) einbringen da ich die auch in der Tabelle brauche. Es leuchtet Licht am Ende des Tunnels.

CN8

 

[Daaron]

mit der Syntax meinte allgemein, dass das was da steht leider nicht überall so rauskommt wie man erwarten dürfte

Hier irrst du. CSS ist, von all den Sprachen die ich bisher gesehen habe, die geradlinigste und vorhersagbarste. Mir ist nur eine einzige Logik-Macke aufgefallen, und das ist das einfache Box-Model....

→ und Entwicklertools nützen mit in meiner Lage nicht das Geringste da ich (wie geschrieben) mit maschinell erzeugtem Kram arbeiten muss was mich bestimmten Zwängen unterwirft.

Mumpitz. Dein, egal wie gearteter, Kram wir doch in einem Browser dargestellt. Also schalt verdammt noch eins die Werkzeuge an und schau dir in ECHTZEIT an, was wie vererbt wird.

Und noch muss ich abwärtskompatibel bleiben da wir die, denen wir unsere Pages anbieten, aktiv ›streicheln‹ müssen.

...und ich habe dir versucht zu erklären, wie ein solcher Fallback aussehen würde.

Würde jede Page diesem netten Konzept folgen - hurra. Leider ist mein Material völlig anders gestrickt. Das was ich da definiere müsste ich für die paar Besonderheiten einmalig definieren. Und das kann ich praktisch gleich inline tun.

Andererseits könntest du auch einfach Klassen verwenden. Somit sparst du Ladezeit und verbesserst Übersicht und Wartbarkeit. Aber du WILLST ja offensichtlich nichts dazu lernen.

„Und jetzt wiederholen wir das ganze noch mal.“

Gute Programmierer halten sich an DRY.

Einzelne Zellen so (nach Syntax - s.o.) mit Hintergrundfarbe zu füllen (müsste eine Klasse gewesen sein) klappt im eine und scheitert im anderen Browser.

Was gescheitert hat, war die mehrfache Verwendung einer ID, und WARUM das schief geht, habe ich dir schon gesagt. Klassen funktionieren überall, Klassen gibt es seit CSS1
Evtl. musst du auch einfach den Unterschied zwischen "background", "background-image" und "background-color" lernen...

Dies hat einen Makel: Developer. Ich hae das Gefühl. ich bin da viel mehr ein Re-Veloper oder mehr einer der Abusus betreibt.

Wie wäre es, wenn du die Entwickler-Werkzeuge der guten Browser (also: nicht IE) einfach mal VERWENDEST, also bloß zu behaupten, es würde nicht gehen.
Ich hab schon mehrere Projekte mit arg verklausuliertem Code umgebaut. Oft konnte ich nicht so viel am zugrunde liegenden Generator ändern, wie ich gern wollte.

→ Ob die Browser auch so schnell sind alles neue korrekt zu interpretieren?

1.) http://caniuse.com
2.) Chrome, FF: Jap, quasi immer. Opera: meistens. IE... Also bitte...

#TGTIMG { background: url("http://[schnipp]/TabelleVerlauf.png"); background-size:300px 630px; }

Und wieder hast du es falsch gemacht...
1.) Du hast schon wieder ne ID verwendet. ID-Notation verwendet man, wenn das Element pro SEITE ein garantiertes Einzelkind ist, aber auf mehreren Seiten auftauchen kann. Ein Hauptmenü wäre z.B. ein idealer Fall für ne #ID.
2.) Du verwendest Background-Size, erzählst mir aber weiter oben was von Zwangs-Support für Holzklasse-Browser.
3.) Du verwendest eine feste Background-Size, die a) nicht flexibel ist und b) die Aspect Ratio des Bildes versaut.

Die Datei kann damit hartvercoded bleiben...

Kann es immer. Du bist nur offensichtlich nicht in der Lage, das korrekt umzusetzen, weil dir elementare Kenntnisse fehlen.

Beantworte mir mal bitte folgende Frage:
Warum zum Geier machst du das? Also ich geh mal davon aus, dein Chef hat dir gesagt, du sollst das machen. Dann lass es mich mal anders formulieren: Warum zum Geier setzt dein Chef den offensichtlich ungeeignetsten Mitarbeiter darauf an?
Wenn du ehrlich zu dir selbst bist, dann wirst du erkennen: Du bist überfordert. All die ARBEITS-Zeit, die du hier in Grundlagenforschung butterst, kannst du nicht produktiv arbeiten. Da dein Chef auch diese unproduktiven Stunden bezahlen muss, wäre es viel viel viel viel kostengünstiger (aka. wirtschaftlicher -> interessant für Wirtschaftsunternehmen), einfach einen externen Entwickler anzuheuern.
Egal was du da gerade im Gesamten baust, ich garantiere dir: Ein erfahrener Entwickler wie ich wäre in bestenfalls 1/10 deines Zeitaufwands fertig. Deine initiale Frage hätte ich z.B. in 10 Minuten gelöst.

Also mach, was am Besten für die Firma (und damit auch langfristig für deinen Job) ist: Gib zu, dass du überfordert bist. Sag deinem Chef, er soll sich einen externen Entwickler dazu holen, der den Kram in ner Stunde zusammenklimpert. Kost ihn halt 1-2 Hunderter, aber du kostest deinen Chef auch nicht nur 20€/h...

 

[cumulonimbus8]

Ich bin nicht ganz so blöd deine Vorschläge nicht zu verstehen sondern intelligent genug zu erkennen, wo & dass mir in meiner Lage CSS (in seiner typischen Nutzung) nicht das Geringste nützt oder keine Verbesserungen in der Handhabung liefert.


Um das vorzuziehen was der Chef für einen Trottel beschäftigt..: ich bekam ein Programm zum Zweck XY vorgesetzt. Dieses Programm hantiert (..!) mit HTML-Quellseiten und dieses Tool ist nicht das Jüngste (Geld spielt allerdings eine Rolle). Ich bin dank dieses Tools nicht frei in meinen Entscheidungen Seiten zu konstruieren. Eingebaute Bordmittel sind so unflexibel, dass wir mit optischer Seitenveränderung (durch Makro oder externes CSS [was aus gewissen Logikfehlern an anderer Stelle im Prozess heraus nur Ärger machen muss]) nachhelfen mussten. Den Krams hat das Arme Würstchen Namens ich in unserem 5-Frau/Mann-Team (rat mal wer für Hardware und Abrechnung und und und zuständig ist) entwickelt (welch großes Wort) und über einigermaßen flexible Makros den Kollegen einen Haufen Arbeit abgenommen (ich könnte was die in diesem Kontext tun auch, die aber nicht was ich hier bastele). Und dann wollte man mehr und mehr und mehr das ich erfinden und in realen Code gießen sollte und musste und habe.

Nun kommt die ‹nächste› Aufgabe [nämlich das Threadthema] durch die Hintertür:
Eine global abgelegte Grafik soll auf flexible Größen live skaliert in einer Gatterstruktur (vornehm Tabelle genannt) platziert werden. Ursprünglich (muss ja schnell gehen, soll gestern fertig sein, also hilft man sich erst mal anders) kam pro speziellem Projekt und mehreren Pages (deren Mechanik auch wieder ich bauen musste…) mehrere Varianten der Grafik fix skaliert als selbstständige Dateien vor - per IrfanView geklont.
Das störte mich eh schon; nun wirbelt o.g. CSS eh alles durcheinander, nutzen wir die Chance zu größeren umbauten - also her mit einer [oder eben verschiedenen] global verfügbaren Datei die live in ihren Rahmen soll. Nur ist (Verbesserungsvorshlag?) dieser Rahmen eine Tabellenzelle mit Text drin und der Grafik dahinter. (Die Seite wird willkürlich-dynamisch vom besagten Programm verwurstet, da nützt kein CSS mit den Rahmenfunktionalitäten. Aber eine olle Tabelle hilft weil ich mit deren Maßen wahrhaftig rechnen kann.)
Wie skaliert man also bitte so einen Hintergrund? Darauf suche ich eine pfiffige Lösung für die das [ein…] Makro in einer geladenen Quelltextdatei (siehe Zwänge oben) nur Werte einträgt - die X-Größe der Grafik ist zufällig die Breite der Tabellenspalte… Den Rest macht der jeweils angepasste Code mit der selben Quellgrafik. Und die kann ich auf einfache Weise über ihren Namen im Code austauschen ohne mit Grafikfiles jonglieren zu müssen. (Man ersetze mal ›ich‹ durch ›Kollege‹.)

Meine Lösung hat sich einfach weiterentwickelt und durchgefressen. Wenn mir jemand einen anderen Weg nennen kann der mich zum Ziele führt, den ich wegen Betriebsblindheit nicht sehe, wäre das zumindest eine willkommene Inspiration.
Ich hatte halt einfach angenommen CSS würde helfen. Es tut es offenbar, aber auch nicht so wie ich geplant hatte. Allerdings mag CSS mir bei eine Varietät meines Problemkindes mehr als nützlich sein!

CN8

 

[Daaron]

Wie skaliert man also bitte so einen Hintergrund? Darauf suche ich eine pfiffige Lösung für die das [ein…] Makro in einer geladenen Quelltextdatei (siehe Zwänge oben) nur Werte einträgt - die X-Größe der Grafik ist zufällig die Breite der Tabellenspalte…

Also hast du EINE Grafik, die du in verschiedenen Auflösungen hinter die Zellen legen willst? Und genau da gibt man den Zellen eine gemeinsame Klasse und verwendet für diese Klasse CSS Backgrounds mit Background Size.
Und weil IE8 eben noch ne Rolle spielt, schreibt man einen kleinen JavaScript-basierten Fallback. Wie du schon erkannt hast, kann <img> sehr wohl Bilder skaliert darstellen. Der Trick ist nur, Positionierung und Z-Index zu verstehen.

Oder fragen wir mal anders: Was KANNST du manipulieren? Klar und deutlich. Auf welchen Teil des HTML-Codes hast du planmäßigen Schreibzugriff?
- Kannst du die Tabelle komplett ersetzen/manipulieren?
- Kannst du auf die <tr> zugreifen?
- Kannst du die Definition der <td>-Zellen ändern?
- Kannst du den Inhalt der <td> ändern?
- Brauchst du pro pro Zelle ein einzigartiges Bild oder ist es überall dasselbe Bild in verschiedenen Skalierungen?
- Kannst du den Dateinamen des Bildes fix vorhersagen oder wird er programmatisch generiert?
- Gibt es ein logisches Muster, so dass man evtl. mit :nth-child arbeiten kann?

 

[cumulonimbus8]

Ich möchte nur eine (oder auch eine weitere Grafik) habe die ich (8-ung) auf verschiedenen Sites unkompliziert für verschieden große ›Ziele‹ einsetzen will.
Dass ich bei unterschiedlichen Zellen auf einer Page damit nicht so einfach wegkomme ist mir klar.

Der Trick ist nur, Positionierung und Z-Index zu verstehen
Den Text als Bild eine Ebene höher? Das wäre noch aufwändiger. ich wills vereinfachen… Und im Moment ist diese missbrauchte CSS-Funktion das einzige was ich sehe das mir so unkompliziert ohne Nebenarbeiten hilft.


Oder fragen wir mal anders: Was KANNST du manipulieren? Klar und deutlich. Auf welchen Teil des HTML-Codes hast du planmäßigen Schreibzugriff?
Das wüsste ich teilweise selbst gerne. Ich kann einen gewissen Teil an Äußerlichkeiten beeinflussen, selbst mit Bordmitteln ein wenig CSS einbringen. Auch ›Funktionselemente‹ kann ich in bestimmtem Rahmen anfassen. Das behämmterte Tool schafft es in Aufbauversion A Funktionscode mal unten und in B mal oben einzubauen. Da ich den erzeugten Rohcode filtern muss lief der alte Filter B-lötzlich in eine Falle. Ein bisschen JS einzubauen und eine Tabellenkonsrtuktion am wenigen Fließtext ist da geradezu Peanuts.

- Kannst du die Tabelle komplett ersetzen/manipulieren?
Die ist von mir - und ich habe sie eingesetzt um bestimmte andere Ding ›an den Haken nehmen zu können‹, ihnen Ordnung und räumliches miteinander zu geben. Es wäre ein Riesenaufmarsch das was die Tabelle ordentlich zusammenhält mit anderen Mitteln dynamisch (als auch für weitere ähnliche Pages) aufzubauen. Tabelle nehmen, einkleben, tut erst mal grundsätzlich.

- Kannst du auf die <tr> zugreifen?
Sicher. Aber was möge mir das nützen? 3 Zeilen (ja, alt bei Tests geplant und bisher völlig hinreichend) - eine mit dem (für den) erwähnten Rahmen oben, das Hauptfeld, eine mit Rahmen unten. Dann ein paar Spalten von denen 2 ebenfalls Rahmen spielen. Die von IrfanView verzerrte Grafik sollte nur Fläche ohne Rahmenlinien gewisser Stärke sein damit sich die nicht mit verzerren - das war die Idee dahinter. Ich könnte manuelle solche Linien nachpflegen, die Kollegen nicht… Also muss es eben so gehen.

- Kannst du die Definition der <td>-Zellen ändern?
Das könnte ich, das habe ich versucht. Chrome hat mich dabei vors CSS-Schienbein getreten. Also fülle ich die (völlig leeren) Rahmenzellen herkömmlich. Dafür Grafiken per CSS und Class zu verwenden - lohnt das? Davon ab sind diese Rahmenzellen unterschiedlich groß [2+2+4 = 3 Vorgaben], also wieder skalieren…

- Kannst du den Inhalt der <td> ändern?
Bittere Ironie: die Zellen sind weitgehend leer (vgl. Füllung voriger Absatz). Außer aktiven Objekten, 2 Kontrollelementen und dem besagten Text muss da nichts drin sein. Nichts was sich außer der Grafik sinnvoll mit CSS anfassen ließe.
Nachtrag: für ein anderes Projekt mussten mehrere dieser Konstrukte auf eine Page. Und die Rahmen mussten plötzlich andere Jobs mit übernehmen - was mir sehr gelegen kam weil sie da waren. Nebenwirkung war, dass besagte Grafiken extra eigener Rahmenlinien bedurften.

- Brauchst du pro pro Zelle ein einzigartiges Bild oder ist es überall dasselbe Bild in verschiedenen Skalierungen?
Ich brauche für die einfache Konstruktion das Bild genau einmal (bzw. eine zweites für das die gleichen Anforderungen realisiert sein müssen) für eine Zelle. Knackpunkt ist: mit was bekomme ich das Bild unter Kontrolle und gehorche dabei weiteren Forderungen? Plan B, den ich erwähnte, ist soeben geplatzt da ich gerade ein Loch drin entdecke.

- Kannst du den Dateinamen des Bildes fix vorhersagen oder wird er programmatisch generiert?
Tja… Das selbe fixe Bild wird (ggf.) von mehreren Pages verwendet - ‹ich› lege einen Namen fest der dann mehreren Pages (eines Projektes) dient (wobei, wie erwähnt, fleißig geklont & recycled wird; die Datei liegt ›lokal‹ im Projekt).
Fix vorhersagen wäre ja gerade mein Plan, eine allgemein (›global‹) greifbare Grafik vorzuhalten die nur noch skaliert werden muss und für das Gros der Fälle reicht. Das ist einfach; und sie sollen im Code leicht änderbar sein wenn Sonderwünsche oder Änderungen kommen - mit 1x dem Namen an gut sichtbarer Stelle geht das einfach für den Laien.

- Gibt es ein logisches Muster, so dass man evtl. mit :nth-child arbeiten kann?
Nein, alles Einzelkinder.


• Ausgang ist nun mal die Tabelle mit allen ihren Macken (um mehr denn das Bild zusammenzuhalten). Ich sehe da erst mal, auch aus anderen Bedingungen heraus, nicht wie es ohne gehen soll.
Wäre an dieser Wurzel zu rütteln ergäben sich ggf. andere Aspekte.
• Macke ist, dass die Zielzelle Fließtextstückchen enthält…
• …Macke ist, dass das Bild eben hinter diesen Text muss. Selbst Positionieren per CSS dürfte dem nicht genügen?!?
• Problem ist: Tabellenzelle kann Hintergund(bild), aber nicht skalieren; Tabellenzelle kann Bild (<img> skaliert…) und Text, aber nicht übereinander.

Den Knoten muss ich lösen. Dass ich CSS anfasse und quasi missbrauche - gehts besser?

CN8

 

[Daaron]

Ich möchte nur eine (oder auch eine weitere Grafik) habe die ich (8-ung) auf verschiedenen Sites unkompliziert für verschieden große ›Ziele‹ einsetzen will.
Dass ich bei unterschiedlichen Zellen auf einer Page damit nicht so einfach wegkomme ist mir klar.

Mit CSS-Klassen ist das hier spielend einfach gelöst.

<td class="bg-image image1">ZELLEN mit Bild 1</td>
<td class="bg-image image2">ZELLEN mit Bild 2</td>
<td>ZELLE OHNE BILD</td>
<td class="bg-image image1">ZELLE, wieder mit Bild 1</td>

Siehst du, spielend einfach.

Den Text als Bild eine Ebene höher? Das wäre noch aufwändiger

<td>
HIER KÖNNTE IHR TEXT STEHEN
<img class="background" src="URL" alt=""/>
</td>

td{position:relative;z-index:1;}
img.background{position:absolute;z-index:0;}

sollte gehen...

Die ist von mir - und ich habe sie eingesetzt um bestimmte andere Ding ›an den Haken nehmen zu können‹, ihnen Ordnung und räumliches miteinander zu geben. Es wäre ein Riesenaufmarsch das was die Tabelle ordentlich zusammenhält mit anderen Mitteln dynamisch (als auch für weitere ähnliche Pages) aufzubauen.

Nein, es wäre eben KEIN großer Aufwand. So schwer ist die Sache mit display:inline-block; oder float:left; nun auch wieder nicht. Tagtäglich schreiben tausende Webdesigner mehrspaltige Layouts ohne auf <table> zurück zu greifen.
<table> ist NUR UND AUSSCHLIESSLICH für tabellarische Inhalte. Sind deine Inhalte nicht tabellarisch, mach es anders!

- Kannst du auf die <tr> zugreifen?
Sicher. Aber was möge mir das nützen?

CSS-Klassen einbetten? Daran mal gedacht? Es ist immer von Vorteil, wenn man eigene Klassen anbringen kann...

- Kannst du die Definition der <td>-Zellen ändern?
Das könnte ich, das habe ich versucht. Chrome hat mich dabei vors CSS-Schienbein getreten.

Chrome hat sich im Zweifel 100% standardkonform verhalten. Ich hab in vielen Jahren noch nicht erlebt, dass er das mal NICHT macht. Also lag der Fehler bei dir. Worum es mir geht ist einfach nur: <td class="Klasse1 Klasse2 Klasse3 Klasse4">...</td>

Dafür Grafiken per CSS und Class zu verwenden - lohnt das? Davon ab sind diese Rahmenzellen unterschiedlich groß [2+2+4 = 3 Vorgaben], also wieder skalieren…

<img> ist ein Inhaltselement. Du willst keinen Inhalt. Du willst Design. Das ist CSS-Aufgabe. Womit wir übrigens wieder oben bei deinem <table>-Missbrauch wären. Du hast mit Scheiße angefangen, und jetzt ziehst du Scheiße stur weiter durch. Konsequent sein heißt, auch Holzwege zu Ende zu gehen, hm?

Aber ja, wenn du schon auf deinem Holzweg bleibst, dann würden selbst-skalierende CSS-Grafiken per background-size:contain/cover; dein Problem weitestgehend lösen. Für IE<=8 schreibst du einen JavaScript-Fallback basierend auf <img> mit z-index.

Ich brauche für die einfache Konstruktion das Bild genau einmal (bzw. eine zweites für das die gleichen Anforderungen realisiert sein müssen) für eine Zelle.

Bild nur 1x -> Bild als Inline-Style definieren
Bild mehr als 1x -> Bild in einer Klasse definieren

Ich geb dir mal 2 wichtige Programmier-Paradigmen mit auf den Weg, an die du dich ab jetzt halten solltest, um solche Fragen gar nicht erst aufkommen zu lassen. KISS & DRY

• …Macke ist, dass das Bild eben hinter diesen Text muss. Selbst Positionieren per CSS dürfte dem nicht genügen?!?
• Problem ist: Tabellenzelle kann Hintergund(bild), aber nicht skalieren; Tabellenzelle kann Bild (<img> skaliert…) und Text, aber nicht übereinander.

http://jsfiddle.net/J36XE/2/

Hinweis hierzu:
Die unterste Tabellen-Zeile, der <img>-Hack, funktioniert NICHT im Firefox, wohl aber in Chrome und IE(11). Gedacht ist er aber für IE8 (als Ersatz für background-size), das kann ich im Fiddle aber nicht testen, da die IE8-Emulation bei JSFiddle abstürzt.

Macht das was? Nein, macht nix. Ich gehe stark davon aus, dass der IE8 den Hack korrekt darstellt. Das ist ne reine Firefox-Macke (davon gibts n Paar). Da der Hack nur per JavaScript für den IE<=8 dargestellt werden soll und kein permanenter Code ist, gibt es auch kein Firefox-Problem. Und selbst wenn der Fehler auftritt, man kann ihn leicht beseitigen. Wenn man schon JS verwendet, kann man damit auch die Positionierung optimieren etc.
Edit: Grad gelesen, sogar der IE6 wendet "position:relative" korrekt auf <td> an... Also wirklich absolut reines Firefox/Gecko-Problem.