Prosilver: Tabelle vs. Liste

[Mr Strech]

Ich bastel zwar schon einige Zeit an phpbb rum, habe aber bisher nur subsilver2-Styles verwendet. Im Rahmen meines Relaunches meiner Seite mrstrech.de wollte ich aber auch prosilver-Styles anbieten. Das diese beiden Styles nicht nur unterschiedlich aussehen, sondern auch komplett anders aufgebaut sind, ist mir die letzten Stunden klar geworden. Mit subsilver-Styles komme ich soweit klar, aber mit Prosilver komme ich nicht zurecht, auch das Nachlesen auf selfhtml.org bringt mich leider nicht weiter.

Es geht um folgendes. Ich habe fürs Portal einen neuen Block "Partnerseiten" erstellt, der im Subsilver auch richtig dargestellt wird, nur eben nicht im Prosilver. Kann mir jemand sagen, wie ich die folgende Tabelle abändern, oder mit welchem Code ich sie neu schreiben muß, das sie im Prosilver genauso aussieht, wie im Subsilver?

Code: Alles auswählen

<table width="100%" cellspacing="1">

        <tr>
                <td align="center" valign="middle"><a href="http://www.gamer-oase.de" target="_blank"><img src="./images/buttons/1_GO_88x31.png" alt="" title="Gamer Oase" /></a></td>
                <td align="center" valign="middle"><a href="http://www.getboinked.net" target="_blank"><img src="./images/buttons/gb-button.jpg" alt="" title="GetBoinkeD" /></a></td>
                <td align="center" valign="middle"><a href="http://www.newforce.de" target="_blank"><img src="./images/buttons/NewForce.jpg" alt="" title="New Force" /></a></td>
                <td align="center" valign="middle"><a href="http://www.united-forum.de" target="_blank"><img src="./images/buttons/uf_button.jpg" alt="" title="United-Forum" /></a></td>
                <td align="center" valign="middle"><a href="http://www.tu-film.de" target="_blank"><img src="./images/buttons/tu-film_button.jpg" alt="" title="der TU-Film" /></a></td>
                <td align="center" valign="middle"><a href="http://www.greensmilies.com" target="_blank"><img src="./images/buttons/greensmilies.gif" alt="" title="greensmilies.com" /></a></td>
        </tr>
        <tr>
                <td align="center" valign="middle"><a href="http://sono-gomorrha.de/" target="_blank"><img src="./images/buttons/sono_button.jpg" alt="" title="Sono&Gomorrha" /></a></td>
                <td align="center" valign="middle"><a href="http://nixi-foto.de/" target="_blank"><img src="./images/buttons/nixi_button.jpg" alt="" title="Nixblicker´s Ecke" /></a></td>
                <td align="center" valign="middle"><a href="http://www.kiaora-feuershow.de/" target="_blank"><img src="./images/buttons/kiaora_button.jpg" alt="" title="Kiaora" /></a></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>
        </tr>

</table>

Es geht eigentlich nur darum, das die Buttons dynamisch auf die gesammte Breite verteilt werden sollen. Anmelden braucht ihr euch nicht ums euch anzuschauen. Einfach den Style auf der Linken Seite auswählen.

Danke schonmal.

[Mr Strech]

Hat keiner eine Idee, oder ist meine Fragestellung zu undeutlich?

[oxpus]

Es geht eigentlich nur darum, das die Buttons dynamisch auf die gesammte Breite verteilt werden sollen. Anmelden braucht ihr euch nicht ums euch anzuschauen. Einfach den Style auf der Linken Seite auswählen.

Hallo,

ich würde ja gerne schauen, aber wo denn?

[Mr Strech]

meiner Seite mrstrech.de

http://www.mrstrech.de



Danke schonmal fürs schauen.

[oxpus]

Ah ja, jetzt sehe ich es.
Du kannst bei den Tabellen nun aber auch die Breite der Spalten vorgeben.
Da es 6 Spalten sind (lässt sich schlecht teilen, aber geht auch), könntest du die Zellendefinitionen

Code: Alles auswählen

<td align="center" valign="middle">

ändern in

Code: Alles auswählen

<td align="center" valign="middle" width="16%">

Besser wäre natürlich 5 Spalten, dass lässt sich besser rechnen (100 % / 5 = 20%)...

Und wenn du schon leere Spalten hast, wäre die letzte "volle" Spalte besser als "Rest" angegeben.
Also anstelle

Code: Alles auswählen

                <td align="center" valign="middle" colspan="4"><a href="http://www.kiaora-feuershow.de/" target="_blank"><img src="./images/buttons/kiaora_button.jpg" alt="" title="Kiaora" /></a></td>

würde ich das notieren:

Code: Alles auswählen

                <td align="center" valign="middle"><a href="http://www.kiaora-feuershow.de/" target="_blank"><img src="./images/buttons/kiaora_button.jpg" alt="" title="Kiaora" /></a></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>

Man achte auf das "colspan".
Wenn du dann weitere Spalten hinzufügst, musst du das dann natürlich wieder herausnehmen und in der letzten Spalte (verringert) neu einfügen.

[Mr Strech]

Hallo Oxpus, danke für deine Mühen. Ich habe den Code mal abgeändert, aber leider bleibt das gewünschte Ergebnis aus. Ich habe das Gefühl, das Tabellen (aus irgendeinem Grund) im prosilver nicht oder falsch interpretiert werden. Hast du villeicht noch eine Idee?

[oxpus]

Also nach deinem Quelltext schaut das so aus:

