Möglichkeit über Ein Gif-datei Einen Text Zu Schreiben?
#1
geschrieben 07. Mai 2006 - 19:09
Auf meiner Homepage habe ich eine Umfrage und die Ergebnisse werden mit einen Balken ausgegeben. Der balken ist eine Gif-Datei, die mit der Prozenzahl verlängert wird.
Kleines Beispiel: <img src="img/bild.gif" width="<?php echo "$pro01"; ?>">
Der Balken befindet sich in eine Tablenzelle:
<td><img src="img/bild.gif" width="<?php echo "$pro01"; ?>"></td>
Und ich möchte gern das die Prozentzahl zentiert auf den Bild erscheint.
Ich hab schon gegoogled aber nichts gefunden
Mit <div> & CSS müsste das doch gehen! Aber ich weiss nicht wie ...
Kennt ihr eine Lösung für dieses Problem?
Zitat
Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
Anzeige
#2 _rjchio_
geschrieben 07. Mai 2006 - 19:13
Einfach eine Gif-Datei erstellen, die 1px breit ist und mir background-image in die Länge ziehen. Danach kannst du dem div ein text-align verpassen und fertig!
MfG rjchio
#3 _rjchio_
geschrieben 08. Mai 2006 - 15:50
Das wichtigste in Kürze:
- background-image:url(hintergrund_umfrage.png); --- Hintergrundbild
- text-align:center; --- richten den Text aus
- height:20px; --- fixe Höhe für Balken
- $breite = 120; --- Breite in Pixel
- $prozent = 80; --- Prozentzahl auf Balken
MfG rjchio
Angehängte Datei(en)
-
umfrage_balken.zip (832bytes)
Anzahl der Downloads: 91
#4
geschrieben 08. Mai 2006 - 16:57
Ich kann das garnicht öffnen was ist das den? Png Gif Jpg ... ?
Du hast glaub ich was falsch verstanden
Ich will Das der Balken nach der Prozent anzahl verlängert wird wen ich das als Background mache ist es bei jeden gleich lang.
Wen z.B.: beim ersten 80% sind soll das Bild 80px lang werden ... und da drauf mittig soll die Prozenzahl angezeigt werden
Zitat
Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
#5
geschrieben 08. Mai 2006 - 17:04
Zitat (keny: 08.05.2006, 17:57)
Ich kann das garnicht öffnen was ist das den? Png Gif Jpg ... ?.
Das ist PNG (der Balken)
und der Code ist in der PHP datei
Zitat
$breite = 120;
$prozent = 80;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
.umfrage {
height:20px;
background-image:url(hintergrund_umfrage.png);
text-align:center;
color:#CCCCCC;
}
//-->
</style>
</head>
<body>
<div style="width:<?php echo $breite; ?>px;" class="umfrage"><?php echo $prozent."%"; ?></div>
</body>
</html>
Dieser Beitrag wurde von bartek2k bearbeitet: 08. Mai 2006 - 17:05
#6
geschrieben 08. Mai 2006 - 17:06
#7 _rjchio_
geschrieben 08. Mai 2006 - 17:13
Zitat (Floele: 08.05.2006, 18:06)
Zitat
Ich will Das der Balken nach der Prozent anzahl verlängert wird wen ich das als Background mache ist es bei jeden gleich lang.
Wen z.B.: beim ersten 80% sind soll das Bild 80px lang werden ... und da drauf mittig soll die Prozenzahl angezeigt werden
<?php $prozent = $breite = 120; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> <!-- .umfrage { height:20px; background-image:url(hintergrund_umfrage.png); text-align:center; color:#CCCCCC; } //--> </style> </head> <body> <div style="width:<?php echo $breite; ?>px;" class="umfrage"><?php echo $prozent."%"; ?></div> </body> </html>
Dieser Beitrag wurde von rjchio bearbeitet: 08. Mai 2006 - 17:13
#8
geschrieben 08. Mai 2006 - 17:14
Zitat (Floele: 08.05.2006, 18:06)
Die Idee hatte ich auch schon aber der GifBalken hat einen schönen Farbverlaufen von hell- zu dunkelrot. Ich weiss man kann das auch mit CSS machen aber ich hab mir über die Sache kein Kopf gemacht.
rjchio danke jetzt habe ich kapiert was du meinst
Zitat
Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
#9
geschrieben 08. Mai 2006 - 17:31
Nur das Bild wird nicht richtig angezeigt.
Mir ist noch was eingefallen: Wie ist das dan bei den 0% Balken?
Da ist ja das div 0px breit? Und die Prozenzahl wird dan garnicht angezeigt
Zitat
Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
#10 _rjchio_
geschrieben 08. Mai 2006 - 17:38
Zitat (keny: 08.05.2006, 18:31)
Nur das Bild wird nicht richtig angezeigt.
Mir ist noch was eingefallen: Wie ist das dan bei den 0% Balken?
Da ist ja das div 0px breit? Und die Prozenzahl wird dan garnicht angezeigt
Dafür ist gerade die Variable $breite (!) gedacht...
Möglichkeit:
<?php $prozent = $breite = 120; if ($breite <= 20) { $breite = 20; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> <!-- .umfrage { height:20px; background-image:url(hintergrund_umfrage.png); text-align:center; color:#CCCCCC; } //--> </style> </head> <body> <div style="width:<?php echo $breite; ?>px;" class="umfrage"><?php echo $prozent."%"; ?></div> </body> </html>
MfG rjchio
#11
geschrieben 08. Mai 2006 - 17:53
Zitat
Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
#12
geschrieben 08. Mai 2006 - 18:29
Zitat
Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch