[Nighthawk]

Hallo,

seit ca. 2012 nutze ich aktiv MyBB, habe aber seit 2017 eine Pause eingelegt und seitdem hauptsächlich nur das Forum immer auf die aktuelle Version geupdatet und hier und da ein paar Fehler behoben oder Dinge verändert. Seit Herbst 2023 bastel ich wieder aktiver an meinem Forum rum und versuche es nun sogar "Responsive" zu gestalten, was soweit auch schon klappt bzw. in die richtige Richtung geht, jedoch komme ich mittlerweile einfach nicht weiter und benötige daher Hilfe.

Ich hab mir zuerst einmal das folgende Forum-Theme https://community.mybb.com/mods.php?acti...d&pid=1469 installiert und komplett nach meinem Geschmack umgebaut, was auch soweit ganz gut geklappt hat und, zumindest am PC, ziemlich gut aussieht und nahezu so, wie ich es haben wollte. Durch meinen Umbau ging aber zu großen Teilen das Responsive verloren und ich weiß einfach nicht, wie ich das nun gestalte, damit es wieder funktioniert.

Konkret gesagt bekomme ich table, tr, td, thead usw. nicht ganz responsive. Ich habe schon verschiedene Codes versucht und der derzeitige funktioniert so halb, ist aber trotzdem fehlerhaft.

Hier mal die Codes:

responsive.css

Code:

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
        display: table-cell;
  }
  tr { margin: 0 0 0rem 0; }
  th, td {
    border: none;
    position: relative;
    padding-left: 1;
        padding-right: 1;
        display: table-cell;
  }
  td:before {
    position: absolute;
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
}

forumdisplay_thread

Code:

<tr class="inline_row">
    <td align="center" class="{$bgcolor}{$thread_type_class}" width="2%"><span class="thread_status {$folder}" title="{$folder_label}">&nbsp;</span></td>
    <td align="center" class="{$bgcolor}{$thread_type_class}" width="2%">{$icon}</td>
    <td class="{$bgcolor}{$thread_type_class}">
        {$attachment_count}
        <div>
          <span>{$prefix} {$gotounread} {$threadsolved} {$thread['threadprefix']}<span class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}"><a href="{$thread['threadlink']}">{$thread['subject']}</a></span>{$thread['multipage']}</span>
            <div class="author smalltext">{$lang->thread_from} {$thread['profilelink']}</div>
        </div>
    </td>
    <td align="center" class="{$bgcolor}{$thread_type_class}"><a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts}</td>
    <td align="center" class="{$bgcolor}{$thread_type_class}">{$thread['views']}</td>
    {$rating}
    <td class="{$bgcolor}{$thread_type_class}" style="white-space: nowrap; text-align: left;">
        <span class="lastpost smalltext">{$lastpostdate}<br />
        <a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
    </td>
{$modbit}
</tr>

forumbit_depth2_forum

Code:

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td class="{$bgcolor}" valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="top" align="left" style="white-space: nowrap">{$lastpost}</td>
</tr>

forumbit_depth2_forum_lastpost

Code:

<span class="smalltext">
<a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a>
<br />{$lastpost_date}<br />{$lang->by} {$lastpost_profilelink}</span>

Es geht mir hier hauptsächlich darum, das Forum in der Mobilen Ansicht richtig darzustellen, in der PC Ansicht ist alles richtig. Das Problem liegt scheinbar an den o. g. table, tr, td, thead usw. alles andere ist in der Mobilen Ansicht soweit richtig.

Bevor jetzt jemand vor Wut flucht, weil ich bestimmt 98% vom responsive Code falsch gebastelt habe: Ich kenne mich zwar mit HTML und CSS ein wenig aus, habe aber noch nie im Leben etwas responsive programmiert, immer nur in normaler PC Ansicht Größe, daher kenne ich mich mit Responsive kaum bis gar nicht aus.*

Vielleicht hat hier jemand eine Ahnung, wie ich das richtig hinbekomme...

Meiner Meinung nach dürfte das keine so riesen Sache sein, denn das Forum ist ja größtenteils responsive, nur halt eben das Problem mit table usw. bekomme ich nicht in den Griff, ich bin da zu doof für.

Vielen Dank schon mal

PC-Ansicht:
   
   

Mobile-Ansicht:
   
   

[[ExiTuS]]

Solange ein Design auf <table>-Elementen basiert kann es nicht responsiv sein, da Tabellen nicht wirklich fließen und umbrechen können. Der Inhalt jeder Spalte bestimmt die Gesamtbreite und hier liegt das Problem.
Da gibt es auch kaum Abhilfe.
Man sollte auf Tabellen verzichten, was bedeuten würde, das Design völlig neu zu gestalten.
Die Umgestaltung von Tabellen auf fließende Elemente ist eine Mammutaufgabe, weil eine strategische Struktur sowie ein neues logisches Designkonzept entwickelt werden muss.
Daher besser vorhandene alternative, responsive Designs nutzen und entsprechend anpassen, als an Tabellen festhalten.
Entschuldige diese ernüchternde Antwort.

[ETS]

[Nighthawk]

Ohje, das sind schlechte Nachrichten, aber vielen Dank für die Aufklärung.

Dann werde ich das Responsive-Design wohl nochmal neu einspielen und dann Stück für Stück (immer mit Kontrollen zwischendurch) meinen Bedürfnissen/meinem Geschmack anpassen, Zeit genug habe ich ja