2k11 Spaltenbreite

[ICE]

Hallo YellowLED,

ich muss Dich leider noch einmal nerven ... ich steige nicht so ganz hinter das CSS-Konzept von 2k11. Ich weiß, es soll alles schön responsive und fließend sein ... absolute Größenangaben sind pfui bäh, etc.

Jetzt habe ich aber folgendes Problem:
2k11 soll dreispaltig sein. Mit deinem CSS-Generator habe ich mir ein dreispaltiges Layout erstellt, mit 100% max-width und 18% linke Spalte und 30% rechte Spalte.

Code: Select all

@media only screen and (min-width: 768px) {
	#page { max-width: 100%; }

	.col3 #searchform,
	.col3 #sidebar_right { width: 30%; }

	.col3 #sidebar_left {
		left: -52%;
		width: 18%;
	}

	.col3 #identity { width: 70%; }

	.col3 #content {
		left: 18%;
		width: 52%;
	}

	.ie7 .col3 #searchform,
	.ie7 .col3 #sidebar_right { width: 29.9%; }

	.ie7 .col3 #sidebar_left {
		left: -51.9%;
		width: 18%;
	}
	.ie7 .col3 #identity { width: 69.9%; }

	.ie7 .col3 #content {
		left: 17.9%;
		width: 51.9%;
	}

}

Das funktioniert so weit auch ganz prima. Nur, jetzt möchte mein Bekannter für die linke und rechte Spalte eine maximale Breite haben, nur die mittlere darf komplett dynamisch bleiben. Die linke und rechte Spalte darf sich also dynamisch verkleinern, wenn es nötig ist, aber nicht breiter werden, als z.B. 180 Pixel für die linke Spalte.

Für den Anfang habe ich erst einmal die linke Spalte probiert und diese mit

Code: Select all

#sidebar_left .sidebar_plugin {
	max-width: 180px;
}

erfolgreich beschränkt.

Das Problem ist jetzt, dass es auf sehr breiten Monitoren (Full-HD reicht aus) eine Lücke zwischen der linken und der mittleren Spalte gibt, da sich die mittlere nicht dynamisch an die linke annähert.

Ich verstehe auch nicht, was das left: -52% soll ...
Da Du das Design erstellt hast, weißt Du sicherlich besser, ob das mit der maximalen Breite links und rechts überhaupt möglich ist und wo ich da genau drehen kann ...

gruß
ICE

[yellowled]

ich muss Dich leider noch einmal nerven ...

Um mich zu nerven braucht es weit mehr als ein paar HTML/CSS-Fragen.

absolute Größenangaben sind pfui bäh, etc.

Absolute Größenangaben sind nicht direkt pfuibäh, aber sie machen (wie Du gerade selbst feststellst) Responsive Webdesign deutlich komplizierter. Größenangaben in px sind für manche Dinge unumgänglich, aber eben nicht für Dimensionen in RWD vorgesehen.

Nur, jetzt möchte mein Bekannter für die linke und rechte Spalte eine maximale Breite haben, nur die mittlere darf komplett dynamisch bleiben.

Das ist zusammen mit einer max-width von 100% für den Container aus Designsicht Unfug. Es führt dazu, dass die Inhaltsspalte, in der (normalerweise zumindest) viel Text stehen wird, eine beliebige Zeilenlänge hat. Das heißt: Das Design erschwert dem Auge die Lesbarkeit. Man versucht normalerweise immer, die Zeilenlänge in Fließtext irgendwie halbwegs zwischen 35 und 45 em zu halten.

Das nur am Rande.

Das Problem ist jetzt, dass es auf sehr breiten Monitoren (Full-HD reicht aus) eine Lücke zwischen der linken und der mittleren Spalte gibt, da sich die mittlere nicht dynamisch an die linke annähert.

Natürlich nicht. Die Breite von #content ist ja mittels width: 52%; eingeschränkt. Wenn die max-width der linken Seitenleiste „erreicht ist“ hast Du also eine linke Spalte von 180px, eine mittlere Spalte von 52% und eine rechte Spalte von 30%. Das heißt z.B. auf 1920x1080:

links: 180px
mitte: 998px
rechts: 576px

Ergo fehlen da 166px, auf größeren Auflösungen mehr.

Ich müsste es selbst erstmal prüfen (weil ich solche Layouts noch nie gemacht habe), aber ich glaube, das, was Dein Bekannter will, geht nicht so ohne weiteres mit float-basierten Layoutsystemen.

Ich verstehe auch nicht, was das left: -52% soll ...

Ganz einfach. Optisch gesehen mag die Ausirchtung des Layouts

links – mitte – rechts

sein, aber technisch gesehen, also in der Rehenfolge im Quelltext, ist sie

mitte – links – rechts

Sprich: Der Inhaltsbereich steht als erstes im Quelltext. Das nennt sich “context first”. Es erleichtert ein sinnvolles Layout auf kleinen Bildschirmen und ist günstig für Suchmaschinen.

Würde man nun (in größeren Auflösungen, wo der Inhalt nicht linearisiert ist) alle drei Spalten links floaten, stünde der Inhalt links und die beiden Seitenleisten rechts daneben – das ist aber für 3-Spalten-Layouts (normalerweise) nicht erwünscht.

