Nicola Straub: Boxen nahtlos aneinander im IE

Hallo!

Mal wieder der Frust: Alles von Hand ganz sorgfaeltig aufgebaut,
im Firefox und Konqueror ganz prima - und dann der IE-Schock.

Dabei scheint es diemal gar keine so Frage von Chinesisch zu
Deutsch zu sein, sondern eher von Friesisch zu Bayerisch - aber
ich kriege es dennoch nicht hingepuzzelt und hoffe auf Eure
Erfahrung.

http://physalia.de/tmp/TEST.html ist das, was ich mir
aufgebaut habe. Im Grunde vier Boxen (3spaltiges Portaldesign):

--------------------------------------------------------------
|       |                                                    |
| links |  top                                               |
|       |-----------------------------------------------------
|       |                                           |        |
|       |  content                                  | rechts |
|       |                                           |        |
|       |                                           |        |
|       |                                           |        |
--------------------------------------------------------------

Dabei moechte ich die Box oben mit der linken Box zusammenpappen.

Da ich oben ein Bild einsetzen moechte/muss, brauche ich auf
Flexibilitaet gar nicht zu achten (oder kann man es etwa trotz
Bannerbild noch skalierbar machen?) und habe _dieses Problem_
schon mal nicht.

Der IE packt die Top-Box nach unten und holt sie nur hoch, wenn
man ihr deutlich mehr Platz zugesteht. ABER: Er setzt die Boxen
auch dann nicht nahtlos. Das naheste, was ich den Boxen zugedeihen
lassen konnte, ist dies hier:http://physalia.de/tmp/TESTie.html

