Druckversion des Themas

Hier klicken um das Topic im Orginalformat anzusehen

HTML-Editor phase 5 Support _ HTML _ Game status Tabelle erstellen?

Geschrieben von: whazza 27.10.2009 - 11:09

Hi kann mir jemand dabei helfen.
Ich lese mich jetzt schon seid tagen durchs Netz und auch schon viel Probiert, aber ich bekomme es einfach nicht hin.


Ich wollte so eine Tabelle erstellen die so aussehen sollte


Habe es Probiert als Tabelle und CSS.

Aber es will einfach nit gehen so wie es soll.


mfg
whazza

Geschrieben von: Thomas 27.10.2009 - 11:23

Hast du dich mit dem Quelltext der Seite beschäftigt, von der du den Screenshot gemacht hast?

Was genau hast du probiert und was genau hat nicht funktioniert?

Gibt es einen Link auf die Seite mit dem HTML-Code, mit dem du es probiert hast?

 glaskugel.jpg ( 12.68KB ) : 4
 

Geschrieben von: whazza 27.10.2009 - 11:31

Also original ist es von hier das letzte ganz unten
http://www.gametracker.com/server_info/93.186.205.13:27015/b/

Ich hatte probiert mit Dreamviewer eine Tabelle zu erstellen mit 4 Zeilen klappt auch, dann hatte ich probiert das sich die Linien nicht berühren klappt jetzt auch.
Aber ich bekomme es einfach nicht hin, das ich in der Mitte die boxen eine unterschiedliche Größe zuweisen kann. Und sie verschieben kann ohne das die anderen seine Größe verstellen.

hier die test datei von mir
http://nwa.dynalias.com/test/tabelle.php

Geschrieben von: Thomas 27.10.2009 - 11:50

Das Formatieren von Tabellen mit CSS wird in http://de.selfhtml.org/html/tabellen/gestaltung.htm#gestalten_css ausführlich und gut mit vielen praktischen Beispielen erklärt.

Mit

QUELLTEXT
<td style="height: 100px;">Text</td>
legst du z.B. fest, dass eine Tabellenzelle 100 Pixel hoch sein soll.

Grundsätzlich spricht allerdings auch nichts dagegen, das Layout wie auf der Vorlagenseite mit mehreren DIV-Tags zu erzeugen.

Üb mal ein bisschen mit den Infos, die du bei SELFHTML über CSS bekommst, dann solltest du das hinbekommen.

Geschrieben von: whazza 27.10.2009 - 11:56

das habe ich gestern und vorgestern fast 5 stunden probiert auf der seite http://de.selfhtml.org/html/tabellen/gestaltung.htm#gestalten_css und auf der seite http://fwpf-webdesign.de/einfuehrung

Aber wie kann man die breite einzeln einstellen.
Und wie kann ich den in den Hauptrahmen was reinschreiben ohne eine neu Box in der Mitte einzufügen.

werde es aber noch weiter probieren.

Geschrieben von: Thomas 27.10.2009 - 12:50

Wieso willst du die Breite "einzeln" einstellen? In deiner Vorlagengrafik sind alle Bereiche gleich breit.

Wenn du doch nicht das machen willst, was auf der Grafik zu sehen ist, solltest du erstmal genau definieren, was du machen willst, dann kann man sich überlegen, ob eine Tabelle dafür geeignet ist oder nicht. Je nachdem, wie komplex deine Struktur ist, musst du ggf. auch mit verschachtelten Tabellen oder eben mit DIV-Tags wie in der HTML-Vorlage arbeiten.

ZITAT(whazza @ 27.10.2009 - 12:56) *
Und wie kann ich den in den Hauptrahmen was reinschreiben ohne eine neu Box in der Mitte einzufügen.
Darunter kann ich mir nun gar nichts vorstellen - was meinst du?

Ich würde so an die Sache herangehen, dass ich mir den HTML-Code des Originals kopieren und dann das ganze Stück für Stück an meine Vorstellungen anpassen würde.

Geschrieben von: Thomas 27.10.2009 - 13:01