Ziel ist es also, die linke Seitenleiste nach ganz links zu schieben und die Inhaltsspalte um die Breite der linken Seitenleiste nach rechts. Sprich: Sie müssen relativ (zu ihrem Urspung) positioniert werden (position: relative;).

#content wird um die Breite der Seitenleiste (18%) nach rechts verschoben: left: 18%;
#sidebar_left wird um die Breite des Inhaltsbereiches (52%) nach links (-) verschoben: left: -52%;

Hoffe, das war verständlich, es ist nicht so ganz einfach rein in Worten zu erklären.

YL

[ICE]

Sorry, dass ich jetzt erst antworte ... WE Stress ... wie immer ...

Um mich zu nerven braucht es weit mehr als ein paar HTML/CSS-Fragen.

Na dann ist ja gut ... *weitermach* lach

Das ist zusammen mit einer max-width von 100% für den Container aus Designsicht Unfug. Es führt dazu, dass die Inhaltsspalte, in der (normalerweise zumindest) viel Text stehen wird, eine beliebige Zeilenlänge hat. Das heißt: Das Design erschwert dem Auge die Lesbarkeit. Man versucht normalerweise immer, die Zeilenlänge in Fließtext irgendwie halbwegs zwischen 35 und 45 em zu halten.

Das war mir bisher nicht bekannt, bzw. ich habe das vom Inhaltsgehalt der Webseite abhängig gemacht: Viel Text und Inhalt --> Fullscreen oder wenig Text --> schmale Seite um Lücken und Inhaltsleere zu kaschieren. Genauso nerven mich aber auch erzwungene Umbrüche in reinen Text-E-Mails die manche Mailsysteme hinzufügen, obwohl das nicht nötig wäre. Früher, als die Monitore noch Auflösungen von 800x600 oder 1024x768 hatten, war ich über jeden Zentimeter breite froh. Webdesign mach ich ja auch schon seit 2001. Heutzutage mit 16/9 Displays verstehe ich aber auch die Notwendigkeit ein Auge auf die Breite zu haben und diese nicht ausufernd zu lassen.

Die Breite von #content ist ja mittels width: 52%; eingeschränkt.

Genau das war es. Sobald man da z.B. 53% angibt, fliegt das ganze Design auseinander.

Ganz einfach. Optisch gesehen mag die Ausirchtung des Layouts
links – mitte – rechts
sein, aber technisch gesehen, also in der Rehenfolge im Quelltext, ist sie
mitte – links – rechts[...]

Ja, das ist mir auch sofort aufgefallen. Was RWD betrifft, habe ich bisher nur mit Frameworks gearbeitet, die einem die ganze Drecksarbeit abnehmen (Bootstrap und Kickstart). Dort sind die Divs in genau der Reihenfolge, wie sie angezeigt werden und in dem einfachen 12er Raster. Die Spalten schieben sich auch so schön unter den Hauptcontent, wenn die Monitorbreite fehlt...

Wir haben das jetzt erst einmal so gelöst, dass es bei 100% Width bleibt (war ja beim schönsten Theme, welches es für S9Y gab (Blue Streak) auch so ...) und die Seitenleisten ohne Beschränkungen bleiben. Wenn 4K Monitore mal aktuell werden, werde ich da wohl nochmal ranmüssen, aber im Augenblick passt das wohl erstmal so.

[yellowled]

Das war mir bisher nicht bekannt, bzw. ich habe das vom Inhaltsgehalt der Webseite abhängig gemacht: Viel Text und Inhalt --> Fullscreen oder wenig Text --> schmale Seite um Lücken und Inhaltsleere zu kaschieren.

„Leere“ (in Form von Weißraum) kann auch ein Designelement sein.

Wie angenehm ein Text zu lesen ist, hängt (u.a.) von der Zeilenlänge ab. Das hat z.B. etwas damit zu tun, wie oft bzw. wann das Auge umsetzen muss, um die Zeile zu wechseln, wie gut das Auge durch die Zeilenlänge geführt wird usw. 35-45em sind dabei nur ein grober Richtwert, es hängt von vielen Faktoren ab (Zeilenhöhe, Schriftgröße usw.). Aber viele Menschen empfinden z.B. Text in 14px, der in einfacher Zeilenhöhe über die gesamte Breite eines Browserfensters von 1280px läuft, als sehr unangenehm zu lesen, weil die Zeilen zu lang (und zu eng) sind.

Genau das war es. Sobald man da z.B. 53% angibt, fliegt das ganze Design auseinander.

Das Design fliegt dann auseinander, wenn alle drei Spalten zusammen 100% überschreiten. Genau das macht ja die Mischung von Einheiten (px/%) so kompliziert, auch wenn wir das in CSS-Zukunft mit calc() werde umgehen können.

Wenn 4K Monitore mal aktuell werden, werde ich da wohl nochmal ranmüssen

Naja, vor allem – und das ist nicht erst bei 4K so – ist die Auflösung des Bildschirms nicht auf allen Geräten unbedingt ein zuverlässiger Indikator für den Viewport des Browsers. Ich z.B. lande mit meinem MBA in Piwik-Daten mit einer Bildschirmauflösung von 1440x900, habe den Browser aber meistens auf 1280x900. Tendenziell dürfte mit der Bildschirmauflösung die Wahrscheinlichkeit steigen, dass der Browser nicht maximiert ist.

YL