Layout CSS statt Tabellen

    Hallo,

    wie kann ich das Layout von folgender Seite statt mit einer Tabelle moderner mit CSS gestalten:


    Oder ist hier das Tabellenlayout ohnehin die bessere Wahl.

    Danke für die Hilfe.

    LG aus Österreich.

    Spider67

    Einmal editiert, zuletzt von Arne Drews (13. September 2018 um 16:03) aus folgendem Grund: MOD: HTML-Tags eingefügt

    Das kann man in etwas so machen
    https://basti1012.bplaced.net/index.php?ordn…_statt_Tabellen

    Dann noch etwas @mediaqueries dazu und man könnte es perfekt machen.
    Wie man sieht ordnen sich die alle automatisch an egal wie groß der Bildschirm ist. Das ist mit Tabellenlayout nur schwer möglich .

    Zitat von Spider67

    Also ich bin zufrieden damit.


    Das mag sein, das hat aber vermutlich damit zu tun, dass du dich nicht besonders gut mit HTML und CSS auskennst. Wenn ich z.B. sowas sehe

    HTML
    <td width="279" align="center" valign="middle">


    dann weiß ich, was ich von dem Programm zu halten habe. Dreamweaver war aber schon immer etwas buggy

    Ich habe das auch nie gelernt und mir alles selbst beigebracht. Dafür - so denke ich - ist unser Internetauftritt doch gar nicht mal so schlecht. Vor allem erfüllt er alles, was wir brauchen, und das genügt uns halt mal.

    Dass ein Profi, die Seite anders gestalten würde, ist mir auch klar. Ich jedoch mach das als Hobby und nur nebenbei.

    Und zu Deinem Codebeispiel von oben: Die Seiten wurden teilweise vor mehr als 10 Jahren gestaltet und da war dieses Layout meines Wissens durchaus noch üblich.

    Um es moderner zu gestalten habe ich ja auch nach Alternativen gefragt, ich will das ja nicht nur aus Langeweile oder zum Spaß ändern. Soviel Zeit habe ich leider nicht.

    Einmal editiert, zuletzt von Spider67 (14. September 2018 um 09:53)

    19 Fehler auf der Startseite. Ist aber in erster Linie wegen dem Framelayout und mir hinlänglich bekannt. Wie gesagt ich arbeite an der Modernisierung des Layouts, aber so nebenbei geht das nicht von heute auf morgen.

    Sind aber auch viele Seiten dabei, die gar keine Fehler aufweisen - wie schon gesagt - ich denke für einen Layen und Autodidakten gar nicht so schlecht, oder??

    Hallo,
    ich habe mal das Flex Layout ausprobiert:

    Folgendes Beispiel habe ich zu testen versucht:
    <!doctype html>
    <html>
    <head>
    <!-- Kommentar -->
    <title>CSS3 Flexbox flex-direction row</title>
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    div {
    border: 1px solid #960;
    }
    #wrapper {
    display: flex;
    flex-direction: row;
    background-color: #EAFF11;
    }
    #wrapper div {
    background-color: #AE3AC8;
    margin: 0.5em;
    padding: 0.5em;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div>
    <p>div 1</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
    </div>
    <div>
    <p> div 2</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    </div>
    <div>
    <p> div 3</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    </div>
    </body>
    </html>


    Die Seite wird mir jedoch mit den Flex Items untereinander angezeigt und nicht nebeneinander in einer Reihe, wie ich das eigentlich laut Beispiel programmiert habe.

    Woran liegt das?

    Danke für Eure Hilfe.

    Habe dein Code eins zu eins Kopiert und in codepen eingegeben , und wie du siehst ist es alles in einer reihe.So wie du es möchtest.

    https://basti1012.bplaced.net/index.php?ordn…_statt_Tabellen

    Da fällt mir nur noch cache löschen ein. Hast du mal einen anderen Browser getestet?
    Wird das den bei Codepen ( Mein Link ) den richtig angezeigt bei dir ?

    Hallo,

    es wird in jedem Browser korrekt angezeigt, nur in der Vorschau in Dreamweaver nicht. Das dürfte also wirklich am Programm liegen??

    Danke für Deine Hilfe.