Genaue Positionierung von Zahlen

[Webwolf]

Hallo Community,

ich musste mich heute wieder einmal mit Ausrichtungen von Zahlen bzw. div-Elemente auseinader setzen, die sich im Grunde an ein (Hintergrund-)Bild richten sollen.

Um das ganze verständlicher zu demonstrieren habe ich hier mal das dazugehörige Bild hochgeladen:

Ich habe das ganze zunächst mithilfe von div-Elementen und den Angaben von top und left gelöst, was im Firefox auch ganz gut aussieht. Leider stellen die Browser die Positionierung unterschiedlich dar, was mich wiederum mit dieser Methode dazu bringt mit Browserweichen zu arbeiten.

Browserweichen versuche ich aber immer wieder zu vermeiden.

<div style="background:url('images/windows/attributes.jpg');width:256px;height:448px;font-size:0.8em;color:white">  
    <div align="center" style="width:150px;position:relative;left:80px;top:33px;">Player</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:35px;">hometown</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:37px;">Team-XY</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:39px;">0 / 0</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:41px;">20</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:43px;">Krieger</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:45px;">50</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:47px;">14706 / 254576</div>  
  
    <div align="center" style="width:150px;position:relative;left:80px;top:56px;">2134 / 2134</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:58px;">7878 / 7878</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:60px;">105 / 312</div>  
  
    <div align="center" style="float:left;width:47px;position:relative;left:80px;top:69px;">20</div>  
    <div align="center" style="float:left;width:47px;position:relative;left:147px;top:69px;">16</div>  
  
    <div align="center" style="width:47px;position:relative;left:80px;top:71px;">76</div>  
    <div align="center" style="float:left;width:47px;position:relative;left:194px;top:55px;">32</div>  
    <div align="center" style="width:47px;position:relative;left:194px;top:57px;">0</div>  
</div>

Hab das ganze mal schnell hochgeladen:
http://fhx-online.netai.net/test.html

Nun, da ich mich vor Kurzem mit den GD-Funktionen von PHP befasst habe, wäre ich also auch in der Lage sowas mit PHP zu bewerkstelligen (Bild generieren).
Dabei weiß ich allerdings nicht, ob das in diesem Falle sinnvoll wäre, da das Generieren eines Bildes etwas länger braucht und Server-Leistung in anspruch nimt.

Wie würde man an sowas dran gehen? wie würdet ihr soetwas lösen?
Würde mich über Tips und Hilfestellungen freuen =)

[Der Martin]

Hallo,

Ich habe das ganze zunächst mithilfe von div-Elementen und den Angaben von top und left gelöst, was im Firefox auch ganz gut aussieht. Leider stellen die Browser die Positionierung unterschiedlich dar, ...

tatsächlich? Wo hast du Unterschiede festgestellt? Möglicherweise sind sie in Wissenslücken deinerseits begründet.

<div align="center" style="width:150px;position:relative;left:80px;top:33px;">Player</div>
    <div align="center" style="width:150px;position:relative;left:80px;top:35px;">hometown</div>

Bist du dir darüber im Klaren, was position:relative bedeutet? Es versetzt ein Element um die in top, left, bottom oder right angegebenen Werte gegenüber seiner normalen Position, die es ohne diese Positionierung hätte. Dein obiger Code heißt also: Setze das erste div-Element um 80px weiter nach rechts und um 33px weiter nach unten, als es eigentlich sitzen müsste.
Dass man sich bei solchen Verschiebeaktionen leicht verzettelt, wenn man sie so großzügig anwendet, kann ich mir gut vorstellen.

<div align="center" style="width:150px;position:relative;left:80px;top:60px;">105 / 312</div>

Oh-oh. Dann auch noch float dazwischen; du machst es dir nicht leicht.

Nun, da ich mich vor Kurzem mit den GD-Funktionen von PHP befasst habe, wäre ich also auch in der Lage sowas mit PHP zu bewerkstelligen (Bild generieren).
Dabei weiß ich allerdings nicht, ob das in diesem Falle sinnvoll wäre, da das Generieren eines Bildes etwas länger braucht und Server-Leistung in anspruch nimt.

Ja, das Generieren eines Bildes halte ich in diesem Fall auch für eine ganz schlechte Lösung.

Wie würde man an sowas dran gehen? wie würdet ihr soetwas lösen?

In diesem Fall? Auch wenn's dich vielleicht verblüfft, aber DAS wäre nach meinem Dafürhalten ein Paradebeispiel für eine Tabelle - oder mehrere nacheinander folgende, weil du unterschiedliche Tabellenraster hast (zwei und vier Spalten). Eventuell auch eine Liste.