Abgesehen davon, dass es in Firefox, Mozilla und Konqui bescheiden
aussieht, stossen die Boxen auch im IE noch immer nicht zusammen.
Und ich bilde mir ein, mit allen Breiten, Margins, Paddings etc.
variiert zu haben ;-(

Wer verraet mir, was ich machen muss, um die Boxen zusammen zu
kleben. Und grundsaetzlich: Komme ich fuer dieses Layout nicht
ohne unterschiedliche Stylesheets fuer die Browserfamilien aus?

Es ist schon nervig. Als wuerde ich gar nicht dazu lernen,
das kann doch nicht sein!
Wieviele Layouts muss man gemacht haben, um mal einen prizipiell
vernuenftigen Start allein hinzukriegen?

*frustriert*

Nicola

  1. Hi,

    Dabei scheint es diemal gar keine so Frage von Chinesisch zu
    Deutsch zu sein, sondern eher von Friesisch zu Bayerisch

    interessanter Vergleich :-)

    Der IE packt die Top-Box nach unten und holt sie nur hoch, wenn
    man ihr deutlich mehr Platz zugesteht. ABER: Er setzt die Boxen
    auch dann nicht nahtlos.

    Der IE hat sehr, sehr viele Bugs. Diejenigen, die hier vermutlich eine Rolle spielen, sind der Three Pixel Text Jog und der Doubled Float Margin Bug. Suche nach diesen Begriffen.

    Komme ich fuer dieses Layout nicht
    ohne unterschiedliche Stylesheets fuer die Browserfamilien aus?

    Doch - allerdings kaum ohne CSS-Hacks.

    Wieviele Layouts muss man gemacht haben, um mal einen prizipiell
    vernuenftigen Start allein hinzukriegen?

    42 ;-)

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. ReHi,

      interessanter Vergleich :-)

      ;-))

      Der IE hat sehr, sehr viele Bugs. Diejenigen, die hier vermutlich eine Rolle spielen, sind der Three Pixel Text Jog und der Doubled Float Margin Bug. Suche nach diesen Begriffen.

      Oh Mist. Das klingt nach SEHR viel Arbeit ;-(
      Waer es dann evtl prinzipiell sinnvoller, die Top-Box durchgehend
      anzulegen und darin die Bilder zu positionieren. Laufe ich in
      weniger IE-Bugs, wenn das Layout so aufgebaut ist oder ist es
      eh egal?

      -----------------------------------------------------------
      |                                                         |
      |                                                         |
      -----------------------------------------------------------
      |            |                               |            |
      |            |                               |            |
      |            |                               |            |
      |            |                               |            |
      |            |                               |            |
      |            |                               |            |
      |            |                               |            |
      |            |                               |            |
      -----------------------------------------------------------

      *fragt hoffnungvoll*

      Nicola

      1. Hi,

        Der IE hat sehr, sehr viele Bugs. Diejenigen, die hier vermutlich eine Rolle spielen, sind der Three Pixel Text Jog und der Doubled Float Margin Bug. Suche nach diesen Begriffen.
        Oh Mist. Das klingt nach SEHR viel Arbeit ;-(

        ja - es _klingt_ nach sehr viel Arbeit ;-) Wichtig ist vor allem zu wissen, wie der Bug heißt; die Hacks dazu sind meist sehr leicht anzuwenden. Während der Recherche wirst Du sicher noch einige Bugs mehr sehen, es lohnt, sie sich einzuprägen.

        Waer es dann evtl prinzipiell sinnvoller, die Top-Box durchgehend
        anzulegen und darin die Bilder zu positionieren.

        Wer mit Floating noch nicht zurecht kommt (darin schließe ich das Umgehen von und mit Browserbugs ein), sollte von absoluter Positionierung die Finger lassen. Beides ist nicht ohne, letzteres hat aber die "schärferen" Auswirkungen.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Re!

          ja - es _klingt_ nach sehr viel Arbeit ;-) Wichtig ist vor allem zu wissen, wie der Bug heißt; die Hacks dazu sind meist sehr leicht

          Stimmt, das war einfach und das Prinzip hatte ich auch schon
          mal gesehen. Ich bin mit dem 3px-Hack schon sehr erfolgreich
          gewesen, lokal in den IE geladen ist es jetzt ganz super!
          Vom Server aus geladen bleibt aber immer noch ein Pixel (sieht
          mir jedenfalls nach deutlich weniger als 3 aus!). Kennst du dazu
          zufaellig auch noch einen 'VIB' (Very Important Bug) (oder auch
          nur einen WKEFNB (well known except from Nicola-Bug)? ;-)
          <http/physalia.de/tmp/TEST.html>

          Waer es dann evtl prinzipiell sinnvoller, die Top-Box durchgehend
          anzulegen und darin die Bilder zu positionieren.

          Wer mit Floating noch nicht zurecht kommt (darin schließe ich das Umgehen von und mit Browserbugs ein), sollte von absoluter Positionierung die Finger lassen. Beides ist nicht ohne, letzteres hat aber die "schärferen" Auswirkungen.

          Ich hab jetzt nicht ganz verstanden, was du mit ersterem und letzterem meinst. Ersteres mein Layout, zweiteres durchgehendes
          Top mit positionierten Bildern? Oder ersteres = Floating und
          zweiteres = absolutes Positionieren?

          Aber es hilft ja nix, ich muss ja das Ding hinbekommen. Und ich will
          es eben nicht (mehr) mit Tabellen machen - was ja einfach waere,
          aber eben nix, was ich will. Ich will es 'richtig' machen...

          Herzlichen Dank jedenfalls!

          Nicola

          1. zufaellig auch noch einen 'VIB' (Very Important Bug) (oder auch
            nur einen WKEFNB (well known except from Nicola-Bug)? ;-)
            <http/physalia.de/tmp/TEST.html>

            Ich vergass: Es scheint mir nicht der Margin-Bug zu sein, denn
            eine Reduzierung der left-margin von #top hat nix gebracht (tatsaechlich ist margin-left fuer #top fuer den IE in dem
            Hack ja sogar mit 0 drin!)... Oder bin ich blind?

            Gruss

            Nicola

          2. Hi,

            Ich bin mit dem 3px-Hack schon sehr erfolgreich
            gewesen, lokal in den IE geladen ist es jetzt ganz super!
            Vom Server aus geladen bleibt aber immer noch ein Pixel

            wenn es lokal funktioniert, ist das CSS-Problem definitiv gelöst. Es muss jetzt um etwas anderes gehen, z.B. den Browser-Cache, einen Proxy oder die Serverkonfiguration.

            Kennst du dazu zufaellig auch noch einen 'VIB' (Very Important Bug)

            Hihi :-) Also, ich kann Dir jedenfalls sagen, dass Du Dir die Seiten auch mal mit dem IE 5 ansehen solltest. Da ist noch einiges an (Hack-)Arbeit nötig.

            Wer mit Floating noch nicht zurecht kommt (darin schließe ich das Umgehen von und mit Browserbugs ein), sollte von absoluter Positionierung die Finger lassen. Beides ist nicht ohne, letzteres hat aber die "schärferen" Auswirkungen.
            Ich hab jetzt nicht ganz verstanden, was du mit ersterem und letzterem meinst.

            Floating und absolute Positionierung.

            Ich will es 'richtig' machen...

            Mit diesem Vorhaben wirst Du hier hinreichende Unterstützung bekommen, das kann ich Dir versprechen.

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. Huhu!

              Kind schlaeft - weiter geht's also...

              wenn es lokal funktioniert, ist das CSS-Problem definitiv gelöst. Es muss jetzt um etwas anderes gehen, z.B. den Browser-Cache, einen Proxy oder die Serverkonfiguration.

              Siehst du die Haarlinie denn auch?

              Ich hab Windoof nur unten auf dem Notebook und das kenne ich nicht
              besonders gut (wer bootet schon freiwillig Windows ;-) Ich tippe
              nicht auf den Cache, denn die 3px-Linie ist immerhin auf den duennen
              Strich zusammengeschrumpft.
              Serverkonfiguration? Hmm, mir faellt wirklich nix ein, was man dem
              Server einreden koennte, damit er zwischen Boxen Haarlinien
              zeichnet *gruebel*. Ich lad's mal wo anders hin und guck es dann
              noch mal an.

              Hihi :-) Also, ich kann Dir jedenfalls sagen, dass Du Dir die Seiten auch mal mit dem IE 5 ansehen solltest. Da ist noch einiges an (Hack-)Arbeit nötig.

              Ja, der rechnet ja umgekehrt - DAS Spiel hatte ich schon mal ;-(

              Floating und absolute Positionierung.

              Also du raetst mir von einer anderen Konstruktion ab. Richtig verstanden?

              Ich will es 'richtig' machen...

              Mit diesem Vorhaben wirst Du hier hinreichende Unterstützung bekommen, das kann ich Dir versprechen.

              Ihr habt mich bisher immer toll unterstuetzt. Umso aergerlicher
              finde ich es ja, dass ich schon wieder nicht allein auskomme ;-(
              Besonders, weil es diesmal das erste Mal nicht Hobby ist, sondern
              'gilt' - also mit Zeitlimit etc. pp. *nervoes*

              Herzliche Gruesse

              Nicola

              1. Hi,

                Siehst du die Haarlinie denn auch?

                ja. Ich könnte mir denken, dass es daran liegt, dass Du den margin-left von 195px auf -3px reduziert hast.

                Serverkonfiguration?

                War nur 'n Beispiel, nicht mein Tipp :-)

                Floating und absolute Positionierung.
                Also du raetst mir von einer anderen Konstruktion ab. Richtig verstanden?

                Ja.

                Ihr habt mich bisher immer toll unterstuetzt. Umso aergerlicher
                finde ich es ja, dass ich schon wieder nicht allein auskomme ;-(

                Warum? Je mehr Du fragst, umso mehr kannst Du lernen. Jetzt beispielsweise hast Du einige der wichtigeren IE-Bugs mit Namen kennengelernt, und vermutlich hast Du auch gefunden, wo diese und andere Bugs recht gut beschrieben stehen. Mach Dir also bitte keinen Kopf - Du versuchst, ein Problem selbst zu lösen, und wenn Du nicht weiter kommst, fragst Du hier nach. Etwas Besseres kann Dir und dem Forum nicht passieren! :-)

                Cheatah

                --
                X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                X-Will-Answer-Email: No
                X-Please-Search-Archive-First: Absolutely Yes
      2. Tachchen!


        |                                                         |


        Ganz anders, aber weil's letzte Tage erst als Modell angeboten wurde:

        http://www.sbox.tugraz.at/home/h/hacki/html-und-css/samples/position-design/

        Gruß

        Die schwarze Piste

        --
        ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
        http://www.smartbytes.de
        1. hi,

          Ganz anders, aber weil's letzte Tage erst als Modell angeboten wurde:

          http://www.sbox.tugraz.at/home/h/hacki/html-und-css/samples/position-design/

          also eigentlich http://www.glish.com/css/7.asp, oder ...?

          gruß,
          wahsaga

          --
          "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
          1. Tachchen!

            also eigentlich http://www.glish.com/css/7.asp, oder ...?

            Nicht unähnlich, aber mit Unterschieden wenn du das Fenster stark verkleinerst.

            Gruß

            Die schwarze Piste

            --
            ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
            http://www.smartbytes.de
  2. Hallo Nicola,

    ist alles, was auf der Seite zu sehen ist inhalttragend, also für den Inhalt
    der Seite wichtig?
    Wenn images/top2.jpg eher als Layoutelement oder Dekografik zu betrachten ist,
    könnte diese auch als Background eingebunden werden, wodurch du dann auch
    nicht unbedingt an die Breite gebunden wärst.

    (Ich finde es nicht so toll, einen horizontalen Scrollbalken zu bekommen, wenn
    mein Browserfenster auch nur ein paar Pixel kleiner als die Bildschirmbreite ist.)

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. Hallo Detlef!

      ist alles, was auf der Seite zu sehen ist inhalttragend, also für den Inhalt
      der Seite wichtig?

      Nein, der Wald oben traegt nur die Anmutung der Seite ;-)

      Wenn images/top2.jpg eher als Layoutelement oder Dekografik zu betrachten ist,
      könnte diese auch als Background eingebunden werden, wodurch du dann auch
      nicht unbedingt an die Breite gebunden wärst.

      Ja, das war auch eine Idee von mir. Aber ich komme IMHO aus der
      Breiten-Problematik nicht raus. Ich habe ja ein float im Content-DIV
      und float gibt's ja nicht ohne width-Angabe (laut Selfhtml).
      Ich hab mal max-width ausprobiert, aber das versteht ja keiner
      (jedenfalls offenbar nicht mal Firefox her oder Konqui, beim IE weiss
      ich es eh ;-(

      Oder wie ist deine Idee?

      (Ich finde es nicht so toll, einen horizontalen Scrollbalken zu bekommen, wenn
      mein Browserfenster auch nur ein paar Pixel kleiner als die Bildschirmbreite ist.)

      Me too. Ich bin GAR nicht gluecklich, ein starres 1024-Design zu machen.

      Aber ich brauche ein Anmutung-tragendes grosses, dominierendes Bild.
      Und ich sehe als moeglichen Platz dafuer eben nur oben quer (weil ich
      die rechte Spalte spaeter noch fuer Inhalte brauche, wenn es mal
      richtig gen Portal geht).
      Wenn ich es trotzdem mittig floaten lassen koennte waer ich mehr als
      gluecklich. Aber ich sehe leider keinen Weg ;-( Bin fuer jeden Hinweis
      dankbar!

      Herzliche Gruesse

      Nicola

      1. Hallo Nicola

        Ja, das war auch eine Idee von mir. Aber ich komme IMHO aus der
        Breiten-Problematik nicht raus. Ich habe ja ein float im Content-DIV
        und float gibt's ja nicht ohne width-Angabe (laut Selfhtml).

        Breiten müssen nicht unbedingt in px definiert sein.

        Oder wie ist deine Idee?

        Es gibt die Möglichkeit prozentueler Breitenangaben (kombiniert mit
        min-width in em) oder rechts und links float und die Mitte nimmt sich den
        Rest.

        Um das Verhalten gefloateter Elemente zu verstehen habe ich mit mal
        Beispiele gemacht Divs mit festen Breiten und Divs mit prozentualen Breiten.
        Spiele dort ein wenig mit der Fensterbreite und der Schriftgröße.

        Aber ich brauche ein Anmutung-tragendes grosses, dominierendes Bild.
        Und ich sehe als moeglichen Platz dafuer eben nur oben quer (weil ich
        die rechte Spalte spaeter noch fuer Inhalte brauche, wenn es mal
        richtig gen Portal geht).

        Dort kann es doch auch sein. Muss es unbedingt komplett zu sehen sein?
        Würde es stören, wenn es bei schmaleren Browserfenstern an der oder den
        Seiten etwas beschnitten würde?

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        1. Hallo Detlef!

          und float gibt's ja nicht ohne width-Angabe (laut Selfhtml).

          Breiten müssen nicht unbedingt in px definiert sein.

          Argh, stimmt ja!

          Oder wie ist deine Idee?

          Um das Verhalten gefloateter Elemente zu verstehen habe ich mit mal
          Beispiele gemacht Divs mit prozentualen Breiten.

          Geil. Und der absolute Overflow! Wonach entscheidet man denn, welche
          Technik man nimmt? In Frage kommen IMO die Varianten 1 oder 6, wegen des
          gleichen Verhaltens der Zwischenraeume...

          Leider bin ich momentan voellig blockiert. Nachdem es gestern erst so gut
          aussah - kann ich jetzt komplett neu beginnen und weiss erst noch nicht,
          recht wie... Immer, wenn ich meine, ich hab dieses bloede Positionieren
          verstanden, kommt irgend ein Effekt und zerhaut mir mein Verstaendis-
          konstrukt im Kopf gleich mit zu Klump. Vielleicht ist heute auch nicht mein
          Tag, aber Beispiel: das Clearen hab ich - auch nach Genuss von Ingos Beschreibung
          nicht mal ansatzweise begriffen ;-( Ich kann das einfuegen, wo ich will,
          es passiert auch mal was, aber nix, was mir beim Verstaendis hilft.
          Egal - ich brauche erst mal ein balastbares Grundkonstrukt - der Rest
          muss warten ;-(

          Ich hatte uebrigens ganz urspruenglich angefangen mit der Glish - The
          Holy Grail-Variante. Kam aber ueberhaupt nicht damit klar und hab
          schliesslich alles weggeworfen und von Hand auf nackter Datei neu
          begonnen. Mein Problem war eben der durchgehende Streifen rechts und
          der ueberlappende Top-Bereich. Ich habe es ja so gemacht, dass ich die
          erste Spalte von oben nach unten durchgehen lasse. Alternativ koennte ich
          auch drei Spalten so wie bei dir machen und darueber einen durchgehenden
          Kopf, in dem ich nur das Logo und das Background-Bild entsprechende
          positioniere. Hab ich hier mal probiert:
          http://physalia.de/tmp/TESTh.html
          Ich dachte schon, dass dies die einfachere Variante waere, ich koennte
          das Top dann auf 100% Breite setzen und die Spalten dann drunter und
          muss es dann 'nur' schaffen, die Linkeste oben 'anzukleben'. Nun wurde
          mir aber vehement von dieser Variante abgeraten und ich kann nicht
          ueberschauen,
          was fuer gravierende Nachteile sie hat ;-(

          Magst du mir noch einen Tipp geben, wie ich meinen Kopfbereich - den
          der Seite meine ich diesmal ;-) - deiner Meinung nach anlegen soll,
          wenn ich deine Variante 1 oder 6 nutzen will?

          Und noch eine Frage zur Variante 6: Finde ich am logischten (also
          rechts, links und Mitte nimmt sich - aber die Mittelbox rueckt dabei
          weiter nach oben, als die lankierenden beiden. Das laesst sich dabei
          wohl nicht wirksam vermeiden, oder? Dann muss ich wohl bei Variante 1 bleiben...

          Dort kann es doch auch sein. Muss es unbedingt komplett zu sehen sein?
          Würde es stören, wenn es bei schmaleren Browserfenstern an der oder den
          Seiten etwas beschnitten würde?

          Nein, du hast mir genau das gezeigt, was ich mir auch gewuenscht haette,
          aber nicht zu konstruieren wusste. 1000 Dank dafuer!

          Herzliche Gruesse

          Nicola

          1. So,

            die andere Baustelle...

            konstrukt im Kopf gleich mit zu Klump. Vielleicht ist heute auch nicht mein
            Tag, aber Beispiel: das Clearen hab ich - auch nach Genuss von Ingos Beschreibung
            nicht mal ansatzweise begriffen ;-( Ich kann das einfuegen, wo ich will,
            es passiert auch mal was, aber nix, was mir beim Verstaendis hilft.

            Oder vielleicht doch... Ich habe jetzt mal alle Boxen mit einem
            Clearing versehen. Und siehe da: Wenn ich die Container-Box cleare,
            dann umfliesst sie auch die anderen:

            http://physalia.de/tmp/TEST.html

            Die Container-Box selbst floatet allerdings nirgends nicht - nicht nach
            meinem Verstaendis jedenfalls: Alles was ich zu Clearing gelesen
            hatte, hiess immer "am Ende eines floatenden Elementes" muss man clearen.
            Oder am Ende des letzten floatenden. Kurzum, mit meinem Verstaendis
            stimmt da was nicht ;-(

            Also jedenfalls habe ich jetzt dennoch einen umarmenden Container
            (im Test blau).
            Immerhin. Nur kuemmert es die Spalten dennoch nicht, dass ich sie auf
            100 % Hoehe setze!
            Ich koennte mir vorstellen, dass dies daran liegt, dass sie nicht damit
            klarkommen, dass oben ja schon ein 100px hohes Element im
            Container liegt und ihre 100% halt nur fuer den Restplatz gelten.
            ABER: Spalte #links hat ja ihre vollen 100% Hoehe Platz und zieht sich
            dennoch nicht nach unten durch.
            Wie 'denken' diese Boxen?*

            ratlos

            Nicola

            *Wenn diese ganzen CSS-Sachen eine logische Logik haetten, dann waere
            es IMO nicht so schwierig fuer mich zu verstehen. So nach dem Motto
            "4 ist groesser 2. Das kann man sich merken.
            Aber diese komische Grafik-Logik ist fuer meinen Kopf
            scheints zu komplex. Da gilt nicht 4 > 2 sondern "4 = links von 2"
            dafuer dann vielleicht "6 = Abstand von 7 nur wenn 2" und so weiter
            oder wie auch immer. Hab ich ein Problem durchschaut, kommt das naechste
            und schon hab ich wieder nen buffer overflow im Kopf - meinem eigenen,
            meine ich jetzt ;-) *grummel*

            1. hi,

              Also jedenfalls habe ich jetzt dennoch einen umarmenden Container
              (im Test blau).
              Immerhin. Nur kuemmert es die Spalten dennoch nicht, dass ich sie auf
              100 % Hoehe setze!

              wird es vermutlich auch nie - siehe u.a. https://forum.selfhtml.org/?t=96020&m=583261, wo dieses thema zum wiederholten male angesprochen wurde.

              gruß,
              wahsaga

              --
              "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
              1. Hi!

                wird es vermutlich auch nie - siehe u.a. https://forum.selfhtml.org/?t=96020&m=583261, wo dieses thema zum wiederholten male angesprochen wurde.

                Hatte ich schon gelesen! Und da sagt Ingo Turski:

                *** snip ***
                gar nicht. Nebeneinanderliegende Blockelemente beeinflussen sich nicht gegenseitig in ihrer Höhe wie Tabellenzellen.
                *** snap ***

                Soweit ich Tabellenzellen kenne, folgen die Hoehen _aller_ nebeneinander
                liegenden Zellen der Hoehe der hoechsten Zelle.

                Argh! NICHT. Da steht _nicht_. Hatte ich wirklich vorhin
                ueberlesen ;-(

                *grummel*

                Nicola

                1. Tachchen!

                  wird es vermutlich auch nie - siehe u.a. https://forum.selfhtml.org/?t=96020&m=583261, wo dieses thema zum wiederholten male angesprochen wurde.

                  Schon wieder eine neue Baustelle?

                  Containerbox strecken ist was ganz anderes als gleichlange Boxen!
                  Letzteres kannst du übrigens wirkich knicken, da gibt's höchstens "Lookalikes". ;-)

                  Gruß

                  Die schwarze Piste

                  --
                  ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
                  http://www.smartbytes.de
                  1. Hi!

                    Schon wieder eine neue Baustelle?

                    Puzzle ich an einer Stelle was zusammen, faellt mir an andere Stelle
                    was neues auf ;-(

                    Containerbox strecken ist was ganz anderes als gleichlange Boxen!

                    Ich hatte was von 100% Hoehe (und frag bloss nicht wo, ich hab heute
                    frueh (zu)viel gelesen) gehoert, mit der sich Boxen auf die Hoehe
                    der Verpackungskiste ziehen. Und dann gesehen, dass mein Container ja
                    selbst keine richtige Hoehe hat. Und so kam das Container-Hoehen-
                    Problem zum Spalten-nach-unten-ziehen-Problem...

                    Letzteres kannst du übrigens wirkich knicken, da gibt's höchstens "Lookalikes". ;-)

                    Im Grunde ist ALLES CSS ja nur loolalike; wenn man sich die Seite
                    mal ohne das Stylesheet ansieht... Soll heissen, 'lookalike' find
                    ich nix per se Negatives. Nur wenn die Konstruktion dafuer womoeglich
                    800 neue Baustellen aufreisst... *seuftz*

                    Herzliche Gruesse

                    Nicola

                    1. Tachchen!

                      Im Grunde ist ALLES CSS ja nur loolalike; wenn man sich die Seite
                      mal ohne das Stylesheet ansieht...

                      Auch eine interessante Interpretation.

                      Soll heissen, 'lookalike' find ich nix per se Negatives.

                      Was ich damit eigentlich sagen wollte und auch immer wieder gerne empfehle:

                      Wenn man schon die Boxen nicht gleich lang bekommt, dann kann man dennoch
                      manchmal diesen Look erzeugen. Wenn - wie in deinem Fall - die Boxen eine
                      feste Breite haben, kannst du dem Container (der sich ja inzwischen streckt)
                      ein sich vertikal wiederholendes Hintergrundbild verpassen, dass in deinem
                      Fall wohl links dunkelgrün wäre und rechts und in der Mitte sandfarben beige.

                      Dieser Look (und nicht mehr) würde sich an der Länge der längsten Spalte
                      orientieren, obwohl die Spalten natürlich nicht gleich lang sind. ;-)

                      Gruß

                      Die schwarze Piste

                      --
                      ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
                      http://www.smartbytes.de
                      1. Tachchen!

                        Ich nehme sandfarben beige zurück für hellgrün ... falsch im Kopf gehabt.
                        Hoffe, du hast mich trotzdem verstanden. ;-)

                        Gruß

                        Die schwarze Piste

                        --
                        ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
                        http://www.smartbytes.de
            2. Hi,

              das Clearen hab ich - auch nach Genuss von Ingos Beschreibung
              nicht mal ansatzweise begriffen ;-(

              mach' Dir nichts draus. Kein einziger Browserhersteller hat die Specs bisher vollständig verstanden bzw. umgesetzt. ;-)

              Alles was ich zu Clearing gelesen
              hatte, hiess immer "am Ende eines floatenden Elementes" muss man clearen.
              Oder am Ende des letzten floatenden. Kurzum, mit meinem Verstaendis
              stimmt da was nicht ;-(

              Ich versuche mich mal in ASCII-Art...

              |--------------------Container--------------------|
              |Überschrift {float:none}                         |
              ||-----------------|------------------------------|
              ||Menü {float:left}| Inhalt {float:none}          |
              ||-----------------|-Container Ende---------------|
               |Menü             |
               |Menü             |
               |----Menü Ende----|

              Das Menü ist aus dem Textfluß genommen und beeinflußt damit nicht mehr die Höhe des umschließenden Containers. Berücksichtigt wird nur die Höhe der nichtfloatenden Elemente (Überschrift und Inhalt).
              Nun ein clearendes Element:

              |--------------------Container--------------------|
              |Überschrift {float:none}                         |
              ||-----------------|------------------------------|
              ||Menü {float:left}| Inhalt {float:none}          |
              ||Menü             |                              |
              ||Menü             |                              |
              ||----Menü Ende----|                              |
              |Footer {clear:left}                              |
              |--------------------Container Ende---------------|

              Wenn Du nun davon ausgehen kannst, daß der Inhaltsbereich höher ist als das bzw. die floatenden Elemente, dann kannst Du dem Container eine Hintergrundfarbe zuweisen (in Deinem Fall grün), die dann durchgängig bis unten geht, und dem Inhaltsbereich eine andere Hintergrundfarbe (in Deinem Fall weiss für die Zwischenräume).

              freundliche Grüße
              Ingo

              1. Hi!

                Erst mal danke!

                Ich versuche mich mal in ASCII-Art...

                |--------------------Container--------------------|
                |Überschrift {float:none}                         |
                ||-----------------|------------------------------|
                ||Menü {float:left}| Inhalt {float:none}          |
                ||-----------------|-Container Ende---------------|
                |Menü             |
                |Menü             |
                |----Menü Ende----|

                Das Menü ist aus dem Textfluß genommen und beeinflußt damit nicht mehr die Höhe des umschließenden Containers. Berücksichtigt wird nur die Höhe der nichtfloatenden Elemente (Überschrift und Inhalt).

                Aha, drum ging mein Container nur um das Top-Element und nicht
                weiter.

                Nun ein clearendes Element:

                |--------------------Container--------------------|
                |Überschrift {float:none}                         |
                ||-----------------|------------------------------|
                ||Menü {float:left}| Inhalt {float:none}          |
                ||Menü             |                              |
                ||Menü             |                              |
                ||----Menü Ende----|                              |
                |Footer {clear:left}                              |
                |--------------------Container Ende---------------|

                Hmmm.

                Wenn Du nun davon ausgehen kannst, daß der Inhaltsbereich höher ist als das bzw. die floatenden Elemente, dann kannst Du dem Container eine Hintergrundfarbe zuweisen (in Deinem Fall grün), die

                Hab ich ja mal gemacht...

                dann durchgängig bis unten geht, und dem Inhaltsbereich eine andere Hintergrundfarbe (in Deinem Fall weiss für die Zwischenräume).

                Das bedeutet, ich muss um die Mitte und rechts noch eine Box drumrum
                machen, die ich dann weiss setzen kann...

                Dann habe ich zwar den gruenen Bereich 'bis unten' - aber Mitte und links
                machen immer noch, was sie wollen ;-(

                Nur um's wirklich zu verstehen: Was _sagt_ dieses 'clear' denn nun genau
                dem Browser? Ich schreibe es unten in das _umfloatende_ rechts-Element
                rein, laut deiner Skizze. Also nicht am Ende des floatenden Elementes. Das
                sit schon aehnlicher dem frueheren <br clear=all>, neben einem Bild
                mit align,
                wenn der folgende Text nicht mehr umfliessen soll.

                Bei mir aber floatet (leider, *seuftz*) alles unterhalb des top-DIVs,
                der Container zieht sich aber brav unter die alle drunter, wenn ich
                _ihn_ 'cleare'. Ich verstehe, dass dies das von dir berechnete Ver-
                halten ist und muss es mir einfach merken. Denn ich verstehe immer
                noch NICHT die Logik - was denkt sich der Browser:

                "Da ist dieses Element #bla, das hat die Eigenschaft
                    'float', also kuemmere ich mich um dieses nicht".
                Und ein paar Zeilen liest er das clearing und denkt:
                "Da ist dieses Element #bla, das hat die Eigenschaft
                    'float' nicht (mehr), also muss ich das beachten".

                Verstehst du, was ich meine: Wie kann denn eine _Eigenschaft_
                'gleichzeitig'
                unterschiedlich sein. Hm, das trifft's nicht. Anders: Ob ich etwas bin,
                um das man rumlaufen muss oder wo man durchschluepfen kann - das sind
                doch komplett gegenlaeufige Auspraegungen dieser Eigenschaft. Wand oder Nebel.
                Wie kann etwas erst Wand sein und dann ploetzlich Nebel?

                Manchmal denke ich, mein Hirn ist nicht 'floatingly' enough, um diese
                Grundprinzipien der CSS-Denke zu kapieren.

                Nunja, steter Tropfen hoelt den Stein - vielleicht weicht auch mein
                Granitbrett vor dem Kopf (bezueglich all der anderen Dinge) noch auf.
                Nur habe ich nur wenige Tage fuer dieses Layout ;-(

                Herzliche Gruesse

                Nicola

                1. Hi,

                  Das bedeutet, ich muss um die Mitte und rechts noch eine Box drumrum
                  machen, die ich dann weiss setzen kann...

                  so hatte ich mir das gedacht, ja.

                  Nur um's wirklich zu verstehen: Was _sagt_ dieses 'clear' denn nun genau
                  dem Browser? Ich schreibe es unten in das _umfloatende_ rechts-Element
                  rein, laut deiner Skizze.

                  sorry, meine Skizze war ungenau. So:
                  |--------------------Container--------------------|
                  |Überschrift {float:none}                         |
                  ||-----------------|------------------------------|
                  ||Menü {float:left}| Inhalt {float:none}          |
                  ||Menü             |------------------------------|
                  ||Menü             | ............................ |
                  ||----Menü Ende----| ............................ |
                  |-------------------------------------------------|
                  |Footer {clear:left}                              |
                  |--------------------Container Ende---------------|
                  wäre es wohl klarer.

                  "Da ist dieses Element #bla, das hat die Eigenschaft
                      'float', also kuemmere ich mich um dieses nicht".
                  Und ein paar Zeilen liest er das clearing und denkt:
                  "Da ist dieses Element #bla, das hat die Eigenschaft
                      'float' nicht (mehr), also muss ich das beachten".

                  falsch gedacht. Durch das clear wird - im obigen Beispiel - der Footer unter das Menü gesetzt. Der Footer befindet sich im Elementenfluß und dadurch umfaßt die Höhe des Containers nun - mitsamt dem Footer - auch das Menü; der gepunktete Bereich erhält also die Hintergrundfarbe des Containers.

                  freundliche Grüße
                  Ingo

          2. Hallo Nicola

            Geil. Und der absolute Overflow! Wonach entscheidet man denn, welche
            Technik man nimmt?

            Die Beispiele sind keine fertigen Vorschläge, die einfach übernommen werden
            können. Sie sollen nur das grundsätzliche Verständnis zu floatenden Boxen bei
            verschiedenen Eigenschaften unterstützen.
            Es wurden bewusst keine Anpassungen oder Hacks verwendet.

            Mir ist an deiner Seite noch Einiges unklar.

            Was soll jeweils "Header" sein?
            (Designelement? Überschrift des Folgenden?)

            Soll "Im Wald ist es schön grün. Jedenfalls, wenn nicht gerade Winter ist!"
            wirklich die wichtigste Überschrift, die Hauptüberschrift der Seite sein?
            Soll es sonst keine Überschriften geben?

            Wenn du dir die Seite ganz ohne CSS ansiehst, entspricht das, was du dann
            siehst, der logischen Struktur, die die Seite haben soll?

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            1. Hallo Detlef!

              Die Beispiele sind keine fertigen Vorschläge, die einfach übernommen werden
              können. Sie sollen nur das grundsätzliche Verständnis zu floatenden Boxen bei
              verschiedenen Eigenschaften unterstützen.
              Es wurden bewusst keine Anpassungen oder Hacks verwendet.

              Schon klar. Was ich meinte ist: Wie entscheidet man, ob man bei aehnlicher
              Aufgabenstellung beispielsweise eher mit 3x float left oder (wie ich
              es hatte) 2x float left + 1 float right waehlt. Letzlich siehst du ja,
              hab ich dann selbst schon ausgewaehlt - meine Kriterien waren z.B.
              das Verhalten des Abstandes der ganz rechten Box zum Rest, der sich
              bei meinem Ansatz (#rechts = float right) eben veraenderte beim
              Auseinanderziehen des Fensters (eben weil die Box ja rechts 'kleben' blieb
              dabei. Ich habe also aus deinen Beispielen 'gelernt', meine rechte Box
              auch links floaten zu lassen ;-)

              Mir ist an deiner Seite noch Einiges unklar.
              Was soll jeweils "Header" sein?
              (Designelement? Überschrift des Folgenden?)

              Erwischt. Header ist eigentlich die H1 und dafuer ist die H1 eigentlich
              ein Teaser, eine Subheadline. Wer ich noch entsprechend umbauen, denn
              du hast voellig Recht!

              Soll "Im Wald ist es schön grün. Jedenfalls, wenn nicht gerade Winter ist!"
              wirklich die wichtigste Überschrift, die Hauptüberschrift der Seite sein?
              Soll es sonst keine Überschriften geben?

              Eigentlich hatte ich hier eine Subheadline gesehen. Mein Problem war:
              Ich hatte zu dem Zeitpunkt noch keinen einzigen Text fuer die Seiten
              gesehen, so dass ich nur raten konnte, ob die Ueberschriften knackig
              und ob Subheadlines ueberhaupt vorhanden sind/sein werden etc. Wie so oft,
              gibt es nur einen Flyer (und den noch nicht mal fertig) als Vorlage
              und leider keine aufs Web hin gestalteten Texte. Ich muss mir die
              erst angucken und sehen, wie ich es dann mache...

              Wenn du dir die Seite ganz ohne CSS ansiehst, entspricht das, was du dann
              siehst, der logischen Struktur, die die Seite haben soll?

              Bis auf die Ueberschriftenstruktur schon. Wie gesagt, hier muss ich aber
              erst die Texte abwarten, um zu sehen, wie die strukturiert sind...

              Danke fuer Deine wertvollen Hinweise!

              Herzliche Gruesse

              Nicola

              1. Hallo Nicola

                Schon klar. Was ich meinte ist: Wie entscheidet man, ob man bei aehnlicher
                Aufgabenstellung beispielsweise eher mit 3x float left oder (wie ich
                es hatte) 2x float left + 1 float right waehlt.

                Das hängt z.B. davon ab, wie sich die Boxen bei Fensterverkleinerung neu
                sortieren sollen. Für dein Layout (rechts und links eine Spalte, dazwischen
                der Haupttext würde ich je nachdem, ob der mittlere Block eine feste Breite
                haben soll Variante 6 oder 7 verwenden oder, wenn die Reihenfolge im
                Quelltext unbedingt anders sein muss, die rechte und/oder linke Spalte
                zur Not absolut positionieren.

                Mir ist an deiner Seite noch Einiges unklar.

                ...

                Diese Fragen stellte ich aus folgendem Grund. Das gewünschte Layout geht von
                einer Tabellenstruktur aus. Es lässt sich nicht _einfach_ 100%ig in
                CSS-Layut umsetzen. Der Vorteil eines CSS-Layouts bestände darin, im HTML
                die inhaltliche Struktur darzustellen, und das Design auszulagern.
                Wenn ich mir aber das HTML ansehe, dann ist diese Div-Suppe auch nicht
                unbedingt besser, als eine Layouttabelle.

                Dazu habe ich schon mehrfach geschrieben:
                http://forum.de.selfhtml.org/archiv/2004/4/t78963/#m457213
                http://forum.de.selfhtml.org/archiv/2004/12/t95859/#m582401
                http://forum.de.selfhtml.org/archiv/2004/5/t81349/#m477537

                Auf Wiederlesen
                Detlef

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!
                1. Hi!

                  der Haupttext würde ich je nachdem, ob der mittlere Block eine feste Breite
                  haben soll Variante 6 oder 7 verwenden oder, wenn die Reihenfolge im
                  Quelltext unbedingt anders sein muss, die rechte und/oder linke Spalte
                  zur Not absolut positionieren.

                  Variante 6 fand ich ja auch verfuehrerisch - mich hat der unterschied-
                  liche Abstand nachoben aber abgeschreckt. Bis ich das dann
                  (wenn es ueberhaupt geht) wieder debugged habe...

                  Diese Fragen stellte ich aus folgendem Grund. Das gewünschte Layout geht von
                  einer Tabellenstruktur aus. Es lässt sich nicht _einfach_ 100%ig in
                  CSS-Layut umsetzen. Der Vorteil eines CSS-Layouts bestände darin,

                  Mein Problem, dass ich halt die Erfahrung noch nicht habe, ein Layout
                  so zu machen, dass ich CSS-Probleme umschiffe... Tatsaechlich bin ich
                  IHMO auch keine grosse Kuenstlerin. Ich bin so herangegangen: Ich hab
                  als Vorlage einen einzelnen Flyer, der zudem noch halb im Entwurfstadium
                  ist und von dem, nebenbei gesagt, so ziemlich gar nix webtauglich ist.
                  Ich bekomme gesagt, dass man mit der Site noch einiges vorhabe, so dass
                  ich davon ausgehe, dass ein (moeglichst typisches) Portallayout sein
                  muss.
                  Also versuche ich ein Portallayout mit einer entsprechenden Anmutung zu
                  versehen.

                  Wenn ich mir aber das HTML ansehe, dann ist diese Div-Suppe auch nicht
                  unbedingt besser, als eine Layouttabelle.

                  Hmm, das trifft mich. Aber eigentlich finde ich es gar nicht soooo
                  unuebersichtlich. Von den beiden Container-DIVs abgesehen natuerlich.
                  Die sind rein dem Layout geschuldet - die anderen vier spiegeln doch
                  exakt die vier (thematischen) Bereiche der Seiten wider...

                  Dazu habe ich schon mehrfach geschrieben:
                  http://forum.de.selfhtml.org/archiv/2004/4/t78963/#m457213
                  http://forum.de.selfhtml.org/archiv/2004/12/t95859/#m582401
                  http://forum.de.selfhtml.org/archiv/2004/5/t81349/#m477537

                  Jahaaa. Schoen waere es, so vorgehen zu koennen. Tatsaechlich habe
                  ich heute erst die mehr oder weniger endgueltigen Texte bekommen. Die
                  ersten Texte erst letzten Sonntag. Online stehen soll der Kram mit 17
                  Seiten eigentlich aber schon am Wochenende. Ich musste also schon
                  vorher anfangen, den Rahmen zu basteln. Vor allem, weil ich ja mangels
                  Erfahrung das nicht an einem Tag so fertig hinstellen kann. Um genau zu
                  sein, hab ich ja noch immer keine 'fertigen' Seiten, in die ich nun
                  die Inhalte fummeln koennte (siehe meinen 'neuen Versuch' ganz oben
                  im Thread).

                  Und da alles ueber zig Entscheidungs-Instanzen laufen muss, kann ich auch
                  nicht einfach zuwarten und dann wenn ich endgueltig die Inhalte kenne,
                  ein Layout drumrumbauen. Zumal - wie gesagt - die jetzigen Inhalte sind
                  IMHO nur ein billiger Abklatsch davon, was da eigentlich mal geplant
                  ist. Aber genau weiss man es ja nicht ;-(

                  Herzlichen Dank dennoch fuer deine Ueberlegungen,
                  ich koennte allerdings, um ehrlich zu sein, momentan
                  eher mal was aufbauendes gebrauchen *seuftz*

                  Herzliche Gruesse

                  Nicola

                  *die gern wieder einen Job als Projektleiterin haette
                  (ca. 20 h/Woche) - darin bin ich naemlich 'aus dem Stand'
                  richtig gut! *

                  1. Hallo Nicola

                    Variante 6 fand ich ja auch verfuehrerisch - mich hat der unterschied-
                    liche Abstand nachoben aber abgeschreckt. Bis ich das dann
                    (wenn es ueberhaupt geht) wieder debugged habe...

                    Dieser Fehler ist leicht zu beseitigen, er entsteht dadurch, dass beim
                    Zusammentreffen von margin-bottom und margin-top die Margins nicht addiert
                    werden sondern der größere gewinnt. Bei floatenden Elementen trifft dieses
                    nicht unbedingt zu.
                    Habe Divs mit festen Breiten und Divs mit prozentualen Breiten angepasst.

                    Deine Seite, kurz skizziert, ohne große Browseranpassungen.

                    Mein Problem, dass ich halt die Erfahrung noch nicht habe, ein Layout
                    so zu machen, dass ich CSS-Probleme umschiffe...

                    Große Erfahrungen meinerseits, möchte ich auch nicht behaupten. Mitte 2002
                    habe ich mich erstmalig mit HTML beschäftigt.

                    Tatsaechlich bin ich IHMO auch keine grosse Kuenstlerin.

                    Ich auch nicht, habe aber einen Sohn, der da (Print-)Layouts entwirft.

                    Ich bin so herangegangen: Ich hab
                    als Vorlage einen einzelnen Flyer, der zudem noch halb im Entwurfstadium
                    ist und von dem, nebenbei gesagt, so ziemlich gar nix webtauglich ist.

                    Das kenne ich: MS-Publisher-Drucklayout mit Tabellen umgestzt (Grund-HTML-Layout von Februar 2003).

                    Hmm, das trifft mich.

                    War von mir nicht böse gemeint.

                    Aber eigentlich finde ich es gar nicht soooo unuebersichtlich.

                    Es geht nicht unbedingt um die Übersichtlichkeit.
                    Ich meine nur, für die logische Struktur des Inhalts ist es unerheblich,
                    ob alles in Divs gepackt wird oder in Tabellen.

                    Von den beiden Container-DIVs abgesehen natuerlich.

                    Die stören mich weniger, diese gruppieren ja lediglich die enthaltenen
                    Elemente.
                    Mich persönlich stört mehr:

                    ...
                    <div class="logo"><img class="logo" src="images/logo.gif" alt="Logo" /></div>

                    Warum muss das Logo extra in einem Div stecken?

                    <br /><br />

                    Gibt es für soetwas nicht margin oder padding?

                    <div class="header">Header</div>

                    Was soll das sein? (eventuell eine Überschrift?)

                    <div class="menue">
                          <ul>

                    Muss die Liste wirklich noch extra in ein Div?

                    ...

                    Jahaaa. Schoen waere es, so vorgehen zu koennen. Tatsaechlich habe
                    ich heute erst die mehr oder weniger endgueltigen Texte bekommen. Die
                    ersten Texte erst letzten Sonntag.

                    Wichtig ist dabei nicht unbedingt wortwörtlich der endgültige Text, vielmehr
                    die Struktur. Wieviele Texte, wie strukturiert.

                    Online stehen soll der Kram mit 17 Seiten eigentlich aber schon am Wochenende.

                    Also möglichst schon, bevor die Texte gleiefert sind. ;)

                    Herzlichen Dank dennoch fuer deine Ueberlegungen,
                    ich koennte allerdings, um ehrlich zu sein, momentan
                    eher mal was aufbauendes gebrauchen *seuftz*

                    Tut mir leid, dass du so im Zeitdruck bist.
                    Ich denke, du solltest es vielleicht ersteinmal mit einer einfachen
                    Layouttabelle das Spaltenlayout umsetzen, was du ja kannst.
                    Damit solltest du die Seiten sehr schnell und ohne große Probleme
                    online stellen können. Auch dabei kannst du ja alle Eigenschaften ins
                    CSS auslagern.

                    Auf Wiederlesen
                    Detlef

                    --
                    - Wissen ist gut
                    - Können ist besser
                    - aber das Beste und Interessanteste ist der Weg dahin!
                    1. Hallo Detlef!

                      Dieser Fehler ist leicht zu beseitigen, er entsteht dadurch, dass beim
                      Zusammentreffen von margin-bottom und margin-top die Margins nicht addiert
                      werden sondern der größere gewinnt. Bei floatenden Elementen trifft dieses
                      nicht unbedingt zu.

                      Erstaunlich. Und ist dies dann wieder logisch? Weil die gefloateten
                      Elemente 'ja aus dem Fluss' genommen sind? Ich kriege diese Logik
                      nicht im meinen Schaedel *seuftz*

                      Deine Seite, kurz skizziert, ohne große Browseranpassungen.

                      Oh Mann. Ist das wunderschoen! Warum bin ich daran so komplett
                      gescheitert? Ich hatte ja natuerich ausfuehrlich versucht, den
                      Mittelteil dehnbar zu machen. Mit width:100% oder auch width:auto.
                      Beim mir nahm sich das Teil dann aber immer gleich 100% der
                      Fensterbreite oder mindestens schob es das rechte Element nach
                      unten! Womit genau hast du es nun bezwungen? Mit der festen
                      Containerbreite? DAS war alles, was mir fehlte?

                      Mein Problem, dass ich halt die Erfahrung noch nicht habe, ein

                      Große Erfahrungen meinerseits, möchte ich auch nicht behaupten. Mitte 2002
                      habe ich mich erstmalig mit HTML beschäftigt.

                      Ach, da hab ich ja viel laenger Erfahrung! *lach* Ich treibe mich ja im
                      Web seit 1995 rum und seit 1997 oder so hab ich schon Projektleitung
                      fuer Webprojekte gemacht. Hab _natuerlich_ auch immer klein, klein
                      selbst gebastelt und bin eh eine, die sich immer alles genau erklaeren
                      laesst (meine armen frueheren MitarbeiterInnen ;-)) Seit 2002 betreue
                      ich auch die deutsche Geocaching-Website
                      http://www.geocaching.de - ABER: das ist halt alles ganz billig
                      in HTML gemacht und dann stellenweise halt in jeweils dem, was ich grad
                      zugelernt hab (Includes, Mini-PHP und so weiter). So richtig an CSS
                      rangerasselt bin ich erstmals Anfang des Jahres mit dem Nachbau
                      eines (in Frames bestehenden) Layouts. Dann hab ich mit dem Quellendreieck
                      (demnaechst unter http://www.eifeler-quellendreieck.de/ ja ein
                      Layout gemacht, das ich recht einfach umsetzen konnte.

                      Hmm, das trifft mich.
                      War von mir nicht böse gemeint.

                      Meine ich auch nicht. Aber ich bin nunmal so drauf, dass ich das, was ich mache,
                      immer 100% und _richtig_ machen will. Und wenn ich dann halbwegs zufrieden
                      und sogar mal ein bischen Stolz bin und dann stellt sich raus: Das
                      ist Megamist (und ich hab's nicht mal gemerkt!) - dann haut mich sowas
                      halt aus den Schuhen.

                      Aber eigentlich finde ich es gar nicht soooo unuebersichtlich.
                      Es geht nicht unbedingt um die Übersichtlichkeit.
                      Ich meine nur, für die logische Struktur des Inhalts ist es unerheblich,
                      ob alles in Divs gepackt wird oder in Tabellen.

                      Eben. Bzw. ich finde es dann schon in DIVs sinnvoller, weil man die
                      ja 'sprechend' benennen kann. Das macht den Code viel uebersichtlicher,
                      als noch zu Tabellenzeiten, wo ich immer mit Kommentaren arbeiten musste,
                      um mir noch merken zu koennen, wo welche Inhalte reinkommen (guck nur mal
                      in den Quellcode meiner Geocaching-Seiten *grusel*)

                      Von den beiden Container-DIVs abgesehen natuerlich.
                      Die stören mich weniger, diese gruppieren ja lediglich die enthaltenen
                      Elemente.
                      Mich persönlich stört mehr:
                      <div class="logo"><img class="logo" src="images/logo.gif" alt="Logo" /></div>
                      Warum muss das Logo extra in einem Div stecken?

                      Weil es ohne nicht geklappt hat bei mir. Schiess mich tot - ich meinte,
                      es muesse doch reichen, dem img-Tag die Logo-Klasse mitzugeben. Aber
                      das kam dann nicht im Browser an, jedenfalls ignorierte er meine Formatierungen
                      und nahm sie nur an, wenn ich die Klasse in einem DIV benannte. Ich hatte
                      das noch auf meiner Debugging-Liste...

                      <br /><br />

                      Gibt es für soetwas nicht margin oder padding?

                      Jaaaaahaaa. Guck mal. Ich war erst dabei, generell die Seite hinzustellen.
                      Die Bilder und den Kram hab ich 'nur schnell reingefummelt' - um einen
                      Gesamteindruck zu bekommen. Obwohl du Recht hast - meist bleiben solche
                      Schnellschuesse dann immer bis zuletzt erhalten, weil man sie nie
                      mehr anfasst ;-(

                      <div class="header">Header</div>

                      Was soll das sein? (eventuell eine Überschrift?)

                      Ja, das hab ich ja schon gestern rausgefummelt, siehe mein letztes
                      Ergebnis http://physalia.de/tmp/TESTh.html und mein Posting dazu (ganz oben).

                      <div class="menue">
                            <ul>

                      Muss die Liste wirklich noch extra in ein Div?

                      Hmm, selbes Problem wie beim Image. Ich hatte urspruenglich - wenn ich mich
                      noch korrekt erinnere - das als ul class="menue" machen wollen, aber
                      dann war das irgendwie nicht belastbar. Weiss jetzt nicht mehr, aber
                      es klappte wohl nicht und dann hab ich es halt so festgezogen.

                      Wichtig ist dabei nicht unbedingt wortwörtlich der endgültige Text, vielmehr
                      die Struktur. Wieviele Texte, wie strukturiert.

                      Eben. Und ich kannte weder die Texte noch so recht die Inhalte. und
                      die Struktur schon gar nicht (meine erste Vorlage war ein 'leerer' Flyer
                      mit Titelbild und die Textseiten hatten oben und unten ein kleines
                      Minibild statt Seitenzahl. Ach ja: Und ganz nebenbei hat sich die
                      Seitenzahl nun komplett verdoppelt. Und die Bilder sind teilweise in
                      einer Qualitaet, dass ich nicht weiss, wie der Drucklayouter sie
                      nutzen konnte *grummel*.

                      Online stehen soll der Kram mit 17 Seiten eigentlich aber schon am Wochenende.

                      Korrektur: 18 Seiten mind.

                      Also möglichst schon, bevor die Texte gleiefert sind. ;)

                      korrekt! Einige Texte stehen noch immer aus!

                      Tut mir leid, dass du so im Zeitdruck bist.
                      Ich denke, du solltest es vielleicht ersteinmal mit einer einfachen
                      Layouttabelle das Spaltenlayout umsetzen, was du ja kannst.
                      Damit solltest du die Seiten sehr schnell und ohne große Probleme
                      online stellen können. Auch dabei kannst du ja alle Eigenschaften ins
                      CSS auslagern.

                      Nee. Das geht nicht. Ich hab mich da committet. Vor allem vor mir
                      selbst (aber nicht nur). Und ich will auch ein vernuenftiges
                      Print-Stylesheet machen koennen und so weiter...
                      Vor allem aber: Wenn ich es jetzt so mache und hernach noch mal neu

                      • dann finde ich nie ein Ende! Und so ein Auftrag muss ja auch mal
                        beendet
                        werden. Ich bin eh denkbar ungeeignet fuer selbstaendige Projekte,
                        weil ich eben nicht einfach mal was wieder loslassen kann. Ich hoffe,
                        ich lerne das noch. Oder finde wieder einen Job in meiner eigentlichen
                        Profession ;-)

                      Heute vormittag habe ich uebrigens meinen letzten Entwurf auf den
                      aktuellen IE zugeschneidert http://physalia.de/tmp/TESThIE.html

                      • und bin schon wieder in ein echtes Problem gelaufen. Dazu poste ich aber
                        noch mal neu oben in den Thread.

                      Meine bange Frage nun aber an dich: Ich wuerde es ja viiiiel lieber so
                      flexibel haben, wie du es jetzt hinbekommen hast! Darf ich mir das
                      nehmen und darauf noch mal neu aufbauen? Darf ich dir dann eine Flasche
                      Wein o.ae. zukommen lassen?

                      Erst mal muss ich jetzt allerdings was essen, hab schon das Fruehstueck
                      ausfallen lassen. und dann mal gucken, ob mein kleiner Mann mich
                      ab eins ueberhaupt noch arbeiten laesst, der war heute frueh um halb sieben
                      schon seltsam drauf und wollte auch nicht so gern bei der Tagesmutter bleiben
                      (was es sonst im ganzen letzten Jahr nicht einmal gab! Ausgerechnet jetzt... ;-(

                      Herzliche Gruesse und 1000 Dank!

                      Nicola

                      1. Hi,

                        Deine Seite, kurz skizziert, ohne große Browseranpassungen.

                        Oh Mann. Ist das wunderschoen!

                        hat allerdings leider noch einen kleinen Schönheitsfehler im IE:
                        * html #container {
                          width:985px;
                        }
                        sorgt selbst bei maximiertem 1024er Fenster für horizontales Scrolling.
                        Ich würde den Wert entweder reduzieren oder auf eine Weite verzichten und die Waldgrafik rechts bis zum Baum beschneiden und dem Header eine dazu passende Hintergrundfarbe geben. Evtl. auch max-width mit expression (böse) simulieren.

                        freundliche Grüße
                        Ingo

                        1. Hallo Ingo

                          ... Evtl. auch max-width mit expression (böse) simulieren.

                          Richtig und nicht zu übertrieben eingestzt, sind diese durchaus brauchbar.
                          Ich hatte die Seite allerdings, wie geschrieben nur kurz so geändert, wie ich
                          herangegangen wäre, ohne mir noch Zeit für Anpassungen, Optimierungen und
                          Browsertests zu nehmen.

                          Auf Wiederlesen
                          Detlef

                          --
                          - Wissen ist gut
                          - Können ist besser
                          - aber das Beste und Interessanteste ist der Weg dahin!
                      2. Hallo Nicola

                        Erstaunlich. Und ist dies dann wieder logisch? Weil die gefloateten
                        Elemente 'ja aus dem Fluss' genommen sind? Ich kriege diese Logik
                        nicht im meinen Schaedel *seuftz*

                        Warum genau es so ist, und ob es logisch ist, weiß ich nicht.

                        ... Warum bin ich daran so komplett
                        gescheitert? Ich hatte ja natuerich ausfuehrlich versucht, den
                        Mittelteil dehnbar zu machen.

                        Du hast dir Variante 6 nicht genau genug angesehen. ;)

                        Mit width:100% oder auch width:auto.
                        Beim mir nahm sich das Teil dann aber immer gleich 100% der
                        Fensterbreite oder mindestens schob es das rechte Element nach
                        unten!

                        Prozentuale Breitenangaben beziehen sich auf die Gesamtbreite, nicht auf den
                        verbleibenden Rest.

                        Womit genau hast du es nun bezwungen? Mit der festen
                        Containerbreite? DAS war alles, was mir fehlte?

                        Erst die Elemente mit float in den Quelltext, dann das ungefloatete, dessen
                        Inhalt sich dann den Rest nimmt, bzw. dieses Element mittels margin von den
                        anderen fernhalten.

                        http://www.geocaching.de - ABER: das ist halt alles ganz billig
                        in HTML gemacht und dann stellenweise halt in jeweils dem, was ich grad
                        zugelernt hab (Includes, Mini-PHP und so weiter).

                        Dann kannst du mehr als ich. Mit PHP habe ich mich noch nie beschäftigt.
                        Meine Webspaces sind ohne PHP und solange diese nicht unbedingt PHP
                        erfordern bleibt es bei statischen Seiten.

                        ... immer 100% und _richtig_ machen will.

                        Geht mir genauso, weil mir das neue Layout noch nicht 100%ig gefällt,
                        verwende ich es (noch) nicht und aktualisiere weiter das alte
                        Tabellenlayout.

                        ... Schiess mich tot

                        Nein! Warum sollte ich?

                        es muesse doch reichen, dem img-Tag die Logo-Klasse mitzugeben.

                        Ja.
                        (Oft sind es kleine einfache Fehler, die man total übersieht.)

                        Ja, das hab ich ja schon gestern rausgefummelt, siehe mein letztes
                        Ergebnis http://physalia.de/tmp/TESTh.html und mein Posting dazu (ganz oben).

                        Die Seite selbst hat keine Überschrift?
                        Wie wäre die Überschrift der Gesamtseite bzw. des Projektes?
                        Deine h1 wären bei mir ganz starke h2-Kandidaten.

                        Noch etwas zu dieser Seite:
                        Du hast sie in UTF-8 kodiert und dies auch mittels meta-Tag angegeben.
                        Dein Server leifert die Seite aber als ISO-8859-1 aus. Viele Browser
                        halten sich richtigerweise an die Angaben des Servers.

                        Meine bange Frage nun aber an dich: Ich wuerde es ja viiiiel lieber so
                        flexibel haben, wie du es jetzt hinbekommen hast! Darf ich mir das
                        nehmen und darauf noch mal neu aufbauen?

                        Was meinst du, wozu ich das online gestellt habe?
                        Damit es geheim bleibt und du es auf keinen Fall verwendest?

                        Natürlich kannst du es verwenden.
                        Aber Vorsicht, ich habe es nur auf die Schnelle zusammengeschrieben, keine
                        extra Anpassungen (z.B. IE5) und keine Browsertests, nur kurz im
                        Mozilla 1.7.3 und IE6 drübergesehen.

                        Auf Wiederlesen
                        Detlef

                        --
                        - Wissen ist gut
                        - Können ist besser
                        - aber das Beste und Interessanteste ist der Weg dahin!
                        1. Hallo Detlef!

                          Die Seite selbst hat keine Überschrift?
                          Wie wäre die Überschrift der Gesamtseite bzw. des Projektes?
                          Deine h1 wären bei mir ganz starke h2-Kandidaten.

                          Das Projekt steht ja immer im (Browser-) Titel und im Logo.
                          Die Seite hiesse im Beispiel 'Unsere Visionen'. DAS kaeme dann
                          auch noch zusaetzlich in den Titeltag. Ich hab nirgends was
                          hoeherrangiges als 'Unsere Visionen'. Nachrangiges wohl, die
                          'Ueberschriften' der Navigations-Rubriken koennten dann H2s
                          werden. Ich wollte nur nicht noch eine andere Schriftgroesse...

                          Noch etwas zu dieser Seite:
                          Du hast sie in UTF-8 kodiert und dies auch mittels meta-Tag angegeben.

                          Das ist nur deshalb, weil ich hier ja an SUSE 9.2 sitze und waehrend
                          dieser Puzzle-ei (Pusselei?) einfach irgendwann dieser Zeichenmurks
                          in den einkopierten Texten auf den Wecker ging - ich konnte nie
                          sehen,
                          wie denn nun ein Text wirkt oder wie weit die Navigationsbegriffe
                          so laufen im Vergleich zueinander etc. Da hab ich das auf UTF-8
                          gesetzt und konnte in Ruhe arbeiten.

                          Ich maskiere am Ende eh alle Sonderzeichen - Ingo hat mir schon mal
                          erklaert, dass dies nicht sein muss, aber ich bin es gewohnt mit
                          Zeichensatzwirrwarr zu leben (auf der GC.de haben wir haufenweise
                          aus anderen Quellen gezogene Daten und damit oft schon Texte mit
                          unterschiedlichen Zeichensaetzen in _einer_ Seite gehabt). Drum hab ich
                          mir das mit dem Maskieren der Umlaute angewoehnt. Phase 5 macht das
                          ja automatisch fuer einen, Quanta offenbar leider nicht und so
                          werd ich das bei Gelegenheit wohl per sed machen... Und dann auch den
                          Zeichensatz im Kopf wieder anpassen.

                          Dein Server leifert die Seite aber als ISO-8859-1 aus. Viele Browser
                          halten sich richtigerweise an die Angaben des Servers.

                          Ui, wusste ich gar nicht, dass der Server den im Dokument explizit genannten
                          Zeichensatz dominieren kann. Wo ist denn dabei schon wieder die Logik
                          *staun*? _Wenn_ sich schon mal jemand die Muehe macht, den Zeichensatz
                          zu definieren (wie oft stosse ich auf Seiten ohne Angabe!), dann sollte
                          man doch das auch ernst nehmen...

                          Was meinst du, wozu ich das online gestellt habe?
                          Damit es geheim bleibt und du es auf keinen Fall verwendest?
                          Natürlich kannst du es verwenden.

                          Und wohin darf die Flasche Wein schicken? (Meine Mailadresse funktioniert).

                          Aber Vorsicht, ich habe es nur auf die Schnelle zusammengeschrieben, keine
                          extra Anpassungen (z.B. IE5) und keine Browsertests, nur kurz im
                          Mozilla 1.7.3 und IE6 drübergesehen.

                          Schon klar. Puzzeln fuer den IE hab ich ja heute vormittag schon mal
                          geuebt ;-)

                          Herzliche Gruesse

                          Nicola

                          jetzt aber erst mal => Bett. Bin seit 6 auf den Beinen und hatte
                          nur 5,5 h Schlaf heute Nacht (minus die Halbwachmomente zum Kind
                          zudecken, Schnuller zurueckstecken etc.). Was ich jetzt noch machen
                          wuerde, wuerde im Chaos enden, fuerchte ich ;-(

                          1. Hi,

                            Ui, wusste ich gar nicht, dass der Server den im Dokument explizit genannten
                            Zeichensatz dominieren kann. Wo ist denn dabei schon wieder die Logik
                            *staun*? _Wenn_ sich schon mal jemand die Muehe macht, den Zeichensatz
                            zu definieren (wie oft stosse ich auf Seiten ohne Angabe!), dann sollte
                            man doch das auch ernst nehmen...

                            nö. Wenn sich jemand die Mühe macht, dann weil der Server _keine_ Angaben übermittelt oder die Dateien auch offline funktionieren sollen (was allerdings offenbar nicht klappt - jedenfalls mag mein Firefox die UTF-Dateien des Forums offline nicht vernünftig darstellen).

                            freundliche Grüße
                            Ingo

                          2. Hallo Nicola

                            Das Projekt steht ja immer im (Browser-) Titel und im Logo.

                            Ob den Browsertitel jeder liest? Zu oft steht dort nur "Neue Seite".

                            Kann den Text im Logo jeder lesen?
                            Es gibt auch Textbrowser, Screenreader, und Leute, die Bilder abgeschaltet
                            haben weil sie z.B. nur ein langsames Modem benutzen.

                            ... Ich wollte nur nicht noch eine andere Schriftgroesse...

                            Muss die h1 unbedingt eine andere Schriftgröße haben?
                            Ob sie sich durch Schriftgröße, Schriftgewicht, Schriftart, Farbe oder die
                            Position auf der Seite hervorhebt, ist dir überlassen.
                            Auch das Logo selbst (natürlich mit sinnvollem alt-Text) kann in einem
                            h1-Element stecken (vielleicht nicht optimal aber möglich).
                            Es ist auch möglich sie nur anzuzeigen, wenn keine Bilder zu sehen sind,
                            also auch nicht der Logotext.

                            Auf Wiederlesen
                            Detlef

                            --
                            - Wissen ist gut
                            - Können ist besser
                            - aber das Beste und Interessanteste ist der Weg dahin!
  3. Hallo!

    Hab trotz des ganzen Frustes heute morgen es doch geschafft,
    noch mal andere Layouts zu probieren.

    Ich hab mit dem System von Detlef (Variante 1 + durchgehende Top-Box) gespielt.
    Bin dort aber daran gescheitert, dass ich den Waldbanner nicht auf eine
    Position left:22%; setzen kann... Also ganz so fluessig geht es
    IMHO nicht, ich muesste die linke Box schon auf eine feste Breite
    setzen.

    Parallel hatte ich mein Layout auch einmal auf durchgehende Top-Box umgebaut:
    http://physalia.de/tmp/TESTh.html

    Hier auch den Banner in den Hintergrund und die Breite der Top-Box
    automatisch. Den Banner dabei auf die Anfangsposition left:195px und
    das Logo wie gehabt.

    Ich finde, soweit sieht es gut aus - im IE ist alles noch verschoben,
    aber ich hoffe, das ist nur Fleissarbeit und keine prinzipielle Sache
    (oder?). Durch den Banner im Hintergrund und die variable Top-Breite
    habe ich jetzt zwar keine Gummiband-Boxen, aber auch keinen Scrollbalken.
    Die nicht mehr passenden Kisten rutschen einfach runter.
    Wobei ich nicht weiss, ob der Auftraggeber dieses Verhalten besser findet,
    als einen Scrollbalken. Aber ich kann ja die Top-Breite notfalls
    einfach wieder festziehen.

    Ich habe versucht, die Breite der Contentbox flexibler zu gestalten,
    um ueber sie doch einen Gummibank-Effekt zu bekommen. Bin leider
    gescheitert. Sowohl mit Prozentangabe als auch mit max-width gab
    das nur Chaos bei mir (und ich hab noch nicht mal im IE geguckt, nur
    Ff/Konqui erst mal). Sollte ich hier eine Moeglichkeit uebersehen haben,
    die Sache noch etwas flexibler zu gestalten, damit die Kisten nicht gleich
    den Abgang machen, wenn das Fenster mal schmaler wird, waere ich fuer
    Hinweise extremst dankbar!

    Mein Grundfrage an Euch aber ist: Was haltet Ihr davon? Sinnvoll,
    belastbar,
    vielversprechend? Oder schon wieder zurueck auf Anfang? (Wobei ich dann
    wirklich keine Idee mehr hab ;-(

    1000 Dank!

    Nicola