Raster Eigenschaften - Reiter Container
Modul Applikationen
Raster
Eigenschaften
|
Die folgenden Einstellungen in diesem Dialog werden ignoriert, wenn Sie die Einstellung
Gleiche Containerhöhe auf dem Reiter
Allgemein gesetzt haben:
- Zentriert
- Letzten Container immer am rechten Rasterrand positionieren
Die Vorschau im unteren Bereich stellt das Ergebnis der beiden Einstellungen trotzdem dar, auch wenn sie in diesem Fall keine Auswirkung haben.
|
Bildschirmgröße
Hier können Sie die Container des Rasters pro Bildschirmgröße mit Klick auf die entsprechende Schaltfläche (S = SMALL, M = MEDIUM, L = LARGE) bearbeiten.
|
Wir empfehlen, mit dem Layout für die Display-Einstellung SMALL zu beginnen.
Naturgemäß wird die Darstellung auf kleineren Endgeräten wie z.B. Smartphones die größte Herausforderung
an die Darstellung der Inhalte stellen. Sind alle Container für die kleinste Bildschirmgröße erstellt,
so kann daraus sehr schnell und einfach die Darstellung auf größeren Endgeräten entwickelt werden.
|
Spalte Container
Mit Doppelklick auf den Namen eines Containers wird ein Dialog geöffnet, in dem Sie den Containernamen ändern können.
Spalte Breite
Klicken Sie in die Spalte, um den gewünschten Wert aus einer Liste auszuwählen.
Weitere Informationen zu dieser Einstellung finden Sie
hier.
|
Wenn der Inhalt eines Containers durch feste Breitenangaben größer ist als der Container selbst,
läuft dieser über die Containergrenze hinaus. Der überstehende Inhalt wird von nachfolgenden
Containern überlappt. Das responsive Verhalten der Container wird nicht gestört. Wird auf die
Verwendung von Elementen verzichtet, so kann der Überlauf über die Containergrenze vermieden werden.
Dem betroffenen responsiven Container oder einer Gruppierung innerhalb eines responsiven Containers
kann auch ein individueller Style vergeben werden, um das Overflow-Verhalten zu steuern.
Der überlappende Bereich kann mit der CSS-Eigenschaft overflow-x: hidden
ausgeblendet oder horizontale Scrollbalken mit der CSS-Eigenschaft
overflow-x:scroll eingeblendet werden.
|
Spalte Sichtbar
Mit dieser Einstellung ist der jeweilige Container im Raster sichtbar. Weniger wichtige Inhalte
können auf kleinen Geräten ausgeblendet werden. Nachfolgende Container schließen auf, so dass
keine Lücke entsteht. Bitte beachten Sie, dass ausgeblendete Container trotzdem auf jedem Gerät
vorhanden sind. Es werden dadurch nicht weniger Daten übertragen.
Spalte Zentriert
Mit dieser Einstellung behalten alle Container, die vor dem zentrierten Container
im Raster angeordnet sind, ihre Position bei. Der übrige Platz in der Zeile ist
für den zentrierten Container reserviert. Der zentrierte Container wird nicht
mittig im reservierten Platz positioniert, sondern horizontal in der Mitte des gesamten Rasters.
Nehmen die vorherigen Container bereits die Hälfte (oder mehr) des Platzes ein, kommt es zu
einer Überlappung des zentrierten Containers.
Gibt es auf den zentrierten Container folgende Container, werden diese in die nächste Zeile
umgebrochen und ab Rasterposition 1 angeordnet. Auch hier ist die Regel gültig, dass der letzte
Container in einer Zeile am rechten Rand positioniert wird. Dieser kann durch Abschalten der
Einstellung
Letzten Container immer an rechten Rasterrand positionieren
an die anderen Container herangezogen werden.
Generell ist zu empfehlen, die Einstellung
Zentriert
nur dann auf einen Container anzuwenden, wenn dieser alleine im Raster vorkommt und
nicht die kompletten 12 Rastereinheiten einnehmen soll.
Spalte Versatz
Diese Eigenschaft ermöglicht es, einen Container um eine bestimmte Anzahl
Rastereinheiten nach rechts zu verschieben. Nachfolgende Container werden
dabei ebenfalls verschoben.
Spalte Innenabstand links, rechts
Ist diese Einstellung nicht gesetzt, so wird der Container ohne Innenabstand
links bzw. rechts dargestellt.
Spalte Push / Pull
Diese Eigenschaften ermöglichen es, einen Container um eine bestimmte Anzahl
Rastereinheiten nach rechts bzw. links zu sortieren. Im Gegensatz zur
Einstellung
Versatz werden dabei nachfolgende Container
nicht verschoben. In der Regel werden die Eigenschaften
Push
und
Pull zum Vertauschen von Containern gleicher Größe eingesetzt.
Dabei erhält ein Container die Eigenschaft
Push (Verschieben nach rechts)
und der zweite Container die Eigenschaft
Pull (Verschieben nach links).
Bitte beachten Sie, dass sich Container bei ungünstigen Werten für
Push
bzw.
Pull überlappen können, was in der Regel zu unerwünschten Ergebnissen führt.
Letzten Container immer am rechten Rasterrand positionieren
Ist diese Einstellung nicht gesetzt, so wird der letzte Container direkt an den Vorgänger positioniert.
Vorschau
Im unteren Bereich des Dialogs sehen Sie eine Vorschau der aktuellen Konfiguration.
Schaltflächen im Dialog
Spalte hinzufügen
Eine neue Spalte wird erstellt.
Spalte löschen
Entfernt die in der Liste markierte Spalte.
Spalte bearbeiten
Öffnet einen Dialog, in dem der Titel der Spalte bearbeitet werden kann.
Reihenfolge ändern
Verschiebt die markierte Spalte nach oben bzw. unten.
|
Beim Löschen einer Spalte werden auch die enthaltenen Elemente gelöscht.
Ein entsprechender Hinweis wird vor dem Löschen ausgegeben.
|
Allgemeine Informationen
Weitere Informationen zum Thema
responsives Layout
finden Sie
hier.