Holy Grail Layout für Contao 3.2

von Oliver Richter (Kommentare: 0)

Holy Grail Layout mit Contao 3.2 

Hier ein kurzes Beispiel zur Umsetzung des Holy Grail Layout für Contao 3.2. Dabei soll die linke und rechte Spalte jeweils 300 Pixel breit sein, die Innenabstände sind auf 10 Pixel eingestellt. Die Ansicht eignet sich nur für Bildschirme mit mehr als 1000 Pixeln in der Breite. Zwangsläufig müssen für kleine Anzeigegeräte entsprechende optimierte Ausgaben erfolgen; diese sind hier nicht berücksichtigt. 

 

div#wrapper { width: 100%; }

div#wrapper #header { position: relative; z-index: 1; }
div#wrapper #header div.inside { padding: 10px; }

div#wrapper #container { position: relative; z-index: 1; padding: 0px 300px 0px 240px;}
div#wrapper #container:after { display: block; content: ""; clear: both; }

div#wrapper #container #main { float: left; width: 100%; min-height: 50px; }
div#wrapper #container #main div.inside { padding: 10px; }

div#wrapper #container #left { position: relative; right: 300px; margin-left: -100%; width: 300px; float: left; }
div#wrapper #container #left div.inside { padding: 10px; }

div#wrapper #container #right { position: relative; margin-right: -100%; width: 300px; float: left; }
div#wrapper #container #right div.inside { padding: 10px; }

div#wrapper #footer { position: relative; z-index: 1; }
div#wrapper #footer div.inside { padding: 10px; }

Zurück

Einen Kommentar schreiben

Bitte addieren Sie 3 und 2.

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht.