Von hinten nach vorn:
- Das schließende </ul>-Tag habe ich gleich nach Entdeckung seines Fehlens hinzugefügt.
- Das Content-DIV dient mir zu logischen Gliederung des Dokumentes; im Prinzip kann man das auch mit einem html-Kommentar machen. Es kann aber sein, dass im Zuge der Entwicklung ein adressierbarer Content-Bereich mal erforderlich wird (z.B für Contentausgabe oder -änderung über JavaScript). In dem Fall möchte ich nicht das Grundgerüst ändern müssen.
- zur Gestaltung meiner Liste …
Hintergrund-Info, um was für einen Content es geht: Zu entwickeln ist eine Datenbankgestützte Bestimmungshilfe für Spinnentiere für mich selbst (allenfalls noch zur Unterrichtung Dritter). Es gibt zwar öffentlich zugängliche Bestimmungsschlüssel im Internet (z.B. der Uni Bern), die haben aber Schwächen. Ich benötige andere, effektivere Schlüssel. Schlussendlich geht es darum, einmal Zeit und Arbeit zu investieren, ein Grundwerkzeug zu erstellen, das mir nach Fertigstellung sehr viel Zeit und Aufwand abnimmt. Von der Stange gibt es so etwas nicht; das Anforderungsprofil ist wohl auch zu speziell.
Im nächsten Schritt soll ein Erfassungs-Interface geschaffen werden, wo ich Spinnenfänge eingeben kann um endlich vom Rumhantieren mit Exceltabellen weg zu kommen; Excel ist ein wunderbares Werkzeug (und der Standard) zum Austausch von Daten mit Dritten, aber Excel ist keine Datenbank. Sich ändernde Artennamen (z.B. Aufspalten einer Art in zwei) möchte ich hier mal als Beispiel von vielen anführen, auf das man mit Daten in Exceltabellen nicht ohne enormen Nachbearbeitungsaufwand reagieren kann. Excel möchte ich künftig nur noch im Export (z.B. zur Weitergabe von Artenlisten) verwenden.
Die Liste, um die es hier geht, ist die Liste der Gattungen einer Familie (Exkurs:
Araneus diadematus ist der wissenschaftliche Artname für die Gartenkreuzspinne,
Araneus ist die Gattung). Viele Namen Spinnenarten sind sehr kompliziert und damit tippfehlerfreudig. Da ist es besser, diese nicht eintippen zu müssen (für das Eingabe-Modul ist Ajax Suggest geplant). Es geht also auch um Fehlervermeidung. Die Spinnenfamilie mit (ihn Deutschland) den meisten Arten ist die Familie der Baldachinspinnen (Linyphiidae); das sind (derzeit) 149 Gattungen, die auf dieser Seite ausgegeben werden; das ist das Maximum. In Deutschland haben wir z. Zt. 42 Spinnen-Familien, von denen jede sehr viel weniger Gattungen enthält.
Und nun ….
Um responsives Design habe ich mich aus Bequemlichkeit nicht geschert. Ich kenne mich damit nicht aus und dachte, dass ich sowieso mit diesen Daten nur an meinem PC arbeite und das Ausgabedesign somit ruhig in Pixeln für meinen (!) Bildschirm optimieren könne. Jetzt beim Schreiben, wo ich immer den Gedanken im Hinterkopf habe, wie das geschriebene wohl beim adressierten Leser ankommen mag, denke ich, dass diese „Strategie“ wenig weitsichtig (wenn nicht einfach dumm) ist. In meinem Labor habe ich z.B. einen Monitor mit einem anderen Format (4:3). Vor Jahren waren noch 15"-Bildschirme der Standard, dann kamen die 17"-Bildschrme und heute nutze ich am Arbeitsplatz drei 24"-Monitore. In diesem Jahr (2025) plane ich, mein arachnologisches Wissen weiterzugeben (Stichwort: Erosion der Artenkenntnis); da kommen dann Laptops Dritter ins Spiel.
Deinen gut gemeinten Hinweis, besser auf responsives Design zu setzen, ist somit richtig und zielführend. Fehlendes Wissen, muss ich nacharbeiten.
Zurück zum Thema
Ich habe Dich so verstanden, dass ich die die Spalten (comuns) betreffenden Styles anstatt der Klasse „directory“, ul zuordnen solle.
.directory {
width: 800px;
column-width: 150px;
line-height: 1.6;
height: 760px;
}
.directory ul {
column-count: 5;
list-style-type:none;
font-family: Arial, Helvetica, sans-serif;
}
Zunächst hatte ich nur die rot markierte Zeile in dien unteren Abschnitt verschoben. Das führte dazu, dass die Liste völlig zerstört wurde.
Danach habe ich alle „px “ ersetzt durch ähnliche Werte mit „%“. Ebenso habe ich sämtliche Style-Definitionen in den unteren Abschnitt (.directory ul) verschoben und den oberen ganz gelöscht. Schlussendlich sieht es so aus:
.directory ul {
width: 80%;
column-width: 10em;
line-height: 1.6;
height: 90%;
column-count: *;
list-style-type:none;
}
Auf die font-family-Definition konnte ich auch verzichten; die wird aus der Grundeinstellung ererbt.
Die Liste sieht jetzt gut aus und hat keinen Versatz mehr.
Man sagt ja eben oft nicht ohne Grund: Weniger ist oft mehr ;-).
Eine Frage noch zu meinem Verständnis: Was bedeutet margin-block-start?
Vielen lieben Dank!
Martin
