CSS - Grid Snippets: Unterschied zwischen den Versionen
| Zeile 58: | Zeile 58: | ||
padding-top: 56.25%; /* 16:9 Aspect Ratio */ | padding-top: 56.25%; /* 16:9 Aspect Ratio */ | ||
position: relative; | position: relative; | ||
| + | } | ||
| + | /* Text Positioning */ | ||
| + | .slide-child a.full{ | ||
| + | display: table-cell; | ||
| + | padding: 3%; | ||
| + | vertical-align: bottom; | ||
| + | text-decoration: none; | ||
| + | color: inherit; | ||
| + | } | ||
| + | .inner{ | ||
| + | display: table; | ||
| + | margin: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | <syntaxhighlight lang="html5" | + | |
| + | HTML (basiert auf materializecss grid) | ||
| + | <syntaxhighlight lang="html5"> | ||
| + | <div class="row no-margin"> | ||
| + | <div class="col m6 s12 no-padding"> | ||
| + | <div class="a-6-4"> | ||
| + | <div id="box-3"class="stretch"> | ||
| + | <div class="slide-child"> | ||
| + | <div class="inner"> | ||
| + | <a class="full" href="#"> | ||
| + | <h2>Leistungen</h2> | ||
| + | <p>Steuerberatung für Privatpersonen und <br> | ||
| + | Unternehmen. Kompetenz aus einem <br> | ||
| + | komplementären Team.</p> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="col m6 s12 no-padding"> | ||
| + | <div class="a-6-4"> | ||
| + | <div id="box-4" data-state="" class="stretch slide-parent hoveractive"> | ||
| + | <div class="slide-child initialposition"> | ||
| + | <div class="inner"> | ||
| + | <a class="full" href="#"> | ||
| + | <h2>Ihre<br>Karriere</h2> | ||
| + | <p>Starten Sie mit uns durch. Wir bieten für <br> | ||
| + | Sie ganz unterschiedliche Modelle zur <br> | ||
| + | Ausbildung oder zum Job.</p> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </div><!-- row end --> | ||
Version vom 28. Februar 2017, 12:32 Uhr
Seitenverhältnis von Divs einhalten
Bei Gridbasierten Layouts ist es schön, wenn die Höhe sich so der Breite anpasst, dass immer das gleiche Verhältnis entsteht. So kann man schöne Raster erstellen. Mit Hintergrundbildern passt sich das Bild dann z.B. einer nebenstehenden Textbox an. Oder man kann Text in Divs unten ausrichten und hat trotzdem immer eine passende Höhe (table-cell zum unten ausrichten). Funktioniert z.B. schön in einem 4er Grid. Anwendungsbeispiele: Schlueter-kollegen.de, janna-mode.de (Stand Anfang 2017)
Dieses Beispiel ist für ein 4er Raster optimiert, bei dem man von einer Grundeinheit von 4:3 ausgeht. Will man jetzt mehrere Spalten überstreichen ergeben sich automatisch bei gleicher Höhe die nächsten Seitenverhältnisse.
/***********************************
Aspect grid by stephanschlegel.de
************************************/
/* set height of div so that bg keeps the aspect ratio */
.stretch{ /*needs pos relative or absolute to work*/
width: 100%;
height: 100%;
}
.col{ background: grey;}
/*** Common ratios for 4 col grid
(base is: one quarter has ratio 3:4) ***/
.a-3-4{ /* 3:4 Aspect Ratio */
width: 100%;
padding-top: 133.3333%;
position: relative;
}
.a-6-4,
.a-3-2{
width: 100%;
padding-top: 66.6666%;
position: relative;
}
.a-9-4{
width: 100%;
padding-top: 44.4444%;
}
.a-12-4,
.a-6-2,
.a-3-1{
width: 100%;
padding-top: 33.3333%;
position: relative;
}
/* other common ratios */
.a-1-1{
width: 100%;
padding-top: 100%; /* Square */
position: relative;
}
.a-4-3{
width: 100%;
padding-top: 75%; /* 4:3 Aspect Ratio */
position: relative;
}
.aspect-8-5{
width: 100%;
padding-top: 62.5%; /* 8:5 Aspect Ratio */
position: relative;
}
.a-16-9{
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
position: relative;
}
/* Text Positioning */
.slide-child a.full{
display: table-cell;
padding: 3%;
vertical-align: bottom;
text-decoration: none;
color: inherit;
}
.inner{
display: table;
margin: 0;
width: 100%;
height: 100%;
}
HTML (basiert auf materializecss grid) <syntaxhighlight lang="html5">
