Mehrere Tabellen umspannender Außenrahmen

  • Hallo,
    meine jetzt fast fertige Website ist auf allen Seiten so aufgebaut, dass pro Seite die Inhalte (einfacher Text, vereinzelt Bilder) in Tabellen gepackt sind und zwar meist in mehrere (aus Gründen der Ladezeit, Einfachheit und weil Hauptüberschrift pro Seite mit dazugehörigem Anker außerhalb von Tabellen sein soll).

    Jede Seite hat also so zwischen 3 und 6 untereinander stehende Tabellen. Zwischen den Tabellen sind Anker, nach oben-Links und vereinzelt Überschriften. Die Tabellen haben eine feste Tabellenbreite, so dass der Inhalt bei kleiner Auflösung den Bildschirm ausfüllt und bei mittlerer Auflösung ein angemessener Freiraum links und rechts zu sehen ist.

    Jetzt würde ich gerne auf jeder Seite dem gesamten Inhalt (alle Tabellen) einen einheitlichen Außenrahmen geben, damit bei mittlerer und höherer Auflösung die Texte nicht so im Raum "schweben". Das Problem sind nun aber die Tabellen, genauer gesagt, die Tatsache, dass meist MEHRERE pro Seite vorhanden sind und Überschriften/Anker außerhalb davon sind.
    Die Tabellenrahmen sichtbar zu machen entfällt also, da es mehrere Tabellen mit Inhalten dazwischen sind, es würden seitliche Lücken entstehen.

    Mit den border-styles zur Definierung eines Außenrahmens für den gesamten Body geht es zwar grundsätzlich, allerdings orientiert sich dieser Rahmen seitlich natürlich nicht an der verwendeten Tabellenbreite, geht also an den Seiten ganz an den Rand des Monitors, sogar der Scrollbalken ist noch miteingeschlossen.
    Gibt es eine Möglichkeit, den Seiten eines solchen CSS-Rahmens eine bestimmte Breite, z.B. die 760 der Tabellen, zu geben, so dass er genau da verläuft, wo die unsichtbaren Tabellenränder sind ?

    Ich bräuchte also einen großen Außenrahmen, der unabhängig von den Tabellen ist, aber mit deren Breite erstellt werden kann. Geht sowas mit CSS ? Mit border-width jedenfalls nicht, das ist für die Rahmnenstärke gedacht.

    Danke,

    Martin

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Wenn ich mir das so aus deinen Worten richtig vorstellen kann, was garnicht so einfach ist (ein wink mit dem Zaunpfahl, dass ein Link gewünscht ist), dann würde ich einfach um all deine Tabellen die du mit dem Rahmen "verbinden" möchtest noch eine Tabelle machen und bei der dann border auf 1 setzten. Dann müsste das doch klappen, oder?

    Viele Grüße

    Mir nicht

  • Wenn ich alle Tabellen in ein div einschließe und für dieses div einen Rahmen mache, dann hat das den gleichen Effekt, wie wenn ich den Rahmen im body-Tag mache: Der Rahmen nimmt seitlich den ganzen Monitor ein, hat also nicht die gewünschte Breite (die der Tabellen, 760).

    Haut leider nicht hin.

    Martin

    Zitat von dr.zoidberg

    mach folgendes, falls du das meinst:


    <div style="border:1px solid black;">
    <deine tabelle>


    </div>

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Die Website ist noch nicht online, aber eigentlich ganz einfach aufgebaut: Jede Seite hat mehrere einfache Tabellen (wenigen Zeilen und Spalten pro Tabelle) untereinander. Zwischen den Tabellen einige Anker, interne Links, Überschriften.

    Du meinst, vor der ersten Tabelle eine große einzellige Tabelle beginnen mit <table> <tr> <td>
    dann die vorhandenen Tabellen mit Inhalt...
    und nach der letzten Zeile der letzten Tabelle die große einzellige Tabelle wieder schließen mit
    </td></tr></table>

    Dann der großen Tabelle noch die gleiche feste Breite mitgeben wie bei den anderen Tabellen mit width="760" und schließlich mit border-styles den Rahmen für sie definieren (Farbe, Stärke usw.).

    Könnte das so funktionieren ?

    Martin


    Zitat von Mir nicht

    Wenn ich mir das so aus deinen Worten richtig vorstellen kann, was garnicht so einfach ist (ein wink mit dem Zaunpfahl, dass ein Link gewünscht ist), dann würde ich einfach um all deine Tabellen die du mit dem Rahmen "verbinden" möchtest noch eine Tabelle machen und bei der dann border auf 1 setzten. Dann müsste das doch klappen, oder?

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Zitat von Martin11

    Der Rahmen nimmt seitlich den ganzen Monitor ein, hat also nicht die gewünschte Breite (die der Tabellen, 760).

    Dann mach doch um die Tabellen eine "Über-"Tabelle rum und geb der den Rahmen. Abgesehen davon geht es auch mit einem Div- oder Span-Tag, wenn es richtig geschrieben ist.

    G.a.d.M.

    Ronald

  • Wäre das mit div kompliziert ? Einem div kann man doch z.B. keine Breite geben, oder ?

    Martin


    Zitat von Ronald

    Dann mach doch um die Tabellen eine "Über-"Tabelle rum und geb der den Rahmen. Abgesehen davon geht es auch mit einem Div- oder Span-Tag, wenn es richtig geschrieben ist.

    G.a.d.M.

    Ronald

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Voila!

    G.a.d.M.

    Ronald

  • Danke für das konkrete Beispiel !
    Aber müsste der Rahmen selbst (style="border...) nicht im div stehen ? Bei dem Beispiel greifst du auf den Tabellenrahmen zurück. Da ich mehrere habe, mit Inhalt dazwischen, hätte ich dann wieder das seitliche Lückenproblem, der Rahmen ginge nicht durch.

    Ist deine Beispielstabelle die erste von den mehreren, die ich auf jeder Seite habe oder die alles umfassende große Tabelle ?

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Das Beispiel sollte ausschließlich zeigen, daß man
    1. ein Div-Tag in der Größe begrenzen und
    2. damit eine Tabelle umschließen kann.

    Da ich deine HP nicht kenne kann ich dir natürlich auch nichts konkretes zu deinem HMTL sagen.

    G.a.d.M.

    Ronald

  • Habe beides probiert und beides klappt grundsätzlich.

    In beiden Fällen -also bei alles umspannendem div und Tabelle- verschiebt sich allerdings alles nach links. Weder die Zentrierung des div bzw. der Tabelle durch align noch durch text-align (CSS) im jeweiligen Anfangs-Tag bringt eine Zentrierung !?

    Kann es sein, dasss in beiden Fällen nur die Inhalte zentriert werden, aber nicht das div bzw. die Tabelle selbst ?

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Ja, das ist so.
    Du könnntest das althergebrachte "<center>" vorschalten, das ist aber als deprecated eingestuft und sollte deshalb möglichst nicht mehr verwendet werden.

    Leider fehlt noch ein echter Ersatz für diese einfache Funktion, denn mit CSS wird es immer anders interprätiert und funktioniert vielfach gar nicht.

    Meine Meinung:
    Solange die Browser verstehen, was ich ihnen durch den Quelltext sage, solange verwende ich auch die HTML-Elemente, die "deprecated" sind, wenn es für sie keinen sinnvollen Ersatz gibt.

    Was du jetzt machst ist dein Problem ;)

    Hier aber trotzdem eine Lösung:
    Du benötigst ein weiteres umschließendes Div mit dem Style "text-align:center". Damit klappt es dann im IE, nicht aber im Firefox. Für den Firefox mußt du das nachfolgende Div erweitern mit "margin:auto", dann klappt es auch dort:


    G.a.d.M.

    Ronald

  • Ich habe es auf einer der Seiten mal ausprobiert und jetzt bleibt das Ganze zentriert.
    Allerdings lässt sich das allererste Element in diesem Rahmen (noch außerhalb der ersten von mehreren Tabellen) nun nicht mehr links positionieren. Es ist ein Textlink "zur Startseite", der ganz oben links sein soll. Dass der jetzt zunächst auch zentriert wird, ist klar, aber wenn ich speziell für diesen internen Link mit align oder textalign "left" sage, dann müsste der doch nach links gehen ? Weigert sich aber beharrlich und unverfroren. Sieht ganz normal aus:
    zur Startseite


    Bist du sicher, dass align auch für div deprecated ist ? Ich hatte bei meiner 1. Homepage vor ca. 1,5 Jahren einen Kommentar im Quellcode geschrieben, dass align für Tabellen, aber nicht für div veraltet ist. Und irgendwo dann wohl auch für ein div verwendet (der Validator hat nichts beanstandet).

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Hast du -oder evtl. jemand anders- eine Idee, warum der Link sich nicht links positionieren lässt ?

    Das Ganze sieht jetzt so aus :

    <div style="text-align:center;">

    <div style="margin:auto; border:1px solid black; width:760px; padding:8px;">

    zur Startseite
    <h1>...</h1>


    <div align="center">
    <table .........
    </table>
    </div>

    <div align="center">
    <table .........
    </table>
    </div>

    </div>
    </div>

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis

  • Mach es so:

    Code
    <div style="text-align:center;">
    
    
     <div style="margin:auto;text-align:left; border:1px solid black; width:760px; padding:8px;">
    
    
    [url='http://www.....de']zur Startseite[/url]
    <h1>...</h1>
    ...


    Du mußt das Center wieder aufheben, wenn du es nicht benötigst.

    G.a.d.M.

    Ronaldd

  • Ah, ich verstehe, ich hatte das center im Link selbst aufzuheben versucht. Aber man muss eine ggf. gewünschte Positionierungsänderung im Element DARÜBER machen.

    Merci !

    Grüße,

    Martin
    EDV = Ewig dauerndes Verhängnis