WinFuture-Forum.de: Möglichkeit über Ein Gif-datei Einen Text Zu Schreiben? - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Möglichkeit über Ein Gif-datei Einen Text Zu Schreiben?


#1 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

  geschrieben 07. Mai 2006 - 19:09

Hallo liebe User ;D

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 :D

Mit <div> & CSS müsste das doch gehen! Aber ich weiss nicht wie ...
Kennt ihr eine Lösung für dieses Problem?

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

Anzeige



#2 _rjchio_

  • Gruppe: Gäste

geschrieben 07. Mai 2006 - 19:13

Machs doch nicht so kompliziert ;D
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
0

#3 _rjchio_

  • Gruppe: Gäste

  geschrieben 08. Mai 2006 - 15:50

Im Anhang ist ein Beispiel zu meiner Antwort :blush:

Das wichtigste in Kürze: :rolleyes:
- 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)


0

#4 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 08. Mai 2006 - 16:57

Der Anhang ist ja toll :rolleyes:
Ich kann das garnicht öffnen was ist das den? Png Gif Jpg ... ?

Du hast glaub ich was falsch verstanden :blush:
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

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

#5 Mitglied ist offline   bartii 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.136
  • Beigetreten: 02. August 05
  • Reputation: 1
  • Geschlecht:Männlich

geschrieben 08. Mai 2006 - 17:04

Beitrag anzeigenZitat (keny: 08.05.2006, 17:57)

Der Anhang ist ja toll :rolleyes:
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

<?php

$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

Software is like sex. It is better when it's free.. (Linus Torvalds)
0

#6 Mitglied ist offline   Floele 

  • Gruppe: aktive Mitglieder
  • Beiträge: 919
  • Beigetreten: 22. Juni 04
  • Reputation: 0

geschrieben 08. Mai 2006 - 17:06

Beitrag anzeigenZitat (rjchio: 07.05.2006, 20:13)

Machs doch nicht so kompliziert :rolleyes:
Einfach eine Gif-Datei erstellen, die 1px breit ist und mir background-image in die Länge ziehen.


Warum nicht gleich background-color?
0

#7 _rjchio_

  • Gruppe: Gäste

geschrieben 08. Mai 2006 - 17:13

Beitrag anzeigenZitat (Floele: 08.05.2006, 18:06)

Warum nicht gleich background-color?
Wenn man einen Verlauf oder so will (von oben nach unten)

Zitat

Du hast glaub ich was falsch verstanden wink.gif
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
In diesem Fall musst du das Script nur etwas ändern (Ich hab die breite und die Prozent-Angabe separat genommen um mehr Flexibilität zu schaffen):
<?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

0

#8 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 08. Mai 2006 - 17:14

Beitrag anzeigenZitat (Floele: 08.05.2006, 18:06)

Warum nicht gleich background-color?


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 :rolleyes:

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

#9 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 08. Mai 2006 - 17:31

es hatt geklappt! klick
Nur das Bild wird nicht richtig angezeigt.
Mir ist noch was eingefallen: Wie ist das dan bei den 0% Balken? :rolleyes:
Da ist ja das div 0px breit? Und die Prozenzahl wird dan garnicht angezeigt

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

#10 _rjchio_

  • Gruppe: Gäste

geschrieben 08. Mai 2006 - 17:38

Beitrag anzeigenZitat (keny: 08.05.2006, 18:31)

es hatt geklappt! klick
Nur das Bild wird nicht richtig angezeigt.
Mir ist noch was eingefallen: Wie ist das dan bei den 0% Balken? :rolleyes:
Da ist ja das div 0px breit? Und die Prozenzahl wird dan garnicht angezeigt
Das ist no Problem :blush:
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
0

#11 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 08. Mai 2006 - 17:53

hehe Danke für alles :rolleyes:

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

#12 Mitglied ist offline   K050V4 

  • Gruppe: aktive Mitglieder
  • Beiträge: 787
  • Beigetreten: 13. August 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Stuttgart
  • Interessen:(X)HTML<br />CSS2+<br />PHP 4/5<br />MySQL 5<br />Symfony 1.2+<br />JavaScript / AJAX<br />jQuery<br />C++<br />C#<br />Java<br />...

geschrieben 08. Mai 2006 - 18:29

Ich hab gerade germerkt das das if(....< 20) { .... unnötig ist weil wen das div 0px lang ist und man Text da rein schreibt wird das automatisch verlängert :rolleyes:

Zitat

"In der Welt des Erkennbaren ist die Idee des Guten die höchste." - Platon

Spritify! Easy CSS-Sprite-Generator | Albanisch Deutsch Wörterbuch
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0