So long,
 Martin

[Webwolf]

Hallo Martin, danke für deine schnelle Antwort.

tatsächlich? Wo hast du Unterschiede festgestellt? Möglicherweise sind sie in Wissenslücken deinerseits begründet.

Unterschiede habe ich generell im IE bis v7.0.

Bist du dir darüber im Klaren, was position:relative bedeutet? Es versetzt ein Element um die in top, left, bottom oder right angegebenen Werte gegenüber seiner normalen Position, die es ohne diese Positionierung hätte. Dein obiger Code heißt also: Setze das erste div-Element um 80px weiter nach rechts und um 33px weiter nach unten, als es eigentlich sitzen müsste.

JA, darüber bin ich mir im Klaren, aber danke für die kleine Einführung ;)
Ursprünglich wollte ich die kompletten div-ELemente auch absoult adressieren, d.h. dass ich die Position vollständig manuell festlege - aber wie gesagt, das geht nicht ohne Browserweichen aufgrund der genannten Unterschiede in den Browsern.

Dass man sich bei solchen Verschiebeaktionen leicht verzettelt, wenn man sie so großzügig anwendet, kann ich mir gut vorstellen.

<div align="center" style="width:150px;position:relative;left:80px;top:60px;">105 / 312</div>

Oh-oh. Dann auch noch float dazwischen; du machst es dir nicht leicht.

Ja das haben mir schon viele Leute sagen müssen, dass ich mir das alles zu schwer mache ^^
Ich versuche lediglich den Umgang mit float & position ein bisschen besser zu verstehen und Möglichkeiten zu entdecken, da ich diesbezüglich (offenbar) nicht genug Erfahrung habe.

In diesem Fall? Auch wenn's dich vielleicht verblüfft, aber DAS wäre nach meinem Dafürhalten ein Paradebeispiel für eine Tabelle - oder mehrere nacheinander folgende, weil du unterschiedliche Tabellenraster hast (zwei und vier Spalten). Eventuell auch eine Liste.

Tabellen wäre (komischer Weise) die letzte Methode, die ich genommen hätte, stellt aber gewiss eine Möglichkeit dar.

Danke dafür =)

[suit]

aber wie gesagt, das geht nicht ohne Browserweichen aufgrund der genannten Unterschiede in den Browsern.

Um die Frage von Martin nochmal aufzugreifen: Welche Unterschiede? Mir sind keine bekannt.

[Webwolf]

Um die Frage von Martin nochmal aufzugreifen: Welche Unterschiede? Mir sind keine bekannt.

[suit]

Um die Frage von Martin nochmal aufzugreifen: Welche Unterschiede? Mir sind keine bekannt.

Kann man das "live" sehen - ich glaube dir pauschal einfach mal nicht und gehe davon aus, dass du auch hier nicht mit absoluter Positionierung und festen Pixel-Werten arbeitest ;)

[Webwolf]

Kann man das "live" sehen - ich glaube dir pauschal einfach mal nicht und gehe davon aus, dass du auch hier nicht mit absoluter Positionierung und festen Pixel-Werten arbeitest ;)

Hierbei handelt es sich nicht um absolute Positionierung.
Den Code und ein Beispiel habe ich im 1. Beitrag bereits angefügt.

http://fhx-online.netai.net/test.html

<div  style="background:url('images/windows/attributes.jpg');width:256px;height:448px;font-size:0.8em;color:white">  
    <div align="center" style="width:150px;position:relative;left:80px;top:33px;">Player</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:35px;">hometown</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:37px;">Team-XY</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:39px;">0 / 0</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:41px;">20</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:43px;">Krieger</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:45px;">50</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:47px;">14706 / 254576</div>  
  
    <div align="center" style="width:150px;position:relative;left:80px;top:56px;">2134 / 2134</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:58px;">7878 / 7878</div>  
    <div align="center" style="width:150px;position:relative;left:80px;top:60px;">105 / 312</div>  
  
    <div align="center" style="float:left;width:47px;position:relative;left:80px;top:69px;">20</div>  
    <div align="center" style="float:left;width:47px;position:relative;left:147px;top:69px;">16</div>  
  
    <div align="center" style="width:47px;position:relative;left:80px;top:71px;">76</div>  
    <div align="center" style="float:left;width:47px;position:relative;left:194px;top:55px;">32</div>  
    <div align="center" style="width:47px;position:relative;left:194px;top:57px;">0</div>  