Code: Alles auswählen

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><ul class="topiclist"><li class="header"><dl class="icon"><dt>Partnerseiten</dt></dl></li></ul>
   <ul class="topiclist forums">
      <li><dl>

         <dd style="border-left: 0px">

<table class="tablebg" width="100%" cellspacing="1">

        <tr>
                <td align="center" valign="middle" width="16%"><a href="http://www.gamer-oase.de" target="_blank"><img src="./images/buttons/1_GO_88x31.png" alt="" title="Gamer Oase" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="http://www.getboinked.net" target="_blank"><img src="./images/buttons/gb-button.jpg" alt="" title="GetBoinkeD" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="http://www.newforce.de" target="_blank"><img src="./images/buttons/NewForce.jpg" alt="" title="New Force" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="http://www.united-forum.de" target="_blank"><img src="./images/buttons/uf_button.jpg" alt="" title="United-Forum" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="http://www.tu-film.de" target="_blank"><img src="./images/buttons/tu-film_button.jpg" alt="" title="der TU-Film" /></a></td>

                <td align="center" valign="middle" width="16%"><a href="http://www.greensmilies.com" target="_blank"><img src="./images/buttons/greensmilies.gif" alt="" title="greensmilies.com" /></a></td>
        </tr>
        <tr>
                <td align="center" valign="middle" width="16%"><a href="http://sono-gomorrha.de/" target="_blank"><img src="./images/buttons/sono_button.jpg" alt="" title="Sono&Gomorrha" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="http://nixi-foto.de/" target="_blank"><img src="./images/buttons/nixi_button.jpg" alt="" title="Nixblicker&acute;s Ecke" /></a></td>
                <td align="center" valign="middle" width="16%" colspan="4"><a href="http://www.kiaora-feuershow.de/" target="_blank"><img src="./images/buttons/kiaora_button.jpg" alt="" title="Kiaora" /></a></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>

        </tr>

</table>


   </dd>
      </dl></li>
   </ul>
<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" /><!--version $Id: whois_online.html 521 2009-08-26 20:59:19Z christian_n $ //-->

Du musst dann einfach die "Liste" <li> rausnehmen, damit die Tabelle auch komplett breit sein kann.
So würde das Ergebnis dann korrigiert aussehen:

Code: Alles auswählen

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><ul class="topiclist"><li class="header"><dl class="icon"><dt>Partnerseiten</dt></dl></li></ul>
   <ul class="topiclist forums">

<table class="table2" width="100%" cellspacing="1">
<tbody>
<tr>
	<td align="center" valign="middle" width="20%"><a href="http://www.gamer-oase.de" target="_blank"><img src="http://mrstrech.com/images/buttons/1_GO_88x31.png" alt="" title="Gamer Oase" /></a></td>
	<td align="center" valign="middle" width="20%"><a href="http://www.getboinked.net" target="_blank"><img src="http://mrstrech.com/images/buttons/gb-button.jpg" alt="" title="GetBoinkeD" /></a></td>
	<td align="center" valign="middle" width="20%"><a href="http://www.newforce.de" target="_blank"><img src="http://mrstrech.com/images/buttons/NewForce.jpg" alt="" title="New Force" /></a></td>
	<td align="center" valign="middle" width="20%"><a href="http://www.united-forum.de" target="_blank"><img src="http://mrstrech.com/images/buttons/uf_button.jpg" alt="" title="United-Forum" /></a></td>
	<td align="center" valign="middle" width="20%"><a href="http://www.tu-film.de" target="_blank"><img src="http://mrstrech.com/images/buttons/tu-film_button.jpg" alt="" title="der TU-Film" /></a></td>
</tr>
<tr>
	<td align="center" valign="middle" width="20%"><a href="http://www.greensmilies.com" target="_blank"><img src="http://mrstrech.com/images/buttons/greensmilies.gif" alt="" title="greensmilies.com" /></a></td>
	<td align="center" valign="middle" width="20%"><a href="http://sono-gomorrha.de/" target="_blank"><img src="http://mrstrech.com/images/buttons/sono_button.jpg" alt="" title="Sono&Gomorrha" /></a></td>
	<td align="center" valign="middle" width="20%"><a href="http://nixi-foto.de/" target="_blank"><img src="http://mrstrech.com/images/buttons/nixi_button.jpg" alt="" title="Nixblicker&acute;s Ecke" /></a></td>
	<td align="center" valign="middle" width="40%" colspan="2"><a href="http://www.kiaora-feuershow.de/" target="_blank"><img src="http://mrstrech.com/images/buttons/kiaora_button.jpg" alt="" title="Kiaora" /></a></td>
</tr>
</tbody>
</table>


   </ul>
<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" /><!--version $Id: whois_online.html 521 2009-08-26 20:59:19Z christian_n $ //-->

Also rein auf den Quelltext bezogen.

[Mr Strech]

Auf den Gedanken, mal den Quelltext zu posten, hätte ich ja auch selber kommen können. Sry.

... aber ... es funktioniert.

1000 Dank.

Für den Fall, das jemand sowas auch brauchen kann:

Code: Alles auswählen

{$C_BLOCK_H_L}<dt>Partnerseiten</dt>{$C_BLOCK_H_R}
<ul class="topiclist forums">

<table width="100%" cellspacing="1">

        <tr>
                <td align="center" valign="middle" width="16%"><a href="_xxx_">target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
        </tr>
        <tr>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle" width="16%"><a href="_xxx_" target="_blank"><img src="./images/buttons/_xxx_" alt="" title="_xxx_" /></a></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>
                <td align="center" valign="middle"></td>
        </tr>

</table>

</ul>
{$C_BLOCK_F_L}{$C_BLOCK_F_R}