Manuel30: Folgendes Layout ohne Tabellen möglich?

ich brauche folgendes Layout:

es gibt 3 Spalten, die äusseren Spalten haben eine flexible Grösse (passen sich an die Grösse des Brownserfensters an) und die mittlere Spalte soll zentriert sein und eine feste Pixelgrösse haben.

Mit einer Tabelle ist es einfach, aber geht es ach mit <div> elementen und css?

Danke für Eure Tips,
Manuel

  1. Mit einer Tabelle ist es einfach, aber geht es ach mit <div> elementen und css?

    Ja, auch mit <div />-Elementen und CSS ist das kein Problem, allerdings werden dir einige ältere Browser einen Strich durch die Rechnung machen.

    Es liegt aber die Vermutung nahe, dass es sich bei äußeren, flexiblen Spalten um "Designelemente" handelt und nicht um Inhaltsspalten. In diesem Falle wäre es Grundsätzlich anzuraten, die Struktur zu überdenken und keine "Spalten" zu bauen sondern nur zu tun als ob - z.B. mit 2 verschiedenen, Hintergrundbildern in <body /> und <html /> (1x links und 1x rechtsbündig)

    1. »» Mit einer Tabelle ist es einfach, aber geht es ach mit <div> elementen und css?

      Ja, auch mit <div />-Elementen und CSS ist das kein Problem, allerdings werden dir einige ältere Browser einen Strich durch die Rechnung machen.

      Es liegt aber die Vermutung nahe, dass es sich bei äußeren, flexiblen Spalten um "Designelemente" handelt und nicht um Inhaltsspalten. In diesem Falle wäre es Grundsätzlich anzuraten, die Struktur zu überdenken und keine "Spalten" zu bauen sondern nur zu tun als ob - z.B. mit 2 verschiedenen, Hintergrundbildern in <body /> und <html /> (1x links und 1x rechtsbündig)

      Danke für den Tip mit den zwei Hintergrundbildern.. Leider bringt es mich in diesem Fall nicht weiter.

      Ich brauche dieses Layout mit den drei Spalten, so wie in meinem ersten Posting beschrieben: die ÄÜSSEREN beiden Spalten sollen sich an die Breite des Browserfensters anpassen und die mittlere Spalte soll eine feste pixelgrösse haben z.B. 500px.

      Das ganze hat folgenden Grund: Das Layout besteht aus drei Bildern, die nahtlos in einander übergehen sollen. So als wäre es ein grosses Bild, das mittig im Browserfenster angezeigt wird. Wenn das Fenster schmaler als z.B. 500px wird, soll der vertikale scrollbar erscheinen. Mit einer Tabelle ist das sehr einfach zu realisieren. Ich wollte es jetzt gerne mal mit <div />- Elementen machen, allerdings hat das keinen Zweck, wenn es dann mit älteren Browsern nicht richtig angezeigt wird.

      1. Lieber Manuel30,

        die ÄÜSSEREN beiden Spalten sollen sich an die Breite des Browserfensters anpassen und die mittlere Spalte soll eine feste pixelgrösse haben z.B. 500px.

        was hindert Dich denn daran, ein ziemlich breites Hintergrundbild (sagen wir 2000px in der Breite sollten hinlänglich reichen) zu entwerfen, in dessen Mitte ein 500px breiter Abschnitt ist, der für Deinen Content steht. Und mit CSS lässt Du das Hintergrundbild mittig ausrichten, sodass je nach verfügbarer Anzeigebreite diese rechten und linken "Flügel" des Bildes mehr oder weniger sichtbar sind.

        Oder ist Dir mein Vorschlag noch immer nicht klar?

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Hallo Felix,

          Danke für Deinen Vorschlag. Ich habe Eure Vorschläge alle verstanden. Warscheinlich habe ich mich in einigen Punkten nicht klar ausgedrückt. Es soll EINE sehr grosse Grafik angezeigt werden. Diese Grafik wird vertikal in drei Teile geschnitten, die wieder pixelgenau aneinandergefügt werden müssen. Die rechte und die linke Seite der Grafik soll jenach Fenstergrösse abgeschnitten werden. habe es mit einer Tabelle einfach hinbekommen. aber es muss doch auch mit div elementen gehen.

          LG,

          Manuel

          Lieber Manuel30,

          »» die ÄÜSSEREN beiden Spalten sollen sich an die Breite des Browserfensters anpassen und die mittlere Spalte soll eine feste pixelgrösse haben z.B. 500px.

          was hindert Dich denn daran, ein ziemlich breites Hintergrundbild (sagen wir 2000px in der Breite sollten hinlänglich reichen) zu entwerfen, in dessen Mitte ein 500px breiter Abschnitt ist, der für Deinen Content steht. Und mit CSS lässt Du das Hintergrundbild mittig ausrichten, sodass je nach verfügbarer Anzeigebreite diese rechten und linken "Flügel" des Bildes mehr oder weniger sichtbar sind.

          Oder ist Dir mein Vorschlag noch immer nicht klar?

          Liebe Grüße,

          Felix Riesterer.

          1. Lieber manuel30,

            bitte höre endlich mit dem sinnfreien TOFU auf! Das ist super nervig!

            Ich habe Eure Vorschläge alle verstanden.

            Sicher? Mal sehen...

            Diese Grafik wird vertikal in drei Teile geschnitten, die wieder pixelgenau aneinandergefügt werden müssen.

            Hier zeigt sich, dass Du meine vorherige Antwort eben nicht verstanden hast. Wozu muss hier etwas zerschitten werden? Es geht auch in einem Stück!

            Die rechte und die linke Seite der Grafik soll jenach Fenstergrösse abgeschnitten werden.

            Schon klar, siehe mein Vorschlag!

            habe es mit einer Tabelle einfach hinbekommen. aber es muss doch auch mit div elementen gehen.

            Ich glaube, ich geb's bald auf...

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
          2. Moin!

            Danke für Deinen Vorschlag. Ich habe Eure Vorschläge alle verstanden. Warscheinlich habe ich mich in einigen Punkten nicht klar ausgedrückt. Es soll EINE sehr grosse Grafik angezeigt werden. Diese Grafik wird vertikal in drei Teile geschnitten, die wieder pixelgenau aneinandergefügt werden müssen. Die rechte und die linke Seite der Grafik soll jenach Fenstergrösse abgeschnitten werden. habe es mit einer Tabelle einfach hinbekommen. aber es muss doch auch mit div elementen gehen.

            *g* Okay. Fangen wir mal von vorn an:

            Du möchtest ein großes Bild in dessen Mitte sich der Content befindet.

            Warum willst Du das Bild bitte zerschneiden?! Felix hat doch schon gesagt, du sollst das Bild einfach als Hintergrund nehmen und zentrieren. http://de.selfhtml.org/navigation/css.htm#hintergrund

            Deinen Content, mit 500 px Breite, packst Du dann ebenfalls in die Mitte.

            Du hast dann erstmal also genau 1 Element in deinem body. Und zwar das zentrierte mit dem Inhalt. Das kann durchaus einfach ein <p> sein. Da es aber eventuell mehrere Elmente enthält und nur ein Scrollbalken sichtbar sein soll, nimm halt ein Containerlement. Div bietet sich hier an.

            Was genau funktioniert an dieser Lösung bei Dieinem Problem nicht?

            --
            "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                  - T. Pratchett
  2. Hi!

    es gibt 3 Spalten, die äusseren Spalten haben eine flexible Grösse (passen sich an die Grösse des Brownserfensters an) und die mittlere Spalte soll zentriert sein und eine feste Pixelgrösse haben.

    Mit einer Tabelle ist es einfach, aber geht es ach mit <div> elementen und css?

    So, wie Du es beschreibst: Ja.

    Deine Angaben sind aber recht vage, deshalb rate ich hier jetzt auch keine Lösung.

    --
    "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
          - T. Pratchett
  3. Lieber Manuel30,

    was verstehst Du an <http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm@title=diesem Beispiel> nicht?

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Moin,

      was verstehst Du an <http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm@title=diesem Beispiel> nicht?

      Wohl, wie man die äußeren Spalten auf Fensterhöhe bringt. ;)

      --
      "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
            - T. Pratchett
      1. Lieber Steel,

        | was verstehst Du an <http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm@title=diesem Beispiel> nicht?

        Wohl, wie man die äußeren Spalten auf Fensterhöhe bringt. ;)

        na, mit einem entsprechenden Hintergrundbild!

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Hoi Felix,

          »» | was verstehst Du an <http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm@title=diesem Beispiel> nicht?
          »»
          »» Wohl, wie man die äußeren Spalten auf Fensterhöhe bringt. ;)

          na, mit einem entsprechenden Hintergrundbild!

          Steht das da irgendwo? *kopfkratz*

          Ich will gleich in den anderen Zoo[1], deshalb schau ich nicht nach.

          Aber ich denke, daß der liebe Threadersteller genau daran gescheitert ist.

          [1]
          Den mit den Giraffen und Löwen

          --
          "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                - T. Pratchett