Flexboxen

[delbor]

Hi MrMurphy

Die eigentlichen Linklisten haben eine prozentuale Grösse und ebensolche margins zwecks Zentrierung - da lässt sich also wohl nichts machen.

Das verstehe ich nicht.

Die eigentlichen Linklisten sind die ul-Elemente - die müssen in ihren Navs zentriert sein. da sonst unschöne Leerräume entstehen.

    nav ul {
      border-sizing: borderbox;
      width: 80%; /*15em */
      margin-left: 10%;
      margin-right: 10%;/*<===*/
      padding: 0.2em;
      border: 1px solid red;
      background-color: silver;
    }

Deine Webseite, du bestimmst das Layout und Aussehen. Ich bevorzuge Lösungen die von meinen Besuchern als angenehm und seriös empfunden werden. Von daher halte ich mich aus Geschmacksfragen raus.

In der Tat: blau ist meine eine Lieblingsfarbe. Das ist der eine Grund für deren Verwendung . Der andere ist die Farbbedeutung - Blau steht meines Wissens für Kompetenz. Ein Umstand, auf den ich allerdings erst im Nachhinein gestossen bin. Ich gehe mal davon aus, dass so ein unbewusster Eindruck bei einem Besucher mit dafür der Grund sein kann, dass er eher wiederkommt. Trotzdem habe ich mir vorgenommen, dieses Layout mal zur Diskussion zu stellen, da ich bislang noch nicht wirklich zufrieden bin.

Ohne Link zur Seite kann ich dir bei dem Problem nicht weiterhelfen.

Ich kann das gegen abend mal online stellen. Vorher muss ich allerdings nochmal weg.

Um die Darstellung auf einem Tablet/iPad/Smartphon kümmere ich mich zu einem späteren Zeitpunkt.

Das funktioniert in der Praxis meist nicht oder nur unter erheblichen Mehraufwand. ...

Der Grund ist: es soll möglichst schlankes CSS ausgegeben werden. Von daher macht es keinen Sinn, an einen Desktop Handy- oder Tablet-CSS auszuliefern.

Hintergrund ist: Ich komme eigentlich aus der Delphi/Objectpascal-Ecke und entwickle zur Zeit eine Webserver-Anwendung für die IIS. Dabei wird das CSS in Form von Dateien an den Client/Browser ausgegeben. Was ich zum jetzigen Zeitpunkt allerdings nicht weiss, ist, ob ich mit dem Request nicht nur Angaben zum UserAgent(Browser) erhalte, sondern auch zu dessen Auflösung und auf welchem Gerät er läuft. Hätte ich solche Angaben, besonders letztere, könnte ich damit entscheiden, welches CSS an speziell dieses Gerät ausgegeben werden soll. Zum Thema schlankes CSS: Da hast du sicher recht: in einer Produktionsversion, die letztenendes ausgeliefert wird, haben nicht verwendete Definitionen oder Kommentare nichts zu suchen. Um mal einen Vergleich zu wagen, was ich unter schlank verstehe(ob nun html, css oder javascript): jQuery gibt es in zwei Versionen: eine mit Formatierungen für eine Entwicklungsumgebung und eine minimierte Version, in der auch überflüssige Leerzeichen entfernt sind. Vor diesem Hintergrund ist meine Überlegung, dem Client nur gerade die Dateien auszuliefern, die er wirklich braucht. Also soll an ein mobiles Gerät nicht der Code für einen 29-Zoll-Bildschirm ausgeliefert werden - bzw. eben für einen Viewport von 1900*12xx und mehr.

Außerdem wird der CSS-Quelltext schnell unübersichtlich, wenn für getrennte Geräte getrenntes CSS erstellt werden soll. Doppelte Anweisungen lassen sich dann nicht vermeiden, wobei die Idee vom schlanken CSS unterlaufen wird.

Wenn alles in einer Datei steht oder sogar unter <Style> eingebunden ist, bestimmt. Andrerseits muss ich mich mit den Mediaquerys erst noch auseinandersetzen. Die sind totales Neuland für mich. Irgendwie wächst der Gedanke, mit Mediaquerys und natürlich Flexboxen könnte mit nur wenigen Zeilen Code sagenhaftes erreicht werden...

damit die beiden kleinen Boxen zusammen gleich hoch sind wie die danebenstehende grosse Box. Wie kann ich das hinkriegen?

Uups, da hab ich mich offenbar erfolgreich missverständlich ausgedrückt. Im Normalfall ist bei meinem Firefox die Sidebar mit der Lesezeichenliste immer aktiv und ergo ist auch der Viewport kleiner, als wennn die Lesezeichen nicht sichtbar wären.

Die beiden Bilder zeigen nun den Viewprort, einmal, wenn die Lesezeichen sichtbar sind, und einmal, wenn sie nicht sichtbar sind. Ziel wäre es, dass beide kleinen Navigationsboxen immer untereinander sind, auch wenn sich der Viewport verbreitert.

Gruss Delbor