Yadgar: Ausrichten am letzten "Geschwisterelement"?

Hi(gh)!

Folgendes Problem: ich will einen Text mit zweispaltigem Satz so formatieren, dass es bei unterschiedlichen Fenstergrößen/Bildschirmauflösungen bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt.

Mit position:absolute geht das schon einmal nicht, das ist mir klar... aber auch position:relative bezieht sich auf das jeweils übergeordnete Elternelement (sofern selbst mit position positioniert), ich müsste aber die vertikale Position jedes Absatzes relativ zum vorangegangenen Absatz beschreiben. Wie mache ich das?

Bis bald im Khyberspace!

Yadgar

akzeptierte Antworten

  1. @@Yadgar

    Folgendes Problem: ich will einen Text mit zweispaltigem Satz so formatieren, dass es bei unterschiedlichen Fenstergrößen/Bildschirmauflösungen bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt.

    Was für vertikale Positionierungen? Was für Überschneidungen?

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Lieber Yadgar,

    einen Text mit zweispaltigem Satz

    wie hast Du das mit den Spalten denn gemacht? So rightig richtig mit columns?

    so formatieren, dass es bei unterschiedlichen Fenstergrößen/Bildschirmauflösungen bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt.

    Verstehe ich nicht. Beispiel online (z.B. eigenes oder auf Codepen/dabblet/jsFiddle)?

    Mit position:absolute geht das schon einmal nicht, das ist mir klar...

    Was für ein Denkmodell benutzt Du denn?

    aber auch position:relative bezieht sich auf das jeweils übergeordnete Elternelement (sofern selbst mit position positioniert), ich müsste aber die vertikale Position jedes Absatzes relativ zum vorangegangenen Absatz beschreiben. Wie mache ich das?

    Was ist Dein Denkmodell? Wie gehst Du bisher vor? Du bist doch nicht das erste Mal hier und weißt wie das hier so läuft...

    Liebe Grüße,

    Felix Riesterer.

    1. @@Felix Riesterer

      So rightig

      sagte der Denglischlehrer.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Lieber Gunnar,

        So rightig

        sagte der Denglischlehrer.

        ein Bonbon für den lieben Gunnar.

        Liebe Grüße,

        Felix Riesterer.

    2. Hi(gh)!

      (wie kann ich hier eigentlich zitieren? Früher war das viel einfacher...)

      Nein, nicht mit columns, sondern einfach mit <div>-Bereichen, left bzw. right und widht (prozentual)…

      Bis bald im Khyberspace!

      Yadgar

      1. @@Yadgar

        (wie kann ich hier eigentlich zitieren?

        Button „Zitat einfügen“ überm Eingabefeld.

        Nein, nicht mit columns, sondern einfach mit <div>-Bereichen, left bzw. right und widht (prozentual)…

        Das als Antwort auf Felix’

        Beispiel online (z.B. eigenes oder auf Codepen/dabblet/jsFiddle)?
        Du bist doch nicht das erste Mal hier

        ist schon etwas unverschämt. Und streiche bitte jsFiddle aus der Liste.

        und weißt wie das hier so läuft...

        Sollte sich Felix da getäuscht haben?

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. Hej Yadgar,

    Folgendes Problem: ich will einen Text mit zweispaltigem Satz so formatieren, dass es bei unterschiedlichen Fenstergrößen/Bildschirmauflösungen bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt.

    Ich denke, du hättest gerne so was wie CSS Flexbox - kann ich aber nur raten…

    Gut ist das allerdings nicht, denn wie hier schon gesagt gibt es für zweispaltigen Text columns.

    Ein abgeschlossener Text ein article - den kann man in sections und Paragrafen unterteilen und mit Überschriften hierarchisch gliedern.

    Mit position:absolute geht das schon einmal nicht, das ist mir klar…

    Vermutlich schon, ist aber der Mühe nicht wert.

    aber auch position:relative bezieht sich auf das jeweils übergeordnete Elternelement (sofern selbst mit position positioniert), ich müsste aber die vertikale Position jedes Absatzes relativ zum vorangegangenen Absatz beschreiben. Wie mache ich das?

    Das macht der Browser doch automatisch!

    Ich fürchte du bist dabei, das Web mit einem Blatt Papier zu verwechseln.

    Denke anders! Denke in Verhältnissen (1:1:2), denke in Prozent, in vw, vh und em. Dann wird es eine runde Sache.

    Das Web ist flexibel!

    Marc

    1. Hej Yadgar,

      Alter Schwede! 😉

      Folgendes Problem: ich will einen Text mit zweispaltigem Satz so formatieren, dass es bei unterschiedlichen Fenstergrößen/Bildschirmauflösungen bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt.

      Ich denke, du hättest gerne so was wie CSS Flexbox - kann ich aber nur raten…

      Ich hatte mich eventuell etwas missverständlich ausgedrückt: mit "zweispaltig" meine ich, dass eine (breitere) Spalte Text, die andere Bilder (mit Untertiteln) enthält! Da scheint mir columns nicht das Richtige zu sein...

      Bis bald im Khyberspace!

      Yadgar

      1. Hallo

        Da scheint mir columns nicht das Richtige zu sein…

        Aber Flexbox.

        Gruss

        MrMurphy

        1. @@MrMurphy1

          Da scheint mir columns nicht das Richtige zu sein…

          Aber Flexbox.

          Scheint mir auch nicht das Richtige zu sein.

          Aber Grid.

          Ohne genau zu wissen, was Yadgar eigentlich will, können wir natürlich nur in die Glaskugeln schauen …

          Und da Yadgar es bisher nicht geschafft hat zu sagen[1], was er will, sehe ich kaum Hoffnung, dass da noch was kommt.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

          1. Und mitunter sagt ein Bild mehr als tausend Worte. ↩︎

          1. Hi(gh)!

            Scheint mir auch nicht das Richtige zu sein.

            ...weil höchstwahrscheinlich zu kompliziert für mein Vorhaben (s. u.)!

            Bitteschön:

            Bildbeschreibung

            Und hier ein Stück Code dazu:

            <body>
              <h2>Rustication (architecture)</h2>
              <hr>
              <h4>From Wikipedia, the free encyclopaedia</h4>
              <div class="tl" style="top:130px">
                <p>
                  In classical architecture rustication is a range of masonry techniques giving visible surfaces a finish that contrasts in texture with the smoothly finished, squared-block masonry surfaces called ashlar. The visible face of each individual block is cut back around the edges to make its size and placing very clear. In addition the central part of the face of each block may be given a deliberately rough or patterned surface.[1]
                </p>
                <p>
                  Rusticated masonry is usually "dressed", or squared off neatly, on all sides of the stones except the face that will be visible when the stone is put in place. This is given wide joints that emphasize the edges of each block, by angling the edges ("channel-jointed"), or dropping them back a little. The main part of the exposed face may worked flat and smooth or left or worked with a more or less rough or patterned surface. Rustication is often used to give visual weight to the ground floor in contrast to smooth ashlar above. Though intended to convey a "rustic" simplicity, the finish is highly artificial, and the faces of the stones often carefully worked to achieve an appearance of a coarse finish.[2]
                </p>
                <p>
                  Rustication was used in ancient times, but became especially popular in the revived classical styles of Italian Renaissance architecture and that of subsequent periods, above all in the lower floors of secular buildings. It remains in use in some modern architecture.
                </p>
                <p>
                  Similar finishes are very common in medieval architecture, especially in castles, walls and similar buildings, but here it merely arises from an unwillingness to spend the extra money required for ashlar masonry in a particular building, and lacks the deliberate emphasis on the joints between blocks. Though it often achieves a decorative effect, this is something of a by-product, and the exploitation for architectural effect within a single building of contrasts between rusticated and ashlar surfaces is rarely seen. In some buildings, such as the Palazzo Vecchio in Florence (begun 1298) something other than cost-saving is at play, and this may be the association of the technique with the display of power and strength, from its use in military architecture.[3] Rough finishes on stone are also very common in architecture outside the European tradition, but these too would generally not be called rustication. For example, the bases of Japanese castles (城, shiro) and other fortifications usually use rough stone, often very attractively.
                </p>
              </div>
              <div class="ir" style="top:130px">
                <p>
                  <img src="220px-Palazzo_medici_riccardi_bugnato_01.jpg" alt="Palazzo Medici-Riccardi" width="220" height="293"><br>
                  Two different styles of rustication in the Palazzo Medici-Riccardi in Florence; smooth-faced above and rough-faced below.
                </p>
              </div>
              <div class="ir" style="top:550px">
                <p>
                  <img src="220px-Chteau_de_Fontainebleau_2011_200.jpg" alt="Chateau de Fontainebleau" width="220" height="165"><br>
                  Extreme Mannerist "cyclopian" rustication at the Palace of Fontainebleau
                </p>
              </div>  
              <div class="ch" style="top:750px">
                <h3>History</h3>
                <hr>
              </div>
            
            

            Es geht mir darum, die unzähligen lokal abgespeicherten Wikipedia- und sonstigen WWW-Seiten in eine möglichst einfache Form ohne "Overhead" zu bringen, auf die Kerninformation reduziert - aber so, dass ich jede dieser vereinfachten Seiten auch auf unterschiedlichen Systemen in lesbarer Form darstellen kann!

            Bis bald im Khyberspace!

            Yadgar

            1. Hej Yadgar,

              Ich persönlich würde es für meinen privaten Gebrauch mit einem .ir {float: right;} gut sein lassen…

              Marc

            2. @@Yadgar

              Und mitunter sagt ein Bild mehr als tausend Worte.

              Bitteschön:

              Bildbeschreibung

              Und in dem Fall sagt ein Bild etwas ganz anderes als tausend Worte.

              Du willst nicht „Text mit zweispaltigem Satz formatieren“, sondern die Bilder vom Text umfließen lassen?

              Und hier ein Stück Code dazu:

              <body>
                <h2>Rustication (architecture)</h2>
                <hr>
                <h4>From Wikipedia, the free encyclopaedia</h4>
              

              h2 ist falsch; du darfst keine Überschriftsebenen überspringen. Die Hauptüberschrift ist h1.

              hr ist nicht richtig, denn dieses Element trennt Inhalte. Eine Überschrift soll aber nicht vom nachfolgenden Inhalt getrennt werden. Wenn visuell du eine horizontale Linie möchtest, ist diese mit CSS umzusetzen: als border-bottom der Überschrift.

              h4 ist falsch; du darfst keine Überschriftsebenen überspringen. Nach h2 käme h3; nach h1 käme h2. Hier handelt es sich aber überhaupt nicht um eine Überschrift; das ist Text: p.

              Der gehört zusammen mit der Überschrift zum Kopf des Dokuments: header:

              <body>
                <header>
                  <h1>Rustication (architecture)</h1>
                  <p>From Wikipedia, the free encyclopaedia</p>
                </header>
              

              Wenn die Bilder vom Text umflossen werden sollen (float), müssen sie im HTML vor dem Text stehen.

              Zur Gruppierung von Bild und Bildunterschrift bietet sich das figure-Element an; die Bildunterschrift ist figcaption. Damit die Bildunterschrift nicht breiter wird als das Bild, wird die Breite des figure-Element gesetzt, min-content wäre der passende Wert, aber wenn’s auch in IE/Edge funktionieren soll: auf feste Breite, die ja durch die Bildbreite gegeben ist.

              Die figure-Elemente bekommen über ihre ID float: right bzw. left verpasst. (Ginge auch über eine entsprechende Kennzeichnung im Markup (Klasse oder anderes Attribut wie data-align), aber die Darstellung sollte nicht im HTML stehen.) Damit zwei aufeinanderfolgende figure-Elemente nicht nebeneinander, sondern untereinander dargestellt werden, bekommen sie auch entsprechendes clear mit.

              Der neben den Bildern fließende Text braucht natürlich eine gewisse Breite, also wird das float per media query erst angewandt, wenn genügend Platz vorhanden ist.

              Sieht dann so aus.

              LLAP 🖖

              PS: Und jetzt erklär mal bitte, wie „dass es … bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt“ im OP gemeint war. Willst du doch nicht die Bilder vom umfließen lassen, d.h. dein Screenshot stellte gar nicht das Gewünschte dar?

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hej Gunnar,

                @@Yadgar

                PS: Und jetzt erklär mal bitte, wie „dass es … bei den vertikalen Positionierungen der Absätze nicht zu Überschneidungen kommt“ im OP gemeint war. Willst du doch nicht die Bilder vom umfließen lassen, d.h. dein Screenshot stellte gar nicht das Gewünschte dar?

                Vielleicht sollen die Bilder immer neben einem bestimmten Abstand stehen? Dann natürlich nicht alles in eine Spalte, sondern jedes figure-Element jeweils vor den Absatz, neben dem es stehen bleiben soll.

                Warum hat @Gunnar Bittersmann ja bereits erklärt, der sich sehr viel Mühe mit Deinem Code gegeben hat!

                Marc

              2. Hi(gh)!

                Du willst nicht „Text mit zweispaltigem Satz formatieren“, sondern die Bilder vom Text umfließen lassen?

                Wäre auch eine Möglichkeit - aber in der Original-Wikipedia sind Text und Bilder (zumindest in dem englischen "Rustication"-Artikel, um den es hier geht) in zwei Spalten getrennt.

                Und hier ein Stück Code dazu:

                <body>
                  <h2>Rustication (architecture)</h2>
                  <hr>
                  <h4>From Wikipedia, the free encyclopaedia</h4>
                

                h2 ist falsch; du darfst keine Überschriftsebenen überspringen. Die Hauptüberschrift ist h1.

                Auweia... die Religionspolizei der HTML-Orthodoxie hat mich am Wickel!

                Warum bitte "darf ich das nicht"? Soll mein Text primär von Menschen oder von Computern gelesen werden? Lokal auf meinem Rechner?!? Ich verstehe ja, dass Suchmaschinen es mit streng richtlinienkonform gecodeten Seiten leichter haben... aber abgesehen davon, dass es mit solchen orthodox strukturierten Quelltexten auch jegliche Form automatisierter Internetüberwachung leichter hat, interessiert es Google und Komplizen einen Dreck, was ich lokal auf meiner Festplatte habe!

                Ich will auch am Computer Mensch bleiben! Unberechenbar!

                hr ist nicht richtig, denn dieses Element trennt Inhalte. Eine Überschrift soll aber nicht vom nachfolgenden Inhalt getrennt werden. Wenn visuell du eine horizontale Linie möchtest, ist diese mit CSS umzusetzen: als border-bottom der Überschrift.

                Sprach der Mufti von Mozillabad!

                Ich glaube, ich bin raus hier…

                Uärgl!

                Yadgar

                1. Hallo,

                  Ich glaube, ich bin raus hier…

                  Uärgl!

                  *Häkchenaufgunnarsvergrämlistesetz*

                  Gruß
                  Kalk

                  1. Hej Tabellenkalk,

                    Ich glaube, ich bin raus hier…

                    Uärgl!

                    *Häkchenaufgunnarsvergrämlistesetz*

                    Er hatte aber mit jedem Punkt recht und ich hatte auch schon überlegt, dasselbe zu schreiben - hatte aber bemerkt, dass es nur um das lokale private Abspeichern ging.

                    Auch ist @Gunnar Bittersmann nirgendwo ausfällig oder auch nur unfreundlich geworden. Der Ausfall von Yadgar empfinde ich als absolut unangemessen. Er enthält rassistische (Mufti) und persönliche Beleidigungen und endet mit einem absolut kindischen Uärgl!

                    Da habe ich lieber einen Gunnar im Forum als 100 Spinner, die erst Hilfe für eine ordentliche Darstellung wollen und dann extremst ausrasten, wenn sie genau dafür Tipps bekommen!

                    Marc

                2. Hej Yadgar,

                  Auweia... die Religionspolizei der HTML-Orthodoxie hat mich am Wickel!

                  Nein, das sind Hinweise voller Empathie. @Gunnar Bittersmann hat immer alle möglichen Nutzer im Blick. Für alle Nutzer ist ein sauberes HTML ein Gewinn, für viele unbedingte Voraussetzung, eine Webseite benutzen zu können.

                  Warum bitte "darf ich das nicht"? Soll mein Text primär von Menschen oder von Computern gelesen werden?

                  Von Menschen, sonst wäre es ja Wurscht.

                  Lokal auf meinem Rechner?!?

                  Vielleicht hättest du dich von Anfang an klarer ausdrücken sollen - du wurdest ja mehrfach dazu aufgefordert? Das habe ich auch beinahe übersehen und es kam erst in Deinem letzten Posting aus der Nase gezogen hervor…

                  Ich verstehe ja, dass Suchmaschinen es mit streng richtlinienkonform gecodeten Seiten leichter haben... aber abgesehen davon, dass es mit solchen orthodox strukturierten Quelltexten auch jegliche Form automatisierter Internetüberwachung leichter hat, interessiert es Google und Komplizen einen Dreck, was ich lokal auf meiner Festplatte habe!

                  Google interessiert alles und sie sind Weltmeister im Aufbereiten unstrukturierter Daten. Firmen mit weniger Geld und Forschungsmöglichkeiten wie die Hersteller von Assistenz-software für Menschen mit Behinderungen, die statt auf Deep-Learning-Serverfarmen nur auf die Ressourcen des lokalen Rechners zugreifen können, sind dagegen auf sauber strukturierte Dokumente zugunsten der Nutzerfreundlichkeit und Bedienbarkeit in weitaus höherem Maß angewiesen.

                  Mit sauberem HTMl unterstützt du also Menschen - Maschinen brauchen das nicht (mehr)…

                  Ich will auch am Computer Mensch bleiben! Unberechenbar!

                  Dann schreib doch dein html irgendwie und lebe mit einem unberechenbaren Browserverhalten - keine Ahnung, warum du dann hier Fragen stellst?

                  Unberechenbar war es doch vorher schon? - Du hast dich aber mit dem Wunsch an uns gewendet, die Darstellung Deiner Daten vorhersehbar zu verbessern.

                  hr ist nicht richtig, denn dieses Element trennt Inhalte. Eine Überschrift soll aber nicht vom nachfolgenden Inhalt getrennt werden. Wenn visuell du eine horizontale Linie möchtest, ist diese mit CSS umzusetzen: als border-bottom der Überschrift.

                  Sprach der Mufti von Mozillabad!

                  Ich glaube, ich bin raus hier…

                  Uärgl!

                  Jetzt verstehe ich auch, warum viele von Anfang an so gereizt auf Dein Posting reagiert haben. die kannten dich wohl schon? Ziemlich unverschämt die Verbesserungsvorschläge, die einiges an Zeit gekostet haben (nicht umzusetzen, das macht Gunnar mit links, aber zu erklären, warum das wichtig ist) mit Beleidigungen abzutun. Wenn du hier raus bist, bin ich nach diesem Ausfall jedenfalls nicht böse drum!

                  Das war eine echte Frechheit. Vor dem nächsten Posting bitte erst die Nettiquette lesen und verstehen - danke!

                  Marc

                3. @@Yadgar

                  Soll mein Text primär von Menschen oder von Computern gelesen werden?

                  Von Menschen. Und zwar von allen. Deshalb ist u.a. eine richtige Überschriftstruktur wichtig – und zwar nicht nur visuell, sondern auch im Code.

                  Lokal auf meinem Rechner?!?

                  Ich sehe keinen Sinn darin, an der Stelle einen Unterschied zu machen. Warum sollte man für sich selbst schlechtes HTML schreiben und für andere gutes?

                  Außerdem bist du hier nicht alleine im Forum; hier lesen auch andere mit. Schon deshalb gehört fehlerhafter Code korrigiert. Auch wenn du tausendmal schreist „Lokal! Nur für mich!“ Nein, das ist es nicht.

                  Übrigens kann dir morgen ein Stein auf den Kopf fallen und dann brauchst auch du barrirefreie Webseiten. Gut, wenn deine das heute schon sind.

                  Ich will auch am Computer Mensch bleiben! Unberechenbar!

                  Du könntest erstmal damit anfangen, unberechenbar zu werden. Zum Beispiel uns mit einer nachvollziehbaren Problembeschreibung überraschen.

                  Aber das ist wohl zu viel verlangt; du wirst auch beim nächten Mal wieder nicht in der Lage sein, dich verständlich auszudrücken.

                  Hauptsache, hier das Maul aufreißen und rummotzen!

                  Ich glaube, ich bin raus hier…

                  Mir kommen Tränen. Nicht.

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. Hi(gh)!

                    Von Menschen. Und zwar von allen. Deshalb ist u.a. eine richtige Überschriftstruktur wichtig – und zwar nicht nur visuell, sondern auch im Code.

                    O.k., das mit der automatischen behindertengerechten (ich bin doch tatsächlich so ein politisch unkorrektes Arrrrrschloch und schreibe "behindertengerecht" statt "barrierefrei"!) Anpassung wusste ich nicht - ich dachte wirklich, es ginge nur darum, Großkonzernen und Geheimdiensten die Arbeit zu erleichtern!

                    Außerdem bist du hier nicht alleine im Forum; hier lesen auch andere mit. Schon deshalb gehört fehlerhafter Code korrigiert. Auch wenn du tausendmal schreist „Lokal! Nur für mich!“ Nein, das ist es nicht.

                    O. k., das ist natürlich Spitzen-Programmierer-Ethos, so professionell bin ich bis auf weiteres (noch) nicht!

                    Übrigens kann dir morgen ein Stein auf den Kopf fallen und dann brauchst auch du barrirefreie Webseiten. Gut, wenn deine das heute schon sind.

                    Wenn dadurch mein Gehirn derart geschädigt wird, dass mein IQ auf einen Bruchteil zusammenschnurrt, nützt mir "Rustication" in barrierefreiem Code auch nichts mehr, weil ich dann weder Englisch noch sonst irgendeine Sprache mehr verstehe!

                    Bis bald im Khyberspace!

                    Yadgar

                  2. Hi(gh)!

                    Es geht mir außerdem darum, möglichst kompakten Code zu schreiben, der - ich bin begeisterter Retrocomputerist - überall läuft, und sei es auf einem rumpeligen alten 386er unter Netscape 1.0 oder gar einem Commodore 64 oder Atari ST. Ich sehe im Erhalt sogenannter klassischer Computer auch einen Akt der Wertschätzung gegenüber den Entwicklern, Programmierern, Technikern und Arbeitern, die vor 25, 30 und noch mehr Jahren die Grundlagen für alles das gelegt haben, was wir heute für selbstverständlich halten.

                    Und wenn ihr mir jetzt erzählt, ich bräuchte, um in einer Spalte Text und der anderen Bilder darzustellen, unbedingt CSS Flexbox oder irgendeine andere moderne Erweiterung (die, vermute ich mal, auch nur auf aktueller Hardware funktioniert), aber dürfte unter Androhung weltweiter Ächtung durch alle echten Webprogrammierer (tm) niemals nicht unter keinsten Umständen Tabellen zu Layoutzwecken verwenden, fühle ich mich in meinen Vorurteilen gegenüber echten Webprogrammierern (tm) bestätigt...

                    1. @@Yadgar

                      Es geht mir außerdem darum, möglichst kompakten Code zu schreiben, der - ich bin begeisterter Retrocomputerist - überall läuft, und sei es auf einem rumpeligen alten 386er unter Netscape 1.0 oder gar einem Commodore 64 oder Atari ST.

                      Da hab ich eine gute Nachricht für dich: HTML und CSS sind vom Konzept her schon so, dass moderner Code auch auf Uralt-Maschinen läuft. Bitteschön.

                      Und wenn ihr mir jetzt erzählt, ich bräuchte, um in einer Spalte Text und der anderen Bilder darzustellen, unbedingt CSS Flexbox oder irgendeine andere moderne Erweiterung (die, vermute ich mal, auch nur auf aktueller Hardware funktioniert), aber dürfte unter Androhung weltweiter Ächtung durch alle echten Webprogrammierer (tm) niemals nicht unter keinsten Umständen Tabellen zu Layoutzwecken verwenden, fühle ich mich in meinen Vorurteilen gegenüber echten Webprogrammierern (tm) bestätigt...

                      Du laberst Unsinn.

                      Tabellenlayout war schon immer ein Hack, keine Lösung. Die Anwendung war dem geschuldet, dass es damals keine Lösung gab. Floats zum Lauouten waren schon immer ein Hack … Heute gibt es Lösungen („moderne Erweiterungen“) und keinen Grund, diese nicht zu verwenden.

                      Du kannst ja weiter Tabellenlayout machen, nur widersprichst du dir damit selber: du willst „möglichst kompakten Code schreiben“. Tabellenlayout ist das Gegenteil davon. Und außerdem untauglich, auf die verschiedenen Gegebenheiten zu reagieren, die bei den Nutzern heutzutage vorliegen.

                      LLAP 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                      1. Hi(gh)!

                        @Gunnar Bittersmann:

                        Da hab ich eine gute Nachricht für dich: HTML und CSS sind vom Konzept her schon so, dass moderner Code auch auf Uralt-Maschinen läuft. Bitteschön.

                        Dann sind wir uns in der Hinsicht ja schon einmal einig, dass Abwärtskompatibilität im Prinzip eine gute Sache ist...

                        Tabellenlayout war schon immer ein Hack, keine Lösung. Die Anwendung war dem geschuldet, dass es damals keine Lösung gab. Floats zum Lauouten waren schon immer ein Hack … Heute gibt es Lösungen („moderne Erweiterungen“) und keinen Grund, diese nicht zu verwenden.

                        Ältere HTML-Standards (und damit auch ältere Browser) unterstützen noch kein CSS, da musste man z. B. auf Tabellen-Layout zurückgreifen... nur: läuft denn der aktuelle z. B. Firefox auf einem 386er, ohne dass der Rechner derart ausgebremst wird, das nicht einmal mehr vertikales Scrolling funktioniert? Für den Atari ST oder gar C 64 muss man natürlich die Browser völlig neu entwickeln...

                        Du kannst ja weiter Tabellenlayout machen, nur widersprichst du dir damit selber: du willst „möglichst kompakten Code schreiben“. Tabellenlayout ist das Gegenteil davon.

                        Stimmt, das sind eine ganze Menge Tags... aber dafür ist es für mich (zum gegenwärtigen Zeitpunkt) leichter verständlich als raffinierte CSS-Konstruktionen!

                        Und außerdem untauglich, auf die verschiedenen Gegebenheiten zu reagieren, die bei den Nutzern heutzutage vorliegen.

                        Auf einem Nostalgie-Computer der 80er oder frühen 90er Jahre werden die meisten dieser Gegebenheiten aber nicht vorkommen - Multimedia-Tschingbumm ist zum Beispiel nicht drin, die 8- und 16-bit-CPUs schaffen das schlicht nicht, und die modernen Riesen-Auflösungen kriegt eine typische ISA-Grafikkarte von anno dazumal auch nicht gestemmt.

                        Bis bald im Khyberspace!

                        Yadgar

                        1. @@Yadgar

                          Da hab ich eine gute Nachricht für dich: HTML und CSS sind vom Konzept her schon so, dass moderner Code auch auf Uralt-Maschinen läuft. Bitteschön.

                          Dann sind wir uns in der Hinsicht ja schon einmal einig, dass Abwärtskompatibilität im Prinzip eine gute Sache ist...

                          Ja. Wenn denn die Einigkeit auch darin besteht, dass Webseiten auf Uralt-Maschinen anders aussehen dürfen (ich würd glatt sagen: müssen) als auf heutigen Geräten in modernen Browsern.

                          Ältere HTML-Standards (und damit auch ältere Browser) unterstützen noch kein CSS, da musste man z. B. auf Tabellen-Layout zurückgreifen... nur: läuft denn der aktuelle z. B. Firefox auf einem 386er, ohne dass der Rechner derart ausgebremst wird, das nicht einmal mehr vertikales Scrolling funktioniert? Für den Atari ST oder gar C 64 muss man natürlich die Browser völlig neu entwickeln...

                          Wenn man denn einen Webbrowser auf Atari ST oder gar C 64 laufen lassen möchte, dann wohl einen reinen Textbrowser wie Lynx. Und dafür braucht man kein Tabellenlayout.

                          Du kannst dich natürlich hinsetzen und einen GUI-Browser für Atari ST oder gar C 64 entwickeln. Ich würde die Zeit in anderes investieren – beispielsweise ins Erlernen von CSS Grid.

                          aber dafür ist es für mich (zum gegenwärtigen Zeitpunkt) leichter verständlich als raffinierte CSS-Konstruktionen!

                          Das Gute an CSS Grid ist, dass es sowohl raffiniert als auch recht leicht verständlich ist.

                          LLAP 🖖

                          --
                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                    2. Hej Yadgar,

                      Es geht mir außerdem darum, möglichst kompakten Code zu schreiben, der - ich bin begeisterter Retrocomputerist - überall läuft, und sei es auf einem rumpeligen alten 386er unter Netscape 1.0 oder gar einem Commodore 64 oder Atari ST.

                      Kein Problem - aber ich fange jetzt nicht wieder von vorne an, nur weil du wesentliche Infos erst nach einer Woche rausrückst. Außerdem scheinst du ja zu wissen, wie es geht (Layout-Tabellen).

                      Deswegen hat @Gunnar Bittersmann trotzdem recht mit den Übeschriften-Ebenen, hrnur zum trennen von Elementen einzusetzen und so weiter…

                      Das ist schon seit HTML 1.0 so!

                      Marc

            3. @@Yadgar

              Es geht mir darum, die unzähligen lokal abgespeicherten Wikipedia- und sonstigen WWW-Seiten in eine möglichst einfache Form ohne "Overhead" zu bringen, auf die Kerninformation reduziert - aber so, dass ich jede dieser vereinfachten Seiten auch auf unterschiedlichen Systemen in lesbarer Form darstellen kann!

              Du willst V for Wikipedia.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. Hi(gh)!

      Ich habe zwischenzeitlich mal ein bisschen gegoogelt... und dabei das hier gefunden. Der reine Zweispaltensatz klappt damit gut (siehe Bild):

      EDIT reparierter Link: das hier

      Bildbeschreibung

      Das Problem ist jetzt: wie bringe ich die Kapitelüberschrift dazu, mit ihrem Rahmen (hier noch <hr>, wird aber geeändert) sich über die ganze Breite zu erstrecken und unter der Bildspalte zu liegen zu kommen?

      Der Code:

          <div id="LinkeSpalteText">
            <p>
      	In classical architecture rustication is a range of masonry techniques giving visible surfaces a finish that contrasts in texture with the smoothly finished, squared-block masonry surfaces called ashlar. The visible face of each individual block is cut back around the edges to make its size and placing very clear. In addition the central part of the face of each block may be given a deliberately rough or patterned surface.[1]
            </p>
            <p>
      	Rusticated masonry is usually "dressed", or squared off neatly, on all sides of the stones except the face that will be visible when the stone is put in place. This is given wide joints that emphasize the edges of each block, by angling the edges ("channel-jointed"), or dropping them back a little. The main part of the exposed face may worked flat and smooth or left or worked with a more or less rough or patterned surface. Rustication is often used to give visual weight to the ground floor in contrast to smooth ashlar above. Though intended to convey a "rustic" simplicity, the finish is highly artificial, and the faces of the stones often carefully worked to achieve an appearance of a coarse finish.[2]
            </p>
            <p>
      	Rustication was used in ancient times, but became especially popular in the revived classical styles of Italian Renaissance architecture and that of subsequent periods, above all in the lower floors of secular buildings. It remains in use in some modern architecture.
            </p>
            <p>
      	Similar finishes are very common in medieval architecture, especially in castles, walls and similar buildings, but here it merely arises from an unwillingness to spend the extra money required for ashlar masonry in a particular building, and lacks the deliberate emphasis on the joints between blocks. Though it often achieves a decorative effect, this is something of a by-product, and the exploitation for architectural effect within a single building of contrasts between rusticated and ashlar surfaces is rarely seen. In some buildings, such as the Palazzo Vecchio in Florence (begun 1298) something other than cost-saving is at play, and this may be the association of the technique with the display of power and strength, from its use in military architecture.[3] Rough finishes on stone are also very common in architecture outside the European tradition, but these too would generally not be called rustication. For example, the bases of Japanese castles (城, shiro) and other fortifications usually use rough stone, often very attractively.
            </p>
          </div>
          <div id="RechteSpalteBild">
            <p>
      	<img src="220px-Palazzo_medici_riccardi_bugnato_01.jpg" alt="Palazzo Medici-Riccardi" width="220" height="293"><br>
      	Two different styles of rustication in the Palazzo Medici-Riccardi in Florence; smooth-faced above and rough-faced below.
            </p>
            <p>
      	<img src="220px-Chteau_de_Fontainebleau_2011_200.jpg" alt="Chateau de Fontainebleau" width="220" height="165"><br>
      	Extreme Mannerist "cyclopian" rustication at the Palace of Fontainebleau
            </p>
          </div>
          <div class="ch">
            <h3>History</h3>
            <hr>
          </div>
      

      und:

      p, td, h2, h3, h4 { font-family:Arial,sans-serif; line-height:150% }
      
      td { padding:5px }
      tr.t { text-align:left }
      tr.i { text-align:center }
      
      
      div.tl { position:relative; width:75%; float:left }
      div.tr { position:relative; width:75%; float:right }
      div.il { position:relative; width:20%; float:left }
      div.ir { position:relative; width:20%; float:right }
      div.ch { width:100% }
      div.tab { width:100% }
      
      #LinkeSpalteText { background-color:#ddddff; width:75%; float:left }
      #RechteSpalteBild { background-color:#ffdddd; width:20%; margin-left:5%; float:right }
      #LinkeSpalteBild { background-color:#ddddff; width:20%; margin-right:5%; float:left }
      #RechteSpalteText { background-color:#ffdddd; width:75%; float:right }
      

      Bis bald im Khyberspace!

      Yadgar

      1. @@Yadgar

        Ich habe zwischenzeitlich mal ein bisschen gegoogelt... und dabei das hier gefunden.

        404 – nichts gefunden. (EDIT Der Link wurde nachträglich repariert)

        Du hättest das hier finden sollen: Grid by Example.

        Und das hier: Native CSS Grid Layouts ohne Framework – ein einfaches Beispiel.

        Und das hier: A Complete Guide to Grid.

        Der reine Zweispaltensatz klappt damit gut (siehe Bild):

        Floats zum Layouten sind ein Hack.

        Das Problem ist jetzt: wie bringe ich die Kapitelüberschrift dazu, mit ihrem Rahmen (hier noch <hr>, wird aber geeändert) sich über die ganze Breite zu erstrecken und unter der Bildspalte zu liegen zu kommen?

        Ganz einfach.

        Der Code:

        Was soll man damit? Online-Beispiel, bitte.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Ach, ist das kompliziert, ist das kompliziert, ist das kompliziert!

          So, ich mache jetzt Tabellen-Layout, das verstehe ich wenigstens!

          Und tschüss!

          1. @@Yadgar

            Ach, ist das kompliziert, ist das kompliziert, ist das kompliziert!

            So, ich mache jetzt Tabellen-Layout, das verstehe ich wenigstens!

            Dir ist nicht zu helfen.

            Schade um die Zeit.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. Hallo

        Ich habe mal ein Beispiel erstellt wie ich die Seite erstellen würde. Du kannst ja mal schauen in wie weit dir das zusagt:

        Mein Beispiel

        Das gesamte CSS befindet sich im head-Bereich der Datei.

        Gruss

        MrMurphy

        1. Ach, ist das kompliziert, ist das kompliziert, ist das kompliziert!

          Ich mach jetzt Tabellenlayout, das verstehe ich wenigstens!

          Und tschüss!