</div>  

[Der Martin]

Hallo,

Hierbei handelt es sich nicht um absolute Positionierung.

nein, aber um relative Positionierung, ohne die Bezugslage zu kennen. Das ist fast noch schlimmer.

<div  style="background:url('images/windows/attributes.jpg');width:256px;height:448px;font-size:0.8em;color:white">

<div align="center" style="width:150px;position:relative;left:80px;top:33px;">Player</div>
    <div align="center" style="width:150px;position:relative;left:80px;top:35px;">hometown</div>
   [...]
</div>

  
Du positionierst relativ, ohne zu wissen oder festzulegen, wo die Elemente ohne diese relative Positionierung liegen würden. Nehmen wir mal an, margin und padding seien jeweils 0, das ist bei einem neutralen Element wie div wohl glaubwürdig. Aber wie hoch die div-Elemente sind, legst du nicht fest. In deinen beiden Screenshots sieht man ja auch schon, dass die Schrift etwas anders aussieht (vermutlich wegen der fiesen Schriftglättung im IE). Auch die exakten Proportionen der Schrift (Zeilenhöhe) legst du nicht fest - sehe ich jedenfalls nicht in deinem Codeauszug.  
Und bei all diesen Freiheitsgraden wunderst du dich, dass die Darstellung nicht exakt gleich ist?  
  
Abgesehen davon beschleicht mich der furchtbare Verdacht, das dunkle Feld ist nur eine einzige Hintergrundgrafik, und die Texte sind einfach draufgeklatscht.  
  
So long,  
 Martin  

-- 
Wer mit dem Finger droht, sollte ihn am Abzug haben, und nicht in der Nase.  

[suit]

Abgesehen davon beschleicht mich der furchtbare Verdacht, das dunkle Feld ist nur eine einzige Hintergrundgrafik, und die Texte sind einfach draufgeklatscht.

Das _ist_ so ;) du musst nur dem Link folgen.

Darum sagte ich ja, dass es ggf. schlauer wäre, das Zeug in ein Sprite auszulagern und den Code als Definitionsliste abzubilden.

[Der Martin]

Hallo,

Abgesehen davon beschleicht mich der furchtbare Verdacht, das dunkle Feld ist nur eine einzige Hintergrundgrafik, und die Texte sind einfach draufgeklatscht.
Das _ist_ so ;) du musst nur dem Link folgen.

ich hab mich nicht getraut, den *ganzen* Quelltext anzugucken ... ;-)

Darum sagte ich ja, dass es ggf. schlauer wäre, das Zeug in ein Sprite auszulagern und den Code als Definitionsliste abzubilden.

Irgendsowas, ja. Auf jeden Fall gesplittet, so dass jedes Teilelement seinen eigenen größenmäßig angepassten Hintergrund hat; für den gesamten Container dann nur noch die Textur als (kleines) Hintergrundbild. Dann können Facheinteilung und Inhalt auch nicht mehr auseinanderlaufen.

So long,
 Martin

[suit]

Kann man das "live" sehen - ich glaube dir pauschal einfach mal nicht und gehe davon aus, dass du auch hier nicht mit absoluter Positionierung und festen Pixel-Werten arbeitest ;)

Hierbei handelt es sich nicht um absolute Positionierung.

Dann verweise ich wieder zurück auf Martin - die relative Positionierung hängt natürlich unter anderem auch von der Schriftgröße ab - diese weicht (lt. deinen Screenshots in deinem IE) möglicherweise ab - aufgrund der Einstellung des Benutzers, Clear-Type oder vergleichbarem.

[Deus Figendi]

Tabellen wäre (komischer Weise) die letzte Methode, die ich genommen hätte, stellt aber gewiss eine Möglichkeit dar.

Naja aber deine Grafik sieht aus wie eine Tabelle bzw. wie vier Tabellen. Etwas untypische Anordnung aber ein typischer Fall von Schlüssel=>Wert Darstellung.

Absolute Positionierung ist auch meiner Meinung nach die bessere Wahl, mit relative und Browserweichen schreibst du dich echt tot bei sowas.
Wenn du die Abstände setzt (nicht aufs User-Style-Sheet verlassen!) in diesem Fall wahrscheinlich auf 0 und dann absolut positionierst, dann haben die Browser eigentlich keinen Spielraum mehr, sie werden es wie gewünscht positioniert anzeigen.
Wenn das wirklich nicht klappen will, dann ersetze das Hintergrundbild durch ein img-Element, welches du ebenfalls absolut positionierst.

