ziggchen: Script für Balken - Ich brauche Hilfe bitte

Hallo!

Ich hoffe, ich bin hier richtig. Ich habe ein paar HTML Kenntnisse, bin aber immer noch Anfänger...

Mein Problem ist folgendes;

Ich leite für ein Onlne-Golf-Spiel eine Gilde und erstelle dafür eine Homepage. Wir müssen Gildenpunkte sammeln um im Level zu steigen. Wieviele Punkte wir schon haben wird uns im game mit Balken angezeigt. Diese Balken würde ich gerne auf unserer HP abzeigen. Wie kann ich also so einen zweifarbigen Balken erstellen?

  1. Hallo,

    Wie kann ich also so einen zweifarbigen Balken erstellen?

      
    #balken {  
     border-top:0.5em solid black;  
     height:0.5em;  
     background:red;  
     width:10em;  
     }  
    
    
      
    <div id="balken"></div>  
    
    

    Die width-Angabe müsste wahrscheinlich dynamisch angepasst werden.
    Je nach eurem Rang.

    Grüße, Matze

  2. Wie kann ich also so einen zweifarbigen Balken erstellen?

    Erstell mit einem Grafikprogramm eine 1-Pixel-breite und "so-dick-wie-der-Balken-werden-soll"-Pixel-hohe Grafik (gif, jpg oder png). Nennen wir sie balken.png.

    Im HTML-Skript rufst Du dann mit dem <img...>-Tag die Grafik in der passenden Breite auf.
    z.B.
    <img src="balken.png" width="67px" ...>

    Hier hätte der Teilnehmer 67 Punkte.

    Gruß vom foomaker

    --
    Natürlich glaube ich an die Existenz von Ausserirdischen. Schliesslich gibt es ja auch das PERFEKTE SCRIPT.
    1. Lieber foomaker,

      <img src="balken.png" width="67px" ...>

      Hier hätte der Teilnehmer 67 Punkte.

      wenn man dann hinter das Bild (besser: hinter das Elternelement des Bildes) noch eine Hintergrundfarbe legt, dann hat man (bei einfarbigem Bild) noch den "zweifarbigen" Effekt...

      Etwa so könnte ich mir das vorstellen (ungetestet!):
      <span style="width: 200px;background:red"><img src="gruener_balken.gif" alt="63 von 100 Punkten! " style="width: 126px" /></span>

      Zu diesem Beispiel hatte ich spontan die Idee, die Punkte immer zwei Pixel breit darzustellen, aber man kann den Faktor entprechend anpassen.

      Liebe Grüße aus Ellwangen,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      1. Hi Leuts,

        ich hatte spontan die Idee einen Container mit entsprechendem Hintergrundbild zu versehen. Dann passt man die laenge (width) des Containers noch den Punkten an und hat darin noch Platz etwas zu schreiben - z.B. Punktestand und Aktualisierungsdatum.

        Gruss,

        1. Hallo,

          ich hatte spontan die Idee einen Container mit entsprechendem Hintergrundbild zu versehen. Dann passt man die laenge (width) des Containers noch den Punkten an und hat darin noch Platz etwas zu schreiben - z.B. Punktestand und Aktualisierungsdatum.

          wozu denn ein Bild? Versteh ich die ganze Zeit nicht...
          Bis auf die Tatsache, dass man für meinen Lösungsvorschlag class statt id verwenden...

          Grüße, Matze

          1. Hi,

            wozu denn ein Bild? Versteh ich die ganze Zeit nicht...
            Bis auf die Tatsache, dass man für meinen Lösungsvorschlag class statt id verwenden...

            Natuerlich gehts einfarbig (oder 2farbit gestrieft auch. Aber vielleicht sollt ja etwas ansprechender sein? z.B. was mit 'rundeffekt' (verlauf)

            Ansonsten ist Deine Loesung das, weas ich auch machen wuerde, bzw schon gemacht habe. Damals auf dem Posttag... als der Kaiser persoenlich meine Charts zur WM kommentierte... *seuftz*

            1. Natürlich kann - an meinen Vorschlag einer 1-Pixel-breiten Grafik anknüpfend - diese Minigrafik aus verschiedenen Farben bestehen. Erstelle doch mit Photoshop o.ä. einen schönen Balken und schneide ein 1-Pixel-breites "Kuchenstück" aus. Fertig. Passen in die Breite gezogen - wunderbar. :-)

              Gruß, foomaker

              --
              Natürlich glaube ich an die Existenz von Ausserirdischen. Schliesslich gibt es ja auch das PERFEKTE SCRIPT.
              1. Hallo,

                ... wunderbar. :-)

                nö, mich stört die unnötige Grafik.
                Es wurde direkt nach einer 2-Farb-Lösung gefragt.
                Wozu braucht man da eine Grafik?
                Sicher dürfte die Dateigröße unter 1kb liegen, dennoch!?

                Ok, ab 4 Farben scheiterts mit CSS aber ein 3-Farbverlauf sah auf dem
                Super-Nintendo damals klasse aus^^

                Sorry, aber ich denk Sachen, welche ohne Grafiken lösbar sind,
                sollte man auch ohne Grafiken lösen.

                Grüße, Matzr

                1. Sorry, aber ich denk Sachen, welche ohne Grafiken lösbar sind,
                  sollte man auch ohne Grafiken lösen.

                  Sorry, aber wenn man etwas einfach und trotzdem optisch ansprechend machen kann, spricht nichts gegen das KISS-Prinzip.

                  Diese Grafik ist gerade mal 222 Byte groß (1 x 20 px als png)
                  So einen Balken mit CSS? Wohl kaum. ;-)
                  ->

                  mit width="120px" in die Länge gezogen, sähe das dann so aus:

                  Spieler 1
                  120

                  Gruß vom foomaker

                  --
                  Natürlich glaube ich an die Existenz von Ausserirdischen. Schliesslich gibt es ja auch das PERFEKTE SCRIPT.
                2. Hoi,

                  Sorry, aber ich denk Sachen, welche ohne Grafiken lösbar sind,
                  sollte man auch ohne Grafiken lösen.

                  Jupp. Aber 2 farbig bedeutet nicht automatisch 2 (oder 3) horizontale Streifen. Das kann der TE aber ja m besten selbst fuer sich entscheiden. Einfach einen gelben Balken mit schwarzem Rahmen wuerd ich auch nur per CSS loesen.

  3. Hi,

    Ich leite für ein Onlne-Golf-Spiel eine Gilde und erstelle dafür eine Homepage. Wir müssen Gildenpunkte sammeln um im Level zu steigen. Wieviele Punkte wir schon haben wird uns im game mit Balken angezeigt. Diese Balken würde ich gerne auf unserer HP abzeigen. Wie kann ich also so einen zweifarbigen Balken erstellen?

    Falls horizontal:

    <div style="height:10px; width:0; border-left:40px solid blue; border-right:20px solid yellow;"></div>
    Height regelt die Dicke des Balkens, die Gesamtlänge ergibt sich aus den beiden borders.

    Falls vertikal: left/right/width gegen top/bottom/height tauschen.

    (eine dritte Farbe wäre auch noch möglich ohne zweites Element oder Hintergrundbild, indem die width entsprechend gesetzt und eine Hintergrundfarbe angegeben wird)

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.