Hilfe html leiste?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angeben
anzeige
anzeigen
art
aufbauen
automatisch gehen
code
dynamik
fortschritt
gesammelte punktzahl
helfen
http
leiste
level
offene punkte
pfeil
punkt
stellen
suche
url
-
Hallo,
Die suche hat bei mir nicht so großartig geklappt ich suche eine art Leiste wo man sieht wie viel punkte man schon hat
http://www.myimg.de/?img=tabellee517c9.png
Sowas suche ich in html wo man die punkte angeben kann hoffe ihr könnt mir helfen.
Edit: am besten wäre wie man so eine tabelle nennt.. Danke euch.
Beitrag zuletzt geändert: 9.4.2011 13:04:59 von loliguy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich denke, dass keiner versteht, was du meinst. Beschreibe das, was du willst bitte genauer, dann kann man dir auch helfen. Was ist denn eigentlich mit dem Pfeil (bei dem ein Pixel im Schwarzen übrigens weiß ist
)?
-
Also es soll eine art levelleiste sein. d.H. das grün makierte sind schon die erreichten punkte und das weiße sind noch die offene Punkte
So soll das automatisch gehen. -
Also dir ist schon klar, dass für jegliches Level HTML nicht ausreicht sondern du eine serverseitige Sprache (zB PHP) brauchst?
Damit erzeugst du dann die Anzeige, dafür gibt es viele verschiedene Methoden, du könntest beispielsweise den Pfeil mit durchsichtigem Innenteil auf die Seite stellen und Anteilsmäßig mit einem grünen Hintergrundbild "füllen" (background-position). Oder einfacher einfach ein <img> platzieren und mit CSS auf entsprechende Größe formatieren.
Gibt aber auch noch viele andere (wahrsch auch einfachere) Möglichkeiten... -
Hi loliyguy,
was denn für punkte ? meinst du prozenzpunkte des ladevorgangs der seite - aslo eine art ladebalken / fortschrittsanzeige ?
oder eher eine art level-xp-balken wo einfach nur eine gesammelte punktzahl grafisch dargestellt werden soll ?
im reinen staischen html gibt es keine solche dynamik - du könntest aber halt 100 verschieden bilder machen und dann immer das mit der entsprechenden punktzahl anzeigen...
hier mal ein kleines javascript nach einem der guten Ansätze von a-o-e:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> function gibPfeil(nPunkte) { document.write('<div style="width:300px;height:100px;position:relative;">'); document.write('<div id="pfeilfuellung" style="width:'+nPunkte*3+'px;height:100px;background-color:#0F0;">'); document.write('<div style="width:300px;height:100px;position:absolute;top:0px;left:0px;background-image:url(http://img15.myimg.de/pfeila51c5.png);">'); document.write('</div>'); document.write('</div>'); document.write('</div>'); } </script> </head> <body> <script type="text/javascript"> gibPfeil(75); gibPfeil(33); gibPfeil(10); gibPfeil(0); gibPfeil(100); </script> </body> </html> -
^^ Dein Script funzt nicht.
Wozu auch überflüssiges Javascript?
Ist gar nicht notwendig.
@loliguy
Lösung hier anschauen, oder nachfolgend:
^^ Dazu benötigt wird der Pfeil<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Level - Pfeil</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"><!-- .fortschrittsbalken { position: absolute; top: 10px ; left: 10px ; /***************/ width: 136px ; /* <-- Level Fortschrittsbalken */ /*************/ height: 66px ; z-index: 10 ; background-color: #0F0 ; } .pfeil { position: relative ; top: 2px ; left: 2px ; z-index: 20 ; } --> </style> <!--[if IE]><style type="text/css"> .pfeil { position: relative ; top: -5px ; left: 0px ; z-index: 20 ; } </style><![endif]--> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> <div class="fortschrittsbalken"></div> <div class="pfeil"><img src="pfeil.gif" width="265" height="66" alt="Dein Level" title="Dein Level"></div> </body> </html>
That´s all. -
nun js weil er von dynamik sprach....
...also wenn der fortschritt sich z.B. erstmal stück für stück aufbauen soll oder so...
...mein script funzt einwandfrei :)
Beitrag zuletzt geändert: 14.4.2011 14:35:14 von kleines-ich -
Worum geht´s denn nun genau? Die Lösung wurde doch schon genannt.
Muß denn alles kaputtdiskutiert werden?
#fail
kleines-ich schrieb:
nun js weil er von dynamik sprach....
...also wenn der fortschritt sich z.B. erstmal stück für stück aufbauen soll oder so...
^^ Davon schrieb loliguy nix, ganz im Gegenteil:
loliguy schrieb:
Hallo,
Die suche hat bei mir nicht so großartig geklappt ich suche eine art Leiste wo man sieht wie viel punkte man schon hat
http://www.myimg.de/?img=tabellee517c9.png
Sowas suche ich in html wo man die punkte angeben kann hoffe ihr könnt mir helfen.
Html. Nix Javascript.
kleines-ich schrieb:
...mein script funzt einwandfrei :)
^^ Im FF vielleicht, aber nicht im IE.
Außerdem läßt sich Javascript auch kompensieren.
Aus Deinem
könnte<script type="text/javascript"> function gibPfeil(nPunkte) { document.write('<div style=" ... ">'); document.write('<div id="pfeilfuellung" style=" ... ">'); document.write('<div style=" ... ">'); document.write('</div>'); document.write('</div>'); document.write('</div>'); } </script>
werden.<script type="text/javascript"> var d='</div>';function dw(a,b,c) {document.write(a,b,c)} function gibPfeil(nPunkte) { dw('<div style=" ... ">'); dw('<div id="pfeilfuellung" style=" ... ">'); dw('<div style=" ... ">'); dw(d,d,d);} </script>
So long.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
