3 Spalten responsive - Abstände

[godlike]

Teste bzw. spiele gerade etwas mit responsive Designs herum. Wollte nun mal ein dreispaltiges Layout probieren. Habe folgendes getestet:

[src=html5]<div id="pagewrap">
<div id="head"> </div>
<div id="blah"></div>
<div id="cont2">
<h1>Headline 2 </h1>
<section id="left_column">
<p>links: Test</p>
</section>
<section id="middle_column">
<p>mitte: Lorem Ipsum</p>
</section>
<section id="right_column">
<p>rechts: La le su</p>
</section>
</div>
<div id="blubb"></div>
</div>[/src]
mit folgender CSS
[src=css]
#left_column {
width: 280px;
float: left;
padding-right: 20px;
}

#middle_column {
width: 280px;
float: left;
padding-right: 20px;
}

#right_column {
width: 280px;
float: left;
}


@media screen and (max-width: 900px) {

#pagewrap {
width: 94%;
}
#left_column {
width: 41%;
padding-right: 2%;
}
#middle_column {
width: 41%;
padding-left: 2%;
float: right;
}

#right_column {
clear: both;
width: auto;
float: none;
}
}


@media screen and (max-width: 600px) {

#left_column {
width: auto;
float: none;
}

#middle_column {
width: auto;
float: none;
}

#right_column {
width: auto;
float: none;
}

}


@media screen and (max-width: 480px) {


h1 {
font-size: 2em;
}
#left_column {

float: none;
margin-left:0px;
}
#middle_column {

float: none;
margin-left:0px;
}
#right_column {

float: none;
margin-left:0px;
}


}
[/src]
Funktioniert soweit auch gut. Nur bei kleinen Größen ist da noch ein Abstand rechts links von der mittleren Spalte. Aber wieso?



Kann mir wer mal kurz auf die Sprünge helfen?

Gruß godlike

 

[electric.larry]

Schuss ins Blaue: Vielleicht ist der kleine Device breiter als 480px, dann wird dein margin:0 nicht mehr angewandt.

Oder vielleicht ist es auch nur eine "optische Täuschung"? Zeigt Firebug (oder was auch immer) ein Padding bei der Spalte? Eventuell text-align:justify einstellen und schauen, ob da wirklich ein Rand ist, oder das nur wegen Wrapping so aussieht.

 

[godlike]

Ups hab mich verschrieben Links von der mittleren Spalte ist der Abstand. Optische Täuschung fällt also schon mal raus

 

[electric.larry]

Padding Left musst du bei kleiner Auflösung auf 0 setzen, sonst übernimmts dir den Style für middle_column aus max-width 900

 

[werner]

Na wegen dem padding-left: 2%
Ich weiß nicht ganz was du erreichen möchtest. Wenn die div Blöcke untereinander dargestellt werden, brauchst du den padding left ja eh nicht. Und Abstand zwischen 2 Boxen macht man eher mit margin.

Kennst du flex-boxes?

PS. Sowas findest du mit zB der Google Chrome Konsole schnell heraus. Rechtsklick -> Prüfen, und dann wird dir schon das padding angezeigt (grüner Teil der Box). Dort kannst du auch live dein Javascript ändern, und das Ergebnis direkt sehen.

 

[sia]

Verantwortlich ist laut Page Inspector (Ctrl+Shift+C) folgendes:

[src=css]@media screen and (max-width: 900px) {
#middle_column {
padding-left: 2%;
}
}[/src]

EDIT: Wollt ihr mich verarschen, zwei Posts vor mir, nur weil ich ne Minute dafür gebraucht habe?

 

[godlike]

Padding Left musst du bei kleiner Auflösung auf 0 setzen

Danke, daran lag es! Ich bin erst frisch in dem Thema, hab ich einfach übersehen...

Na wegen dem padding-left: 2%

padding-left: 2%;

Nun ja, das ist ja bei der mittleren Breite. Sprich zwei Spalten und eine drunter. Das passt ja auch so bzw. kann ich mir da tatsächlich das padding-left ganz sparen da die Spalte ja eh rechts gefloated wird.

Nun passt es aber

Danke für eure Hilfe, wieder etwas schlauer

Ich weiß nicht ganz was du erreichen möchtest.

Das in der großen Ansicht die drei Spalten nebeneinander erscheinen, bei etwas kleinerem Viewport zwei Spalten und darunter die Dritte und bei kleinem Viewport alle drei untereinander.

Kennst du flex-boxes?

