Frage Zu <Table>,<td> und <tr>

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
Werbung:

Runshak

Mitglied
7 April 2020
75
3
8
31
Deine Navigation ist in einem festen grid. Es wäre besser, wenn du das in einen Nav container legst und nicht nur für eine Desktopbildschirmgröße passend machst. Auf kleinen Bildschirmen wird deine Navigation immer abgeschnitten.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Da gibt es noch mehr, was diskussionswürdig ist:
  • Immer noch eine Inflation von Containern, vor allem der äußerste ist sinnfrei mit dem CSS:
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  • Gridlayout für die Navigation, main und footer ist semantisch unpassend, da die Elemente nur eindimensional angeordnet sind. Besser Flex verwenden.
  • Wenig sinnvoll, alles über eine Kamm zu scheren und allen Containern das selbe CSS zuzuweisen.
  • Es werden fast keine semantische Tags verwendet.
 
Werbung:

Alois

Mitglied
23 Januar 2021
96
0
6
Deine Navigation ist in einem festen grid. Es wäre besser, wenn du das in einen Nav container legst und nicht nur für eine Desktopbildschirmgröße passend machst. Auf kleinen Bildschirmen wird deine Navigation immer abgeschnitten.
Klingt plausibel, aber soweit bin ich wohl noch lange nicht mit meinem Wissen, wie man das macht... :-(
 

Alois

Mitglied
23 Januar 2021
96
0
6
Da gibt es noch mehr, was diskussionswürdig ist:
  • Immer noch eine Inflation von Containern, vor allem der äußerste ist sinnfrei mit dem CSS:
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  • Gridlayout für die Navigation, main und footer ist semantisch unpassend, da die Elemente nur eindimensional angeordnet sind. Besser Flex verwenden.
  • Wenig sinnvoll, alles über eine Kamm zu scheren und allen Containern das selbe CSS zuzuweisen.
  • Es werden fast keine semantische Tags verwendet.
Ich bin eben Anfänger und verwende die meisten Dinge nach Peter Müllers Buch.
 

Alois

Mitglied
23 Januar 2021
96
0
6
Für mich als Autodidakten wäre es wesentlich leichter zu begreifen, wenn mir mal jemand eine meiner Seiten, auf der vieles zu verbessern wäre, runterlädt, umschreibt und mir dann zeigt.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Gern, ich habe mal die grundsätzliche Struktur neu aufgebaut, die Feinheiten kannst Du dann selber wieder hinzu fügen. Vor allem bei der unteren Navigation.
Leider ist unter https://aquarienfische.info/index.html die originale Version nicht mehr vorhanden, daher wusste ich nicht bei allem, wie Du dir das vorstellst.
Möglicher Weise ist ein Grund für die Verständnisprobleme, dass Du mit Grid einen Ansatz gewählt hast, der auf dein Layout nicht passt. Dadurch ist es dann nicht selbst erklärend und nicht intuitiv zu handhaben.
Das CSS kannst Du selbstverständlich wieder auslagern, ich habe es nur zum Test in der HTML-Seite.
Code:
<!DOCTYPE html>
<html>
<html lang="de">

<head>
    <meta charset="utf-8" />
    <title>
        Aquarienfische
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet" />
    <style>
        body {
            background-image: url(https://aquarienfische.info/BILDER/neons.jpg);
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        nav ul {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            list-style-type: none;
            background-color: lightgrey;
        }

        nav.top-nav li {
            padding: 0.5em;
            margin: 0.5em;
            border-width: 1px;
            border-Style: solid;
            border-Color: White Slategray Slategray White;
            white-space: nowrap;
        }

        main {
            margin-top: 0.5em;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80%;
            background-color: lightgrey;
        }

        img.img-neons {
            width: 80%;
            height: auto;
        }

        section.with-border {
            width: 80%;
            text-align: center;
            Border-Color: White Slategray Slategray White;
            Border-Width: 1px;
            Border-Style: solid;
            margin-bottom: 1em;
            padding: 0 0.5em;
        }
    </style>
</head>

<body>
    <nav class="top-nav">
        <ul>
            <li><a href="Seiten/fische.html">Fische</a></li>
            <li><a href="Seiten/anderes.html">Andere Bewohner</a></li>
            <li><a href="Seiten/zuchtzwei.html">Zucht</a></li>
            <li><a href="Seiten/futter.html">Futter und Pflanzen</a></li>
            <li><a href="Seiten/besonderes.html">Besonderes</a></li>
            <li><a href="Seiten/probleme.html">Probleme</a></li>
            <li><a href="Seiten/reste.html">Reste</a></li>
            <li><a href="Seiten/aktuelles.html">Aktuelles</a></li>
        </ul>
    </nav>
    <main>
        <img src="https://aquarienfische.info/BILDER/seeimglas1.gif" alt="Bild verschwunden? ;-)">

        <img class="img-neons" src="https://aquarienfische.info/BILDER/neons.jpg">


        <p>Alle Fotos<Br> &copy; by Klaus Dreymann</p>
        <p>Online seit 18.02.1999</p>
        <section class="with-border">
            <p> Der See im Glas ist kein Lexikon mit aufgelisteten Zahlen, Daten und Fakten.</p>
            <p>Es geht hier um Erlebnisse mit vielen Fischarten,<br>
                über deren Aquarienwelten, und manchmal über deren Zucht.
            </p>
        </section>

        <section class="with-border">
            <p>"Der See im Glas"</p>
            <p>- so hieß mal ein Aquariumbuch von Wolf Durian in den fünfziger Jahren - das wichtigste und
                schönste
                Aquarienbuch, das ich je gelesen habe...</p>
            <p>Dieses Buch stand in seiner Erzähltechnik und der damit verbundenen Begeisterung,
                die es bei mir hervorrief, den anderen Abenteuerbüchern "Die Schatzinsel" und "Der letzte
                der
                Mohikaner"
                in nichts nach - es war genauso spannend!</p>
            <p>Wenn ich mal wieder ein oder zwei Kapitel verschlungen hatte, musste ich unbedingt danach in
                eine
                Aquarienhandlung gehen und mit großen Augen die bunten, hin- und herschwimmenden Fische
                betrachten
                und suchen, ob darunter vielleicht einer der Fische war, über den ich gerade eine spannende
                Geschichte gelesen hatte.</p>
            <p>Die Zoohändler der damaligen Zeit kannten das alle, dass da oft mal mit dem Klingeln des
                Türglöckchens ein paar Jungen
                hereinkamen mit dem Satz "Wir wollen nur mal kucken".</p>
            Ich rieche heute noch den Geruch der Vogelhirse wenn ich dann in das Dunkel der vielen
            kleinen
            Welten unter ihren
            Neonlampen eintauchte...
        </section>
    </main>
    <!-- Zeile für den Footer -------------------------------------------------------------------------------------------------------->
    <footer>
        <div class="copyright">
            Copyright &copy; <time datetime="2021">2021</time>
        </div>
        <nav class="meta-nav">
            <ul>
                <li><a href="seiten/impressum.html">Impressum</a></li>
                <li><a href="seiten/datenschutzerklaerung.html">Datenschutz</a></li>
                <li><a href="#top">Nach oben</a></li>
                <li><a href="https://aquarienfische.info/index.html">Startseite</a></li>
            </ul>
        </nav>
    </footer>
</body>

</html>
 
Zuletzt bearbeitet:
Werbung:

Alois

Mitglied
23 Januar 2021
96
0
6
Leider hat mir die Zeit gefehlt, Kommentare hinzu zu fügen. Wenn Du etwas nicht versteht, dann frage.
Was macht denn den Unterschied zwischen div class und nav class? Und wie kriege ich das Titelbild mit ganz bestimmten Maßen ( Width=570 Height=400 ) hin. Ansonsten bin ich zwischendurch immer wieder am basteln mit deiner Vorlage...
Ich habe ja oft große Tabellen. Da weiß ich noch nicht, was ich dazu nehmen sollte (siehe hier: https://aquarienfische.info/seiten/zuchtzwei.html) Es sieht zumindest so aus, wie es soll.
 

Alois

Mitglied
23 Januar 2021
96
0
6
Was mich aber am meisten irritiert ist, dass es für ein bestimmtes Layoutergebnis mindestens drei verschiedene Befehle (oder wie das heißt?) gibt, (z.B. grid, nav, container, table usw.., ich aber die unterschiedlichen Funktionen nicht weiß.
 

m.scatello

Senior HTML'ler
15 Februar 2017
1.533
183
63
Nur mal so:

wenn mir mal jemand eine meiner Seiten, auf der vieles zu verbessern wäre, runterlädt, umschreibt und mir dann zeigt.
Das ist aber nicht der Sinn von Foren, denn es in Foren Hilfe zur Selbsthilfe. Diese "Wer macht mir mal"-Mentalität wird in manchen Foren sogar mit einem "Closed" belohnt. Ich verstehe auch nicht, warum manche Leute immer wieder fertige, bzw. fast fertige Lösungen liefern. Mit Copy/Paste haben die aller wenigsten was gelernt.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Was macht denn den Unterschied zwischen div class und nav class?
Vermutlich meinst Du nicht "class" sondern "tag", also div-Tag und nav-Tag. div ist ein allgemeiner Container ohne semantische Bedeutung während nav ein semantisches Tag ist. Siehe z. B. hier:
und hier:

Was mich aber am meisten irritiert ist, dass es für ein bestimmtes Layoutergebnis mindestens drei verschiedene Befehle (oder wie das heißt?) gibt, (z.B. grid, nav, container, table usw.., ich aber die unterschiedlichen Funktionen nicht weiß.
Das liegt daran, dass es unterschiedliche Layoutmuster gibt, also z. B. Tabelle, Grid bzw. Gitter und eine zweidimensionale Anordnung, die man mit Flexlayout gestaltet. Richtig verwirrend wird es, wenn man ein Layoutwerkzeug für einen Zweck verwendet, für den es nicht geeignet ist, wie früher das Tabellenlayout oder float oder, wie in diesem Fall, Grid für ein Layout, bei dem es kein Gitter gibt sondern Elemente in zweidimensionaler Anordnung.
Richtig erschließen tut sich das erst, wenn man die einzelnen Werkzeuge kennen lernt.
 

Alois

Mitglied
23 Januar 2021
96
0
6
Nur mal so:


Das ist aber nicht der Sinn von Foren, denn es in Foren Hilfe zur Selbsthilfe. Diese "Wer macht mir mal"-Mentalität wird in manchen Foren sogar mit einem "Closed" belohnt. Ich verstehe auch nicht, warum manche Leute immer wieder fertige, bzw. fast fertige Lösungen liefern. Mit Copy/Paste haben die aller wenigsten was gelernt.
Ich denke aber, in meinem Fall war das genau das richtige. Für mich ist das die richtige Lernbasis. Das ist eben Autodidakten-Prinzip. Außerdem ist bei mir der Lernschwerpunkt beim Sehen - nicht Hören oder Lesen oder Anfassen, wie bei vielen anderen.
 

Alois

Mitglied
23 Januar 2021
96
0
6
Richtig verwirrend wird es, wenn man ein Layoutwerkzeug für einen Zweck verwendet, für den es nicht geeignet ist, wie früher das Tabellenlayout oder float oder, wie in diesem Fall, Grid für ein Layout, bei dem es kein Gitter gibt sondern Elemente in zweidimensionaler Anordnung.
Richtig erschließen tut sich das erst, wenn man die einzelnen Werkzeuge kennen lernt.
Glaube ich dir ja, aber wenn das sichtbare (!!!) Ergebnis so ist, wie ich das wollte, was sollte ich daran ändern?
Z.B. hier diese Tabellenseite - ich finde die so, wie ich sie wollte:
Link für mich perfekt.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Und wie kriege ich das Titelbild mit ganz bestimmten Maßen ( Width=570 Height=400 ) hin.
Du kannst Breite und Höhe mit den CSS-Eigenschaften width und height auf feste Pixelwerte festlegen, aber in aller Regel ist das nicht zu empfehlen, weil sich die Elemente dann nicht an die unterschiedlichen Abmessungen des Browserfensters anpassen. Das Stichwort dazu lautet "Responsives Layout", siehe z. B. hier:
Bedenke, dass es eine Vielzahl von Geräten gibt, mit denen ein Webseite betrachtet wird, vom Handy bis zum großen Desktop-Bildschirm.
Versuche, das Browserfenster breiter und schmaler zu ziehen und beobachte, wie sich dabei das Bild der Neonfische verändert. Bei der Überschrift habe ich das noch nicht umgesetzt, aber es müsste noch gemacht werden.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Glaube ich dir ja, aber wenn das sichtbare (!!!) Ergebnis so ist, wie ich das wollte, was sollte ich daran ändern?
Z.B. hier diese Tabellenseite - ich finde die so, wie ich sie wollte:
Link für mich perfekt.
In diesem Fall bei deinem Link ist die Struktur tatsächlich tabellarisch und es ist vollkommen richtig, dafür eine Tabelle zu verwenden.
 

Alois

Mitglied
23 Januar 2021
96
0
6
Du kannst Breite und Höhe mit den CSS-Eigenschaften width und height auf feste Pixelwerte festlegen, aber in aller Regel ist das nicht zu empfehlen, weil sich die Elemente dann nicht an die unterschiedlichen Abmessungen des Browserfensters anpassen.
....verstehe.....aber ich könnte doch im Original das Neonbild verkleinern und dann reinsetzen. Das würde doch in meinem Sinne gehen, oder?
 
Werbung:
Werbung: