Game status Tabelle erstellen? Einstellungen

[whazza]

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

[Thomas]

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?

Angehängte Datei(en)

 glaskugel.jpg ( 12.68KB ) Anzahl der Downloads: 4

 

[whazza]

Also original ist es von hier das letzte ganz unten
http://www.gametracker.com/server_info/93....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

Der Beitrag wurde von whazza bearbeitet: 27.10.2009 - 11:33

[Thomas]

Das Formatieren von Tabellen mit CSS wird in SELFHTML 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.

[whazza]

das habe ich gestern und vorgestern fast 5 stunden probiert auf der seite SELFHTML 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.

Der Beitrag wurde von whazza bearbeitet: 27.10.2009 - 12:11

[Thomas]

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.

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.

[Thomas]

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 SELFHTML).

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 Rahmen und Hintergründe für beliebige Elemente definiert (spannend auch die Seite zur Positionierung von Elementen). Wenn du das verstanden hast, tust du dich eventuell einfacher, wenn du die DIV-Tags einfach entsprechend formatierst und untereinander setzt.

[whazza]

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....205.13:27015/b/

[Thomas]

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?

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?

Und leider kann man den Quellcode Text nicht sehen von der anzeige auf der HP bei denen. http://www.gametracker.com/server_info/93....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.

[Thomas]

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?

[Google Bot]