Nein, schau ich mir mal an. Wobei es so ja wunderbar funktioniert:

 

[werner]

Ich würde auf die Darstellung im zweiten Bild verzichten, und nur zwischen 1 und 2 umswitchen. Das sieht dann einheitlicher aus, und ist technisch einfacher.

flex-boxes werden so realisiert: Du nimmst dir ein Container (dort sind deine Text-Blöcke drin, und sonst nichts). Dieser Container bekommt das CSS-Attribut display:flex und je nach Breite des Bildschirmes entweder flex-direction:row oder flex-direction:column.

Die items/Kinder/Texte/sections brauchen erstmal keine weiteren Attribute. Du kannst Ihnen eine feste Breite zuweisen oder auch nicht, dann werden sie auf die Breite des Containers aufgeteilt (bei drei Artikeln hat jedes Kind so 33,3% der Breite)

Vorteil: Du musst weniger absolute Angaben machen, kein hässlich float, schöner und weniger Code.
Nachteil: Kurze Einarbeitungszeit nötig
Tipp: Gib den sections einen farbigen Hintergrund, dann siehst du immer, wie breit die Boxen sind. Ich arbeite dir gleich dein Beispiel in flex-boxes um.

Guter Start: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edit: https://jsfiddle.net/y44t4xL8/
Hier habe ich versucht dein Beispiel umzusetzen. Dafür habe ich kein media query genutzt (kannst du natürlich trotzdem einsetzen, um dann dynamisch die min-width zu ändern, beispielsweise). Lässt sich auch gut erweitern ohne jedes Mal die CSS anzupassen (#middle_left_3rd_box_top und so weiter)

 

[godlike]

Ok das scheut in der Tat einfacher aus. Aber: wie mache ich das da mit den Abständen? Dreispaltig soll ja nur die mittlere Spalte Abstände haben. Da muss ich dann doch wieder über @media gehen oder? Auf jeden Fall evtl ne Alternative wobei ich mir nicht sicher bin was ältere Browser angeht. Wenn ich da dann auch noch einen Workaround brauche kann ich quasi ja gleich mein altes Konzept behalten oder?

Edit: Außerdem kann es bei dem dreispaltigen Layout durchaus auch vorkommen das eine andere Aufteilung im Design auftaucht. Sprich das z.B. die linke und mittlere Spalte zu einer vereint auftauchen (Bild drin) und die rechte Text enthält - oder anders herum.

 

[werner]

Sorry, verstehe noch nicht ganz was du meinst.
Welche Abstände meinst du?

Ja, es kann durchaus sein, dass du @media braucht. flex ersetzt das auch nicht, sondern ersetzt quasi dieses ganze float Gefrickel, und kann eben auch box-wrapping

Und ältere Browser - das ist 'ne Meinungssache. Ich für meinen Teil unterstütze nur noch Browser, die auch CSS3 können.
Das kann selbst der aktuelle IE, und der Edge auch. FF und Chrome+Derivate ja sowieso. Und mobile Browser können das i.d.R. auch.

Zu dem mit der Designaufteilung - das geht auch. Du gibst dem Children, das doppelt so viel Platz braucht, einfach flex-grow: 2 und schon ist es eine Aufteilung von 2:1. Denk nur daran, dass du den Text natürlich auch in eine Box packen musst.

float würde ich nur noch für den ursprünglichen Sinn nutzen - Elemente in einem Artikel von Text umfließen lassen. Zum Designen von Websiten aber nur noch in harten Einzelfällen.

 

[KingJamez]

Ich möchte hier mal weniger auf die Frage sondern eher auf das Prinzip Responsive Design eingehen.
Responsive Design ist eine Anpassung an verschiedene Bildschirmformate (davon gibt es ja einige) und die optimierte Darstellung für diese, es ist keine dedizierte Ausgabe für Mobile Endgeräte! Auch im Desktopbereich (sagen wir mal alles > 1280px in der breite) gibt es gewaltige unterschiede.
Mit einem 4k 27" Monitor sollte dein "Desktop" CSS sehr klein werden und es ist dementsprechend viel ungenutzter Whitespace auf dem Monitor.
Ich würde in @media Queries prinzipiell px angaben vermeiden, und ich würde die queries auch anders aufbauen.

Mobile First
der normale CSS Code sollte für die kleinst mögliche Ausgabe optimiert sein und ein reines Grundsetup enthalten. Darauf baust du dann verschiedene breiten auf.
[src=css]
/** pseudo code **/
.wrapper { padding: 1em; }

@media mobile {
.wrapper { padding: 0.5em; }
}

@media tablet {
.wrapper { padding: 0.2em; }
}

@media desktop {
.wrapper { padding:0; background: red;}
}
[/src]
Du überschreibst also, je größer dein Viewport ist, die Haupteigenschaft die du im "root" abgelegt hast. Damit ist gewährleistet, das du eine, zumindest minimal, optimierte Ausgabe für jedes Device lieferst.

PX angaben
sollten, finde ich, soweit wie möglich vermieden werden! Gerade auf 2x (Retina, etc) Devices kannst du damit Probleme bekommen. Apple (iphone) hat die Pixelangaben eine zeitlang 1zu1 genutzt, ohne sie umzurechnen. Android geht das ganze schon besser an, hatte aber teilweise auch Probleme.
Benutz % solange es fluid sein soll (min/max angaben können ja gerne in PX gemacht werden). Benutz em und rem für abstände und @media. Im @media macht es sogar sehr viel sinn, da du dich auf die Standard schriftgröße beziehst und nicht auf einen Pixel, was ein reiner Pseudowert ist.

Spalten
Wenn du schon klassische Spalten nutzen willst, wie es in der Zeitung ist, würde ich multicolumn empfehlen. Das geht allerdings nur, wenn du sicherstellen kannst, das deine Kundschaft einen modernen Browser hat. (

Grid Layout
Ich empfehle dir für größere Projekte ein ordentliches Grid System zu basteln oder zu nutzen. Ob das nun auf Float´s, FlexBox oder Grid basiert, ist dir und den aufgaben überlassen. Als Inspiration kann man sich dafür mal Bootstrap oder andere anschauen. Es spart dir am ende viel Zeit, Schreibarbeit und am ende auch Bytes.

BrowserSupport

Und ältere Browser - das ist 'ne Meinungssache. Ich für meinen Teil unterstütze nur noch Browser, die auch CSS3 können.
Das kann selbst der aktuelle IE, und der Edge auch. FF und Chrome+Derivate ja sowieso. Und mobile Browser können das i.d.R. auch.

Ähhh whut? Du unterstützt nur noch Browser Blabla? Das ist soweit fern ab der Realität! Man kann bestimmte Browser nicht ausschließen! Irgendwie ist hier in der Verständigung auch was schief gegangen! Du schreibst nicht für Browser! Sondern für Kunden und deren Kunden! Ältere Browser sollten zumindest rudimentär unterstützt werden. Notfalls mit Polyfills oder einer feature detection und einem zusätzlichen shippen einer alternativen CSS.
Ich würde auch gerne alle Cutting- Edge- Techniques einsetzen - gerade wenn man sich ES2015 mal anschaut - es ist aber leider nicht möglich. Den User der Website interessiert es auch relativ wenig ob du es mit Technologie XY gebaut hast oder welchen Workaround du gefunden hast, Hauptsache es klappt.
Man sollte in dem Fall auch nicht die Mobilen Geräte vergessen, von denen einige im Umlauf sind, die diverse Techniken nicht unterstützen und auch nie unterstützen werden, da sie keine Updates mehr kriegen.
Wobei ich Flexbox in diesem Fall auch ausnehme und notfalls mit Conditional Comments arbeite (ist ja nur der IE8 der es nicht kann, der kann aber noch Conditional Comments)


Abschließend empfehle ich noch das und das zu lesen.

PS: sicherlich ist dein Code nur ein Beispiel, aber bitte vermeide ID´s, dein CSS Code ist nicht wiederverwendbar, da eine ID nur einmal je Seite auftauchen sollte/ darf.

 

[godlike]

Sorry, verstehe noch nicht ganz was du meinst.
Welche Abstände meinst du?

Die Abstände der einzelnen Spalten meinte ich. In deinem Beispiel ist da ja gar kein margin angegeben. Wenn ich dann nur .item habe, wie unterscheide ich zwischen den einzelnen Spalten? Unterschiedliche Klassen? Kann aber auch sein das ich das Prinzip immer noch vom float im Kopf habe. Da sollte die mittlere Spalte ja keinen Abstand links haben, genau so wie die linke Spalte. Damit bei engeren Viewports links kein Abstand und alles schön bündig ist.


@KingJamez
Danke für deinen ausführlichen Beitrag Wie gesagt bin ich da gerade am herumprobieren. Das mit den Flex-Boxes werde ich mir auf jeden Fall genauer anschauen. Mir geht es auch nicht um die Nachahmung eines Satzspiegels wie beim Print sondern das soll lediglich optischer Natur sein. Es sollen da auch keine Texte über mehrere Spalten laufen oder Ähnliches. Alles in Allem für ne kleine Webseite mit Infos, Referenzen und bissle BlahBlah. Und die soll halt auch auf nem Tablet bzw. Smartphone einigermaßen gescheit aussehen. So wie es jetzt aussieht ist es schon mal super und reicht eigentlich völlig meinen Ansprüchen aus, das mit dem Flex-Boxes bastel ich mir trotzdem mal separat zusammen. Evtl ist das in Zukunft ja einfacher so.

PX Angaben sind jetzt nur temporär wobei bei den Desktop-Größen da eher weniger das Problem sein sollte. Alles andere kann man mit @media ja abfangen.

PS: sicherlich ist dein Code nur ein Beispiel, aber bitte vermeide ID´s, dein CSS Code ist nicht wiederverwendbar, da eine ID nur einmal je Seite auftauchen sollte/ darf.

Kann man so ja nicht verallgemeinern. Elemente die nur ein mal vor kommen und die man z.B. per Anker noch ansprechen möchte haben ja durchaus ne ID verdient. So was kann u.A. durchaus der Übersichtlichkeit dienen. Sonst hast du natürlich recht. Sollte da doppelte IDs aufgetreten sein, wie gesagt, ist ja nur ein Entwurf

 

[KingJamez]

Die Abstände der einzelnen Spalten meinte ich. In deinem Beispiel ist da ja gar kein margin angegeben. Wenn ich dann nur .item habe, wie unterscheide ich zwischen den einzelnen Spalten? Unterschiedliche Klassen? Kann aber auch sein das ich das Prinzip immer noch vom float im Kopf habe. Da sollte die mittlere Spalte ja keinen Abstand links haben, genau so wie die linke Spalte. Damit bei engeren Viewports links kein Abstand und alles schön bündig ist.

Entweder: jedes (Grid) Element hat einen margin, ein kleines Beispiel:
Dazu musst du aber Grundlegend alles in ein Grid gepackt werden.

[src=html5]
<div class="col--12"> inhalt vollbreite </div>
<div class="col--6">inhalt 2 spaltig 1</div>
<div class="col--6">inhalt 2 spaltig 2</div>
<div class="col--4">inhalt 3 spaltig 1</div>
<div class="col--4">inhalt 3 spaltig 2</div>
<div class="col--4">inhalt 3 spaltig 3</div>
[/src]

[src=css]
*[class^="col--"] {
margin-left: 0.5%;
margin-right: 0.5%;
float: left;
box-sizing: border-box;
}

.col--4 {
width: 32.33333%;
}
.col--6 {
width: 49%;
}
.col--12 {
width: 99%;
}
[/src]

Oder, du lässt die margins ganz weg und vergibst es optional über einen padding (.panel).

[src=html5]
<div class="col--4">inhalt 3 spaltig 1</div>
<div class="col--4 panel">inhalt 3 spaltig 2</div>
<div class="col--4">inhalt 3 spaltig 3</div>
[/src]


[src=css]
*[class^="col--"] {
margin-left: 0%;
margin-right: 0%;
float: left;
box-sizing: border-box;
}

.col--4 {
width: 33.33333%;
}

.panel {
padding: 1em;
}

[/src]

Ich verwende meißtens version 1, das bedarf einen saubereren Aufbau des gesamten templates, ist aber am ende Sinnvoller.

PS: ich verwende hier floats, ein Aufbau über flexbox wäre aber änlich.

 

[sia]

Ich benutze für sowas bei größeren Projekten gerne Neat.

Ist das ein Onepager oder soll das ein Theme für ein CMS oder so werden?

 

[godlike]

@KingJamez

Ok, schau ich mir nachher mal an Dachte aber das meine Version jetzt gar nicht so scheiße ist für den Zweck mit den drei Spalten. Mehr brauch ich ja eh nicht.

@phre4k

Momentan ist das nur testen der Möglichkeiten. Was am Ende daraus wird wird sich zeigen. Das soll ne Webseite für mich und meine selbständigen Kollegen werden mit der wir unser Zeug präsentieren usw. Nix aufwändiges. Simples Layout, Samples der Arbeiten und viel grafische Stilelemente. Darum auch maximal zwei bis drei Spalten in der Großen Ansicht. Halt eben auch dann für Mobilgeräte.

Neat sieht auch gut aus Ach herrjeh, das kommt davon wenn man jahrelang nix mehr neues angeschaut hat

 

[electric.larry]

Ach herrjeh, das kommt davon wenn man jahrelang nix mehr neues angeschaut hat

Ach, mach dir nix draus. Auf dem Gebiet tut sich sooo viel, dass auch wenn du jeden Tag damit zu tun hast, viel zu viele neue Libraries und Methoden daherkommen um sich mit allen super auszukennen.

Gestern noch tables und fluid Layouts, dann Grid, dann less und sass und px und em und rem und %. Ich hab Projekte herumliegen bei denen alle dieser Techniken zum Einsatz kommen und mit jeder davon war/ist es möglich, eine vernünftige App/Seite, die auf allen Devices rennt, herzustellen.

Natürlich muss man hin und wieder Neues adaptieren, aber imho ist es wichtiger einen Workflow zu finden, mit dem man schnell ans Ziel kommt anstatt auf jeden "Trend" aufzuspringen.

 

[godlike]

Ja, sehe ich im Endeffekt ähnlich. Man kann es mit der Konzeption auch übertreiben. Klar, kann sein das padding verschiebt sich beim IE 5.X marginal (höhöh) aber wat solls. Der Kundenstamm, der sich das rein zieht, kann es wohl zu 95% in voller Pracht ansehen ohne zu merken ob ich float oder andere Methoden nutze. Wäre das ne mega Seite mit 100 Spalten wär es noch mal was anderes. So sind glaub alle Methoden legitim. Ich nehme am Ende die, mit der ich am besten und schnellsten zum Ziel komme. Wichtiger sind mit dann doch das Seitenlayout mit den Grafiken. Das muss halt bombig sein.

 

[KingJamez]

@phre4k: Mit SASS wollte ich mal nicht auch noch Anfangen. Preprozessoren ersparen die ganze Sache ungemein. Vor allem wenn es um Responsive geht. Es ist zwar etwas abstrakter dafür aber auch leichter zu lesen.

 

[godlike]

Hab hier jetzt mal folgendes Konstrukt

[src=html5]<div>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für n, aber ich habe gehört viele Situationen.</div>
</div>
<h1>Mehrspaltige Anzeige 1</h1>
<div class="multicolumn">
<section class="column">
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für n, aber ich habe gehört viele Situationen.</p>
</section>
<section class="column">
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für n, aber ich habe gehört viele Situationen.</p>
</section>
<section class="column">
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für n, aber ich habe gehört viele Situationen.</p>
</section>
</div>

[/src]

und [src=css].multicolumn {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.column {
min-width: 31%;
flex: 1;
padding-right: 2%;
text-align: justify;
}[/src]

Welche Werte bei 3 Spalten nehme ich denn jetzt? 33% Breite geht ja schlecht bei .column wenn ich da noch Abstände will. Die Abstände dürfen ja nur bei der ersten Spalte und der zweiten Spalte jeweils rechts sein da der Text sonst nicht bündig ist mit den Containern ohne Spalten. Brauche ich also .column1 .column2 und .column3 mit separaten Werten? So viel besser/einfacher wie das gefloate ist das dann ja auch nicht. Oder hab ich was übersehen wegen den Abständen?

Nachtrag. Bei der dritten Spalte darf ja rechts auch kein Abstand sein. Also bräuchte ich ja nur was für die Mittlere. So quasi:

[src=css].column {
min-width: 30%;
flex: 1;
text-align: justify;
}
.column_middle {
min-width: 30%;
flex: 1;
text-align: justify;
margin-right: 4%;
margin-left: 4%;
}[/src]

 

[KingJamez]

Wenn du 3 Spalten haben willst, die wirklich gleich breit sind, musst du den Abstand überall vergeben.
Du könntest natürlich auch der Spalte 1 und 2 einen anderen Wert geben, das führt dann aber zu unschönen Dartstellungen (oder Mehrarbeit) sobald die Spalten untereinander sind.

Im Prinzip sieht man doch die Spalten nicht, sie haben keinen Hintergrund und dienen nur dem Layout.


Willst du wirklich bis zum Rand gehen, musst du entweder den wrapper drumherum etwas größer machen und ihn abschneiden. Oder du musst den Margin/ Padding bei den Spalten ganz weglassen und in den containern vergeben.

Flexbox ändert an deinem Problem nichts, es ist nur eine andere Technik um Inhalte darzustellen und zu Ordnen. Dein Problem ist eher ein strukturelles.