Oder aber: Bau deine Grafik doch einfach in ordentlichem Markup nach, dann sparst du dir das Hintergrundbild ganz, hast keine Sorgen mehr mit Positionierung etc.
Wenn die Grafik nicht gerade 100%ig pixelgenau sein muss wäre das imho die beste Lösung.

[suit]

Absolute Positionierung ist auch meiner Meinung nach die bessere Wahl, mit relative und Browserweichen schreibst du dich echt tot bei sowas.

Aber bitte mit einer vernünftigen Datenstruktur, eine Definitionsliste ist ggf. auch geeignet - eine div-Suppe sicher nicht :)

Oder aber: Bau deine Grafik doch einfach in ordentlichem Markup nach, dann sparst du dir das Hintergrundbild ganz, hast keine Sorgen mehr mit Positionierung etc.

Das Hintergrundbild würde sich dann zumindst durch ein weitaus kürzeres/kleineres Sprite ersetzen lassen - ganz auf Bilder verzichten wird man nicht können.

Wenn die Grafik nicht gerade 100%ig pixelgenau sein muss wäre das imho die beste Lösung.

Auch mit Sprites wäre es pixelgenau möglich.

[Deus Figendi]

Oder aber: Bau deine Grafik doch einfach in ordentlichem Markup nach, dann sparst du dir das Hintergrundbild ganz, hast keine Sorgen mehr mit Positionierung etc.
Das Hintergrundbild würde sich dann zumindst durch ein weitaus kürzeres/kleineres Sprite ersetzen lassen - ganz auf Bilder verzichten wird man nicht können.

Ja natürlich bräuchte man weiterhin grafiken, einmal diesen dunklen millierten Hintergrund und dann die ganzen kleinen grafischen Elemente, die die Zellen begrenzen ^^

Definitionsliste ginge auch, da hast du recht.

Wenn die Grafik nicht gerade 100%ig pixelgenau sein muss wäre das imho die beste Lösung.
Auch mit Sprites wäre es pixelgenau möglich.

Möglich wahrscheinlich schon, aber wenn man wirklich uralte Browser bedienen will empfinde ich das als viel zu aufwendig. Ja ich weiß manche Kunden verlangen das und so fort. Aber hier scheint es sich nicht um eine Auftragsarbeit zu handeln.
Also bietet es sich imho an ein durchaus "fließendes" Design zu schaffen, welches trotz der Unzulänglichkeiten mancher Browser (oder Displays) noch vernünftig aussieht, wenngleich nicht identisch mit der Ausgangsgrafik.

[Deus Figendi]

Dabei weiß ich allerdings nicht, ob das in diesem Falle sinnvoll wäre, da das Generieren eines Bildes etwas länger braucht und Server-Leistung in anspruch nimt.

Wie würde man an sowas dran gehen? wie würdet ihr soetwas lösen?

Mir kam gerade noch eine Idee...
Was wäre denn wenn du beides machst? (vielleicht wird man mich dafür wieder zerreißen aber ich spinn halt ein bisschen rum...)
Du erstellst mit PHP deine Grafik mit allen Einträgen, um die Serverlast zu senken kannst du es ja speichern und nur bei Veränderungen (oder zyklisch) neu berechnen/zeichnen.
Darüber (oder drunter oder sonst wo hin) packst du eine semantisch passende Struktur mit den gleichen Daten als Markup (suit hat sicher nicht unrecht mit der Definitionsliste). Dieses Markup blendest du dann irgendwie aus, mit JS oder mit display: oder mit visibility: oder mit 100%iger Transparenz oder sonst wie. Mit JS (Schaltfläche oder so) blendest du es wieder ein (die Grafik ggf. aus, wenn es sich überlagert).
Vorteile: Die Grafik sieht überall gleich aus, ist extern verlink-/einbindbar, wird u.U. auch gecached. Hat genau die Schriftart, die du willst und nicht die der Benutzer installiert hat. Suchmaschinen können das Markup indizieren, Benutzer können es kopieren.
Nachteil: Grafiken und JS abgeschaltet => Röhre (das kann man u.U. abfangen indem man default die Grafik aus- und das Markup einblendet und onLoad oder sonst wann ausblendet also nur wenn JS eh funktioniert).

Nur eine fixe Idee, die das alt-Attribut durch vollständiges Markup ersetzt (hmm wäre vielleicht überhaupt ein interessantes Element
<alt for="id_einer_Grafik">Markup</alt>