Ich habe mir gerade nochmal die aktuelle Version deiner Testseite angeschaut: Versuch vielleicht erst auch noch, zu verstehen, wie man Tabellen für das Seitenlayout einsetzt (gibt es z.B. auch in http://de.selfhtml.org/html/tabellen/layouts.htm).

Was du da gerade gebastelt hast (lauter <tr>-Tags, vermutlich um zu erreichen, dass die Zellen mit Inhalt korrekt positioniert werden) ist nicht wirklich gut. Grundsätzlich denke ich tatsächlich, dass dir mit einem Konstrukt aus DIV-Tags wie in der Vorlage besser geholfen ist.

Wenn du die Tabelle nur verwendest, weil du damit einen Rahmen bekommst (was ich vermute), setz dich auch nochmal damit auseinander, wie man mit CSS http://de.selfhtml.org/css/eigenschaften/rahmen.htm und http://de.selfhtml.org/css/eigenschaften/hintergrund.htm für beliebige Elemente definiert (spannend auch die Seite zur http://de.selfhtml.org/css/eigenschaften/positionierung.htm von Elementen). Wenn du das verstanden hast, tust du dich eventuell einfacher, wenn du die DIV-Tags einfach entsprechend formatierst und untereinander setzt.

Geschrieben von: whazza 27.10.2009 - 13:01

ZITAT
Darunter kann ich mir nun gar nichts vorstellen - was meinst du?


Es ist ja ein Hauptrahmen außen Rum und in den möchte ich was schreiben, und nicht in die drei boxe die in der Mitte sind.
Da soll ja später die anzeige sein.


Auf meiner HP http://www.seeya.at/nwa/ rechts an der Seite hat mir ein freund den Status zusammen gebastelt und den Rahmen möchte ich einfach ändert.


Und leider kann man den Quellcode Text nicht sehen von der anzeige auf der HP bei denen. http://www.gametracker.com/server_info/93.186.205.13:27015/b/

Geschrieben von: Thomas 27.10.2009 - 13:20

ZITAT(whazza @ 27.10.2009 - 14:01) *
Es ist ja ein Hauptrahmen außen Rum und in den möchte ich was schreiben, und nicht in die drei boxe die in der Mitte sind.
Da soll ja später die anzeige sein.
Eventuell hast du das Konzept von Tabellen noch nicht verstanden - in Tabellen muss du immer etwas in eine Zelle schreiben. Du kannst allerdings definieren, ob die Zelle einen Rahmen hat oder nicht. Hast du dich mit den Links zur CSS-Gestaltung, die ich oben genannt habe, schon mal ernsthaft beschäftigt?

ZITAT(whazza @ 27.10.2009 - 14:01) *
rechts an der Seite hat mir ein freund den Status zusammen gebastelt und den Rahmen möchte ich einfach ändert.
Schon mal den Freund gefragt?

ZITAT(whazza @ 27.10.2009 - 14:01) *
Und leider kann man den Quellcode Text nicht sehen von der anzeige auf der HP bei denen. http://www.gametracker.com/server_info/93.186.205.13:27015/b/
Seltsam, ich kann mir den problemlos anzeigen lassen
CODE

<div class="global">
<div id="popuptest">
To join games through your internet browser, you MUST have GameTracker Lite installed on your computer.
<div class="block_spacer05">
</div>
<a href="http://www.gametracker.com/downloads/" target="_blank">
<span class="btn_custom">
DOWNLOAD GT LITE
</span>
</a>
<div class="block_spacer05">
</div>
<a href="gt://joinGame:game=cs&amp;ip=93.186.205.13&amp;port=27015">
<span class="btn_custom">
JOIN SERVER
</span>
</a>
&nbsp;
<a href="" onclick="java script:getElementById('popuptest').style.display = 'none'; return false;">
<span class="btn_custom">
CANCEL
</span>
</a>
</div>
<div class="header_footer">
<div class="item_float_left">
<a href="http://www.gametracker.com/search/cs/DE/" target="_blank">
<img src="http://image.www.gametracker.com/images/flags/de.gif" alt="DE" title="Germany">
</a>
&nbsp;
</div>
<div class="item_float_right">
&nbsp;
<a href="http://www.gametracker.com/search/cs/" target="_blank">
<img src="http://image.www.gametracker.com/images/search/game_icons/cs.png" alt="Counter Strike 1.6" title="Counter Strike 1.6">
</a>
</div>
<div class="item_float_right">
<a href="http://www.gametracker.com/search/cs/" target="_blank">
Counter Strike 1.6
</a>
</div>
<div class="item_float_clear">
</div>
</div>
<div class="server_name">
-=N|W|A=-Hessenloewen(http://seeya.at/nwa/) .de GS by gameserver.gamed.de
</div>
<div class="info_line">
<div class="item_float_left">
<b>IP:</b>
</div>
<div class="item_float_right">
<img src="http://cache.www.gametracker.com/images/components/html0/online.gif" alt="Online">
<a href="/server_info/93.186.205.13:27015/" target="_blank">93.186.205.13:27015</a>
</div>
<div class="item_float_clear"></div>
</div>
<div class="info_line">
<div class="item_float_left">
<b>Players:</b>
</div>
<div class="item_float_right">
0(6)/18
</div>
<div class="item_float_clear"></div>
</div>
<div class="info_line">
<div class="item_float_left">
<b>Rank:</b>
</div>
<div class="item_float_right">
8508th (56th pctile)
</div>
<div class="item_float_clear">
</div>
</div>
<div class="info_line">
<div class="item_float_left">
<b>Map:</b>
</div>
<div class="info_line_right">
<a href="http://www.gametracker.com/search/?search_by=map&amp;query=cs_italy_2k4&amp;game=cs" target="_blank">
cs_italy_2k4
</a>
</div>
<div class="item_float_clear"></div>
</div>
<div class="map_image">
<img class="image_160x120" src="http://image.www.gametracker.com/images/maps/160x120/nomap.jpg" alt="cs_italy_2k4">
</div>

<div class="info_line">
<b>Online Players:</b>
</div>
<div class="scrollable channelViewScrollable">
<div class="scrollable_on_c01">
1
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/%5BP%2AD%5DWesley%20%2896%29/" target="_blank">[P*D]Wesley (96)</a>
</div>
<div class="scrollable_on_c03">
2
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
2
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/%5BP%2AD%5DRobert%20%28100%29/" target="_blank">[P*D]Robert (100)</a>
</div>
<div class="scrollable_on_c03">
0
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
2
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/%5BP0D%5DKilling%20Frenzy%20%28100%29/" target="_blank">[P0D]Killing Frenzy (100)</a>
</div>
<div class="scrollable_on_c03">
0
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
2
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/%5BPOD%5DMurder%20Inc%2e%20%2898%29/" target="_blank">[POD]Murder Inc. (98)</a>
</div>
<div class="scrollable_on_c03">
0
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
2
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/%5BP%2AD%5Dkillaruna%20%2899%29/" target="_blank">[P*D]killaruna (99)</a>
</div>
<div class="scrollable_on_c03">
0
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
2
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/%5BP0D%5DSylvester%20%2895%29/" target="_blank">[P0D]Sylvester (95)</a>
</div>
<div class="scrollable_on_c03">
0
</div>
<div class="item_float_clear">
</div>
</div>

<div class="info_line">
<b>Top 10 Players:</b>
&nbsp;
<a href="/server_info/93.186.205.13:27015/top_players/" target="_blank"> View All</a>
</div>
<div class="scrollable">
<div class="scrollable_on_c01">
1.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/-%3DN%7CW%7CA%3D-EL_Bantito/" target="_blank">-=N|W|A=-EL_Bantito</a>
</div>
<div class="scrollable_on_c03">
17.40k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
2.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/-%3DN%7CW%7CA%3D-KasselCity/" target="_blank">-=N|W|A=-KasselCity</a>
</div>
<div class="scrollable_on_c03">
15.99k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
3.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/uebertalentiert/" target="_blank">uebertalentiert</a>
</div>
<div class="scrollable_on_c03">
15.08k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
4.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/-%3DN%7CW%7CA%3D-KasselCityGirl/" target="_blank">-=N|W|A=-KasselCityGirl</a>
</div>
<div class="scrollable_on_c03">
9.74k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
5.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/Demonick/" target="_blank">Demonick</a>
</div>
<div class="scrollable_on_c03">
9.60k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
6.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/-%3DN%7CW%7CA%3D-Lalagirl/" target="_blank">-=N|W|A=-Lalagirl</a>
</div>
<div class="scrollable_on_c03">
9.20k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
7.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/-%3DN%7CW%7CA%3D-SkiD/" target="_blank">-=N|W|A=-SkiD</a>
</div>
<div class="scrollable_on_c03">
7.47k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
8.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/Castorus/" target="_blank">Castorus</a>
</div>
<div class="scrollable_on_c03">
6.34k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
9.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/-%3DN%7CW%7CA%3D-Psyco/" target="_blank">-=N|W|A=-Psyco</a>
</div>
<div class="scrollable_on_c03">
6.17k
</div>
<div class="item_float_clear">
</div>
<div class="scrollable_on_c01">
10.
</div>
<div class="scrollable_on_c02">
<a href="/server/93.186.205.13:27015/player/Sai%20Deschain/" target="_blank">Sai Deschain</a>
</div>
<div class="scrollable_on_c03">
5.41k
</div>
<div class="item_float_clear">
</div>
</div>
<div style="padding: 2px 0px 6px; text-align: center;">
<span class="btn_custom" onclick="java script:getElementById('popuptest').style.display = 'block'; return false;">
JOIN THIS SERVER
</span>
</div>
<div class="header_footer">
<div class="item_float_right">
&nbsp;
<a href="http://www.gametracker.com" target="_blank">
<img src="http://cache.www.gametracker.com/images/components/html0/gt_icon.gif" alt="GameTracker">
</a>
</div>
<div class="item_float_right">
<a href="http://www.gametracker.com" target="_blank">
GameTracker.com
</a>
</div>
<div class="item_float_clear"></div>
</div>
</div>
Da dort aber alle CSS-Definitionen über Klassen laufen, wird dir das nicht allzuviel helfen.

Geschrieben von: Thomas 27.10.2009 - 13:23

Und mal ganz blöd gefragt: Da kannst du dir doch den HTML-Code für den IFRAME erzeugen lassen und dann direkt bei dir einbinden - warum machst du das nicht?

Geschrieben von: whazza 27.10.2009 - 13:36

Meinst du von der Seite das direkt nehmen? Wenn ja?? Die haben leider keine Flash Video Ansicht. Es gibt zwar einen Anbieter der das mit den Flash Videos auch hat aber man kann keine eigenen Flash Videos einfügen und die haben nicht alle.

Geschrieben von: Thomas 27.10.2009 - 16:13

Was hat das jetzt wieder mit Flash zu tun? Bei dir auf der rechten Seite steht ein IFRAME und den könntest du mit dem IFRAME-Code, der dir auf der Originalseite erzeugt wird, ersetzen (dafür ist diese Seite ja wohl da).

Aber du kommst mit deiner Beispielseite ja schon ganz gut voran, sieht doch jetzt dem Original schon viel ähnlicher. Ein bisschen solltest du noch am Basis-HTML-Wissen arbeiten (es gibt zum Beispiel kein Tag mit dem Namen p2 und die Tags h1 und h2 heißen nicht so, damit man Überschriften auf zwei Arten formatieren kann, sondern sie dienen eher der Strukturierung des Inhalts), aber wenn du dir noch anschaust, wie die http://de.selfhtml.org/css/formate/zentrale.htm funktioniert und dich noch ein wenig damit auseinandersetzt, http://de.selfhtml.org/html/referenz/elemente.htm und wozu man sie einsetzen kann, wirst du schon zum Ziel kommen.

Geschrieben von: whazza 27.10.2009 - 17:08

achso aber irgendwie geht es ja schon, außer das ich bei p2 nicht die breite verstellen kann. Und was ich nicht verstehe ist warum ich die schrift (IP:) nicht nach oben bekomme

Geschrieben von: Thomas 29.10.2009 - 8:44

"Irgendwie" geht es immer, weil die Browser relativ viel tolerieren und im Zweifelsfall auch aus dem größten Murks noch "irgendwie" eine Seite erzeugen - die sieht dann aber eben auch "irgendwie" aus.

Wenn du neue Tags erfindest (wie aktuell z.B. <tag>) glaube ich nicht, dass du damit dauerhaft glücklich wirst. Ich würde mich an deiner Stelle nochmal ein bisschen grundsätzlich über HTML und auch CSS informieren (Links poste ich jetzt keine mehr). Wenn du dich an die Standards hältst, ist in der Regel auch nachvollziehbar, was warum passiert.

Deine Frage kann ich allerdings nicht nachvollziehen.

Geschrieben von: whazza 31.10.2009 - 23:24

neija ich danke erstmal für deine Antworten aber ich habe es erstmal aufgegeben bekomme es einfach nicht hin

Geschrieben von: Thomas 01.11.2009 - 22:19

Tja, da kann ich dann auch nicht helfen ... - trotzdem gern geschehen.

Geschrieben von: whazza 24.12.2009 - 12:17

hallo ihr lieben habe mich jetzt mal wieder dran gesetzt um es hinzubekommen habe jetzt auch schon ein paar funktionen hinbekommen.
Aber irgendwie macht er mir die player nicht unter einander.
Weiß jemand zufällig wie ich die unter einander bekomme.

QUELLTEXT
<?php

         $int = $infos[activeplayers];
         for ($i=0; $i<$int; $i++) {
             $player = $players[$i];
             $player[name] = htmlspecialchars($player[name]);
             echo "<tr title='Spieler: ".$player["name"]."\nFrags: ".$player["frag"]."\nOnline: ".$player["time"]."'><td align='left'>".$player["name"]."</td><td align='right' style=color:#FFFFFF>".$player["frag"]."</td></tr>";
        
    
         }

         $server->Disconnect();
         ?>


http://nwa.dynalias.com/stest/

mfg
whazza

Und wünsche allen schöne Weihnachten

Unterstützt von Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)