Ergebnis 1 bis 10 von 10

Thema: Ein HP Balken und ein Coder ohne CSS im Kopf^^

  1. #1
    gelöschter User
    Gast

    Standard Ein HP Balken und ein Coder ohne CSS im Kopf^^

    Schur,
    ich hab ein Problem und finde einfach keine Lösung dazu!
    Also ich programmier grad ein Browsergame und wollte jetzt den HP Balken bisschen anschaulicher machen.
    Jetzt hab ich so eine TD:
    Code:
    <tr>
    <td>Leben&#58;</td><td id="charleben">20 / 40 HP</td>
    </tr>
    und möchte jetzt irgendwie einen etwas helleres rot als Hintergrund und noch ein weiteres starkes rot im Hintergrund dessen width ich für die HP Anzeige ändern kann.
    Hört sich jetzt alles ziemlich unverständlich an deswegen hab ich mal ein Bild in Paint gebastelt wie ich
    mir das irgendwie vorgestellt hab:

    Ich hab schon alles ausprobiert was ich bei Google gefunden hab, aber irgendwie klappte nichts, meistens
    wegen dem Text der auch noch in der TD steht. (20 / 40 HP)
    Währ super wenn irgendjemand von euch mir helfen könnte

    Gruß crAzywuLf
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    mach doch nen div in der tabellenzelle.. das kannste dann auch beliebig in der breite verändern (also HP abziehen) ohne daß die tabelle beeinfluusst wird (sofern die tablecells fixe werte haben)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    gelöschter User
    Gast

    Standard

    Kannst du mir vll schreiben wie du das meinst?
    Wenn ich das in eine Div packe weiss ich einfach nicht wie ich das mit der width machen soll, wenn ich das in eine div packe wird der Inhalt halt so eingeschränkt :
    Code:
    <table border="1" width="200" cellspacing="0" cellpadding="=">
    <tr>
    <td width="100">Leben&#58;</td><td
     bgcolor="#fa8072"><div style="background-color&#58;red; width&#58;50px ">20/40 HP</div>
    </td>
    </tr>
    </table>
    Siehe:


    Gruß crAzywuLf

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    also ich hab mir gedacht, daß man zwei divs übereinander legen könnte und die mit nem z-index überlagert, so daß du auf dem obersten die hitpoints zeigen könntest,
    über das mittlere div den balken realisierst und ganz unten bleibt dann die cell mit dem leicht roten hintergund...

    des hat iwie net geklappt... wenn du nen weg findest das zu realisieren haste glaube ich das was du brauchst..

    ansonsten hab ich des ganze mal mit nem javascript hinterlegt...

    Code:
    <table border="1" width="200" cellspacing="0" cellpadding="=">
    <tr>
    <td width="100">Leben&#58;</td><td bgcolor="#fa8072">
    <div id="hp_anzeige" style="background-color&#58;red; height&#58;100%; width&#58;100%; overflow&#58; hidden;"></div>
    
    </td>
    </tr>
    </table>
    das wäre grundlegend meine idee gewesen...
    nur verschwindet dabei die schrift mit/in der HP-anzeige...

    kannste dir hier ja mal angucken:
    http://home.arcor.de/synaptic/hilfe/hp_balken.html
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    gelöschter User
    Gast

    Standard

    Naja hab jetzt alternative genommen...
    Oben drüber ist der balken und eine Zeile dadrunter der jeweilige Text:
    Code:
    <table border="1" width="200" cellspacing="0" cellpadding="=">
    <tr>
    <td width="100">Leben&#58;</td><td width="100">
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr>
      <td height="5" bgcolor="#fa8072">[img]browsergame/img/hp.JPG[/img]</td>
      </tr>
      <tr>
      <td height="5"><font size="-2"><center>20 / 40</center></font></td>
      </tr>
      </table>
    </td>
    </tr>
    <tr>
    <td width="100">Mana&#58;</td><td width="100">
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr>
      <td height="5" bgcolor="#BFCFFF">[img]browsergame/img/mana.JPG[/img]</td>
      </tr>
      <tr>
      <td height="5"><font size="-2"><center>20 / 40</center></font></td>
      </tr>
      </table>
    </td>
    </tr>
    <tr>
    <td width="100">Erfahrung&#58;</td><td width="100">
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr>
      <td height="5" bgcolor="#9F60BF">[img]browsergame/img/xp.JPG[/img]</td>
      </tr>
      <tr>
      <td height="5"><font size="-2"><center>20 / 40</center></font></td>
      </tr>
      </table>
    </td>
    </tr>
    </table>
    hp.JPG
    mana.JPG und xp.JPG sind einzelne Pixel (z.B. rot,blau und lila).
    Falls jemand noch ne bessere Variante hat kann er sie ja hierrein posten.

    Gruß crAzywuLf

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    joa, wenn du diese alternative nimmst, kannste das dann auch easy realisiern^^
    was mich total fuchst ist, das es nicht mit der überlagerung hinhaut.. dachte bisher mit position:relative könnt man des dann auch hinbekommen..
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    gelöschter User
    Gast

    Standard

    Zitat Zitat von synaptic
    joa, wenn du diese alternative nimmst, kannste das dann auch easy realisiern^^
    was mich total fuchst ist, das es nicht mit der überlagerung hinhaut.. dachte bisher mit position:relative könnt man des dann auch hinbekommen..
    hab mich schon die letzte nacht damit begeiert...
    macht kein spaß für sowas ne lösung zu suchen

  8. #8
    Bandit
    Gast

    Standard

    Wie wäre es denn, wenn du das per PHP-Script erledigst? Sollte damit machbar sein.

  9. #9
    gelöschter User
    Gast

    Standard

    Zitat Zitat von bandit600
    Wie wäre es denn, wenn du das per PHP-Script erledigst? Sollte damit machbar sein.
    kla ist sowas machbar... aber hab halt ne schnelle methode gesucht^^
    bei php musste das ganze auch erstmal generieren usw usw...

  10. #10
    Bandit
    Gast

    Standard

    Ungetestet:
    Code:
    <html>
    <body>
    <table>
     <tr>
      <td style="height&#58;30px; width&#58;100px; text-align&#58;left;">Leben</td>
      <td style="height&#58;30px; width&#58;100px; text-align&#58;center; background-image&#58; url&#40;./rectangle.php?max=40&real=20&#41;; background-repeat&#58; no-repeat">20/40 HP</td>
     </tr>
    </table>
    </body>
    </html>
    Code:
    <?PHP
      if &#40;isset&#40;$_GET&#91;'real'&#93;&#41; && isset&#40;$_GET&#91;'max'&#93;&#41;&#41;
      &#123;
          $real = $_GET&#91;'real'&#93;;
          $max =  $_GET&#91;'max'&#93;;
          
          // Hohe und Breite der Grafik
          $width = 100;
          $height = 30;
          
          header&#40; "Content-type&#58; image/png"&#41;;
          
          $img = ImageCreate&#40;$width, $height&#41;;
    
          $x = 0;
          $y = 0;
    
         // Farben
         $color1 = ImageColorAllocate&#40;$img, 255, 0, 0&#41;;
         $color2 = ImageColorAllocate&#40;$img, 250, 128, 113&#41;;
         
         // Fuellung Farbe 1
         $percent = 100 / $max * $real;
         $w = $width * &#40;$percent / 100&#41;;
    
         ImageFilledRectangle&#40;$img, $x, $y, $w, $height, $color1&#41;;
         
         // Füllung Farbe 2
         ImageFilledRectangle&#40;$img, $w+1, $y, $width, $height, $color2&#41;;
    
         // Image raushauen
         ImagePng&#40;$img&#41;;
         ImageDestroy&#40;$img&#41;;
      &#125;
    ?>

Ähnliche Themen

  1. Buchrezension: von Kopf bis Fuß - HTML + CSS
    Von Torty im Forum Literaturempfehlungen und Buchbesprechungen ...
    Antworten: 5
    Letzter Beitrag: 07.11.2007, 15:25
  2. Blutentnahme aus dem Kopf
    Von Louisa im Forum Off Topic und Quasselbox
    Antworten: 10
    Letzter Beitrag: 11.01.2007, 08:50
  3. Buchrezension: von Kopf bis Fuß - Ajax
    Von Torty im Forum Literaturempfehlungen und Buchbesprechungen ...
    Antworten: 0
    Letzter Beitrag: 08.01.2007, 21:40
  4. Wer ist deutschlands schlauster Kopf?
    Von DSK im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 8
    Letzter Beitrag: 03.07.2006, 16:44
  5. Frames ohne Balken
    Von Hilfs bedürftiger im Forum Off Topic und Quasselbox
    Antworten: 5
    Letzter Beitrag: 27.06.2005, 13:02

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •