Zur Navigation

Tag Cloud : Positionierung + Farbabstufung

1 lava

Hallo, ich möchte bei einer Auflistung von gewichteten Begriffen den Begriff mit dem höchsten Gewicht nicht nur in der größten Schriftgröße, sondern auch in bester Positionierung (mittig) und mit dunkelster Farbe (schwarz) darstellen und die weniger gewichteten Begriffe dann entsprechend mit kleinerer Schriftgröße, dezentralerer Positionierung und schwächerem Farbton (Grau-Abstufungen) darstellen. Wie ich die Schriftgröße berechnen kann, habe ich schon gefunden, d.h. wenn ich die Begriffe einfach in einzelne Zeilen nacheinander ausgeben wollen würde und nur die Größe sich ändern sollte, dann wäre mein Problem schon gelöst. Wahrscheinlich ist auch die Frage nach der Schriftfärbung relativ ähnlich zu handhaben, wenn ich nur wüßte, wie man in PHP dann die Farbe aus "Wichtungsfaktor * Schwarz" berechnen kann - gibt es da einen einfachen Trick, eine einfache Formel?

Die nächste Frage ist dann, wie ich die Positionierung mache. Ich lese 15 Begriffe aus einer Datenbank aus, geordnet nach ihrer Gewichtung, d.h. ich kenne ihre Anzahl, aber nicht ihre Wortlänge.
Mein erster Gedanke dazu war: Den ersten Begriff könnte ich dann mit einem relativ positionierten div in meinem Darstellungsbereich ja einfach bei left:50% , top:50% anordnen und vermutlich ließe sich auch eine Formel finden, wie ich dann die Positionen für die anderen Wörter berechne - sofern es eben Wörter fester Länge wären. Da aber die Größen der Wörter sich ändern, würde das zu Überlappungen führen - kann ich das Problem, zumindest ungefähr, evtl. mit einem für alle Wörter gleichgewähltem zindex lösen? Außerdem hätte meine Methode noch den Nachteil, daß dabei z.B. das erste Wort bei 50% anfinge und nicht bei 50% zentriert wäre, also auch nicht wirklich mittig ausgerichtet wäre - kann ich mit CSS-Angaben noch irgendwie ein besseres Resultat erreichen?

VG, Lava

19.11.2008 12:04 | geändert: 19.11.2008 12:16

2 lava

P.S. Die Antwort auf die Frage nach der Farbberechnung scheine ich hier zu finden: http://www.sansiba.de/tut_farbverlauf.htm
- bleibt also nur die Frage nach der Berechnung der Position!

Und ich fürchte, um da die beste Position zu finden, muß ich auch noch strlen und font-size für jedes Wort einbeziehen - weiß ich denn bei einer festen font-size, wie BREIT jeder Buchstabe ist, denn eigentlich bezieht sich ja der Zahlenwert der font-size auf die HÖHE, oder?

19.11.2008 12:30 | geändert: 19.11.2008 12:34

3 Jörg

Hallo lava,

mit einem gleichen z-index kannst du keine Überlappungen vermeiden - in dem Fall entscheidet die Reihenfolge im Quelltext, welces Element vorne liegt - so wie wenn gar kein z-index gesetzt ist.

Wie man diese Zentrierung hinbekommt, weiß ich leider auch nicht. Kennst du denn eine Beispielseite, wo das so umgesetzt wurde?

19.11.2008 12:41 | geändert: 19.11.2008 12:42

4 lava

Nein, leider kenne ich keine Beispielseite, sonst hätte ich schon dort im Quellcode "gespickt" :(

Aber ich habe noch folgende Idee: Ich berechne mir ja meine font-size. Kann ich aus der font-size und der strlen des Wortes irgendwie die Gesamtbreite des Wortes berechnen? Dann wäre z.B.
die position des ersten zentrierten Wortes bei einem 400px breiten Darstellungsfeld 200px - halbe Wortbreite.

19.11.2008 12:43 | geändert: 19.11.2008 12:59

5 lava

Inzwischen habe ich herausgefunden, daß es eine PHP-Funktion imagefontwidth gibt, die einen Integer als Parameter bekommt, welcher die Schriftart bezeichnet. Leider weiß ich noch nicht, welcher Schriftart welcher Integerwert entspricht :(

19.11.2008 13:54

6 lava

Wenn ich die Wortbreite einfach mal ignoriere und jedem Wort ein eigenes div mit fester Startposition zuordne, habe ich das Problem, daß sich die divs überlagern: das darunterliegende Wort, egal ob tatsächlich vom darüberliegenden sichtbar überdeckt oder nur von dessen div, ist dann nicht mehr anklickbar.... gibt es dafür eine Lösung?

02.12.2008 11:36

7 Jörg

Vielleicht, indem du die Divs nur so groß machst wie ihren Inhalt? Dann gibt es zumindest keine nicht sichtbaren Überdeckungen.

02.12.2008 12:05

8 lava

tja, aber woher weiß ich dann die Größe, dazu müßte ich doch die Buchstabenbreite kennen (die Inhalte sind ja dynamisch - ich müßte also string-length * Buchstabenbreite errechnen; angeblich geht das mit imagefontwidth, aber das verlangt einen Parameter und ich weiß nicht, welchem Wert dann welche Schrift entspricht - oder siehst du noch eine andere Möglichkeit?)

02.12.2008 12:34

9 Jörg

Du musst (in CSS) das padding dieser Divs auf 0 setzen.

02.12.2008 12:55

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]