Share
Fließende Layouts sind der perfekte Weg, um unsere Inhalte in jeder Ansichtsfenstergröße unterzubringen. Text kann fließen, während Container wachsen und schrumpfen, Bilder und sogar Videos und Iframes können sich biegen und zerquetschen. Was aber, wenn wir was haben sollte nicht Abmessungen ändern? Wie sieht es zum Beispiel mit Werbeblöcken aus, die oft mit einer sehr spezifischen Dimensionierung entworfen werden? Seltsamerweise kommen hier Tabellenlayouts zur Rettung…
Ich wurde kürzlich daran erinnert, als ich Tim Kadlecs Implementing Responsive Design las. Es kam gerade zur richtigen Zeit; Ich war mitten in einem Kundenprojekt, das genau diesen Ansatz brauchte (und ich war damit beschäftigt, es abzuschlachten)..
Viele Websites sind auf Werbeeinnahmen angewiesen. Auch wenn Sie nicht gerne mit Web-Marketing-Bildern gesperrt sind, hätten Sie sonst keinen Zugriff auf die kostenlosen Inhalte, an die Sie gewöhnt sind. Tuts + zum Beispiel ist zum Teil auf Werbeeinnahmen angewiesen, um das ständig wachsende Team von Autoren und Mitarbeitern zu erhalten.
Das Interactive Advertising Bureau (iab) ist für eine große Menge digitaler Werbung verantwortlich und arbeitet hart daran, Standards und Richtlinien für die gesamte Branche festzulegen. In den Richtlinien für die Anzeigenwerbung finden Sie eine Referenz der von ihnen empfohlenen universellen Anzeigenblockgrößen:
Vier Bilder mit fester Dimension. Und es ist wichtig, dass sie auch in diesen Dimensionen bleiben. Logos, Gürtellinien und Haftungsausschlüsse könnten alle unkenntlich oder unleserlich werden, wenn sie in einem fließenden Layout zerquetscht werden. Unternehmen, die für diese Anzeigen bezahlen, tun dies ebenfalls nach Größe und Position der Blöcke. Eine Anzeige von 300x250px ist bei kleineren Anzeigen möglicherweise nicht so prominent oder effektiv, dass das betreffende Unternehmen dadurch nicht mehr gewertet wird.
Anzeigen sind für die Anzeige in fester Größe konzipiert, Bis wir also eine bessere Lösung für Responsive Advertising haben, sollten Sie dies am besten respektieren.
Lassen Sie uns schnell ein generisches Fluid-Layout erstellen, um unser Problem zu demonstrieren. EIN , mit einem und ein . Alles, was wir brauchen:
Dann können wir es so gestalten:
Abschnitt Breite: 90%; Marge: 0 auto; beiseite Breite: 30%; Schwimmer: links; Artikel Breite: 65%; schweben rechts; img max-width: 100%;
Mit etwas mehr Farbe erzielen Sie folgende Wirkung:
Mit unserer img max-width: 100% In der Regel haben wir dafür gesorgt, dass unsere Bilder fließend sind und niemals aus dem übergeordneten Container ausbrechen. Leider ist unsere Flüssigkeit hier weniger als die 300px-Breite des Bildes, genau das, was wir nicht wollen.
Lassen Sie uns die Breite der Seite festlegen, sodass der Artikel das Biegen übernehmen kann. Als Kombination von Fixed und Fluid bezeichnen wir diesen Layouttyp als Hybrid.
Abschnitt Breite: 90%; Marge: 0 auto; beiseite width: 300px; Schwimmer: links; Artikel Breite: 65%; schweben rechts; img max-width: 100%;
Dies funktioniert auf breiteren Bildschirmen, aber sobald der Container zu klein wird, dh: Wenn 300px mehr als 35% der Containerbreite beträgt, wird der Artikel darunter geschoben:
Wir können dies in unserem Fall lösen, indem wir die Markierung umstellen; das beiseite legen im der Artikel:
Entfernen Sie dann die Breite und den Schwebekörper aus dem Artikel und geben Sie schließlich ein Randrecht, um als Rinne zu fungieren:
Abschnitt Breite: 90%; Marge: 0 auto; beiseite width: 300px; Schwimmer: links; rechte Marge: 5%; article img max-width: 100%;
Das bekommen wir:
Welches ist perfekt! Der Artikelinhalt ist fließend, während der Anzeigenblock und sein übergeordnetes Element eine feste Breite haben! Sie können die Seite sogar nach rechts verschieben, indem Sie den Schwimmer in wechseln schweben rechts und die Rinne (ihren Rand) auch auf der anderen Seite platzieren.
Probleme treten jedoch auf, wenn der Artikelinhalt mehr vertikalen Platz einnimmt als nebenbei. Das ist das Ergebnis:
Es gibt Hacks, um dies zu vermeiden; wir könnten der Seite eine massive Bodenpolsterung geben, dann eine ebenso massive Negativ unterer Rand. Dann mit einem Überlauf versteckt Wir verlängern künstlich die Seite und verstecken, was hervorsteht.
Oder wir könnten die Positionierung verwenden und die Seite in der rechten oberen Ecke des Artikels fixieren, wodurch der Artikel etwas Polsterung erhält, um Platz für ihn zu schaffen.
Keines von diesen ist ideal, und jeder präsentiert seine eigenen, einzigartigen Probleme.
Was?! Ich höre dich sagen…
Stimmt. Tischlayouts (Gott ruhen ihre Seelen) waren eigentlich ziemlich gut darin, hybride Layouts zu arrangieren, also nehmen wir ein Blatt aus ihrem Buch. Mit CSS können wir unsere Elemente so darstellen, als wären sie Bestandteile einer Tabelle. Das ist auch absolut in Ordnung. wir benutzen nicht tatsächliche Tabellen in unserem Markup (das wäre schlecht, da wir nicht mit Tabellendaten arbeiten). Wir werden uns einfach zu Tabellenzwecken auf Tische stützen, ohne die semantische Bedeutung zu ändern unseres Dokuments.
Wenn wir zu unserem ursprünglichen Layout zurückkehren (wo Neben- und Artikel nebeneinander standen), können wir das CSS so ändern, dass tischartige Bausteine vorgeschlagen werden. Unser übergreifender Abschnitt wird zur Tabelle, der Artikel und daneben werden die Tabellenzellen darin:
Abschnitt Anzeige: Tabelle; Breite: 90%; Marge: 0 auto; beiseite Anzeige: Tabellenzelle; Breite: 300px; article display: table-cell; img max-width: 100%;
Was gibt uns:
Hmm, nicht ganz richtig. Wir müssen die vertikale Ausrichtung unserer Zellen ändern, da sich Bild und Text hier auf derselben Grundlinie befinden.
beiseite Anzeige: Tabellenzelle; vertikal ausrichten: oben; Breite: 300px; article display: table-cell; vertikal ausrichten: oben;
Immer wenn entweder der Artikel oder die Seite vertikal wächst, wächst der andere mit. Die Anordnung hängt jedoch vom DOM ab. Welches Tabellenzellenelement zuerst im Dokument erscheint, wird auch zuerst (links) unseres Tabellenlayouts angezeigt.
Natürlich können wir das auch in einer Medienabfrage zusammenfassen, so dass dieses Layout nur auf größeren Bildschirmen erscheint. Auf kleineren Bildschirmen sitzt die Seite sauber auf dem Artikel. Schauen Sie sich die Demo an, um zu sehen, wie sich diese verhält.
Die Verwendung der CSS-Tabellendarstellung wird in allen modernen Browsern unterstützt, wurde jedoch erst mit der Veröffentlichung von IE8 von Internet Explorer übernommen.
Bei früheren Browsern sollten Sie daher unbedingt ein Fallback-Stylesheet hinzufügen, das eine alternative Layout-Lösung bietet:
(oder Sie könnten IE7 und darunter einfach ignorieren ...)
Wie Tim auch in seinem Buch erwähnt, werden Windows 7-Telefone auch in den soeben eingestellten ie.css-Stil geladen. Um dies zu verhindern, müssen Sie die Bedingungen ändern:
Da haben wir es also - wer hätte gedacht, dass Tabellenlayouts in Zeiten des responsiven Webdesigns jemals helfen könnten ?! Zugegebenermaßen ist dies nicht die perfekte Lösung, die Sie sich vielleicht gewünscht haben, aber bis CSS-Grid-Layout und Flexbox etwas mehr Zugkraft gewinnen, ist dies eine großartige Alternative.
Accentsconagua