CSS - Grid Snippets - Versionsgeschichte

Steff: /* Siehe auch */

2018-07-20T13:36:16Z

Siehe auch

Steff am 20. Juli 2018 um 13:35 Uhr

2018-07-20T13:35:59Z

37.49.32.84: /* Höhe eines Elements per JavaScript auf 100% einstellen */

2017-03-20T17:48:47Z

Höhe eines Elements per JavaScript auf 100% einstellen

37.49.32.84 am 20. März 2017 um 17:48 Uhr

2017-03-20T17:48:15Z

37.49.32.84: /* Seitenverhältnis von Divs einhalten */

2017-02-28T11:35:42Z

Seitenverhältnis von Divs einhalten

37.49.32.84 am 28. Februar 2017 um 11:34 Uhr

2017-02-28T11:34:58Z

37.49.32.84: /* Seitenverhältnis von Divs einhalten */

2017-02-28T11:32:07Z

Seitenverhältnis von Divs einhalten

37.49.32.84 am 28. Februar 2017 um 11:24 Uhr

2017-02-28T11:24:58Z

37.49.32.84: Die Seite wurde neu angelegt: „/* Aspect grid by stephanschlegel.de / /* 4 col grid uses the following ratios (one…“

2017-02-28T11:09:33Z

Die Seite wurde neu angelegt: „********************************** Aspect grid by stephanschlegel.de ***********************************: /*** 4 col grid uses the following ratios (one…“

Neue Seite

/***********************************
Aspect grid by stephanschlegel.de
************************************/

/*** 4 col grid uses the following ratios (one quater has ratio 3:4) ***/
/* 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;}
.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;
}

@@ Zeile 1: / Zeile 1: @@
 == Siehe auch ==
-<pre>
-[[CSS - Grid]]
+ [[CSS - Grid]]
-[[CSS - Flexbox]]
+ [[CSS - Flexbox]]
-</pre>
 == Seitenverhältnis, volle Höhe oder feste Höhe ==
 Beim Layout gibt es verschiedene Möglichkeiten wie man Container Elemente gestalten kann. Im einfachsten Fall passt sich die Höhe eines Elements dem Inhalt an.

← Nächstältere Version		Version vom 20. Juli 2018, 13:35 Uhr
Zeile 1:		Zeile 1:
		+	== Siehe auch ==
		+	<pre>
		+	[[CSS - Grid]]
		+	[[CSS - Flexbox]]
		+	</pre>
	== Seitenverhältnis, volle Höhe oder feste Höhe ==		== Seitenverhältnis, volle Höhe oder feste Höhe ==
	Beim Layout gibt es verschiedene Möglichkeiten wie man Container Elemente gestalten kann. Im einfachsten Fall passt sich die Höhe eines Elements dem Inhalt an.		Beim Layout gibt es verschiedene Möglichkeiten wie man Container Elemente gestalten kann. Im einfachsten Fall passt sich die Höhe eines Elements dem Inhalt an.

@@ Zeile 5: / Zeile 5: @@
 Hier gibt es verschiedene Ansätze.
-=== Höhe eines Elements per JavaScript auf 100% einstellen ===
+=== Höhe eines Elements per JavaScript auf 100% Bildschirmhöhe einstellen ===
 <syntaxhighlight lang="html5">
 <div class="fullHeight>
@@ Zeile 35: / Zeile 35: @@
      });
 </syntaxhighlight>
 === Aspect Ratio Divs - Seitenverhältnis einhalten ===
 Bei Gridbasierten Layouts ist es schön, wenn die Höhe sich so der Breite anpasst, dass immer das gleiche Seitenverhä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)

← Nächstältere Version		Version vom 20. März 2017, 17:48 Uhr
Zeile 1:		Zeile 1:
−	== Aspect Ratio Divs - Seitenverhältnis einhalten ==	+	== Seitenverhältnis, volle Höhe oder feste Höhe ==
		+	Beim Layout gibt es verschiedene Möglichkeiten wie man Container Elemente gestalten kann. Im einfachsten Fall passt sich die Höhe eines Elements dem Inhalt an.
		+
		+	In manchen Layouts möchte man z.B. das ein Bild oder ein Slider oder auch das ganze Layout die '''komplette Höhe des Browserfensters''' einnimmt. Wenn man Elemente relativ oder absolut positioniert kann man hier die 100% height Angabe verwenden. Was aber, wenn nur das oberste Element (z.B. ein Bild) den ganzen Raum einnehmen soll und trotzdem danach weitere Elemente kommen sollen.
		+	Hier gibt es verschiedene Ansätze.
		+
		+	=== Höhe eines Elements per JavaScript auf 100% einstellen ===
		+	<syntaxhighlight lang="html5">
		+	<div class="fullHeight>
		+	<div class="inner">
		+	The Content
		+	</div>
		+	</div>
		+	</syntaxhighlight>
		+	JavaScript (jQuery)
		+	<syntaxhighlight lang="javascript">
		+	/* 100 % height elements and more if inner is to big*/
		+	$(function(){
		+	var windowH = $(window).height();
		+	var wrapperH = $('.fullHeight').height();
		+	if(windowH > wrapperH) {
		+	$('.fullHeight').css({'height':($(window).height())+'px'});
		+	}
		+	$(window).resize(function(){
		+	var windowH = $(window).height();
		+	var wrapperH = $('.fullHeight').height();
		+	var differenceH = windowH - wrapperH;
		+	var newH = wrapperH + differenceH;
		+	var truecontentH = $('#fullHeight .inner').height();
		+	if(windowH > truecontentH) {
		+	$('#fullHeight').css('height', (newH)+'px');
		+	}
		+
		+	})
		+	});
		+	</syntaxhighlight>
		+	=== Aspect Ratio Divs - Seitenverhältnis einhalten ===
	Bei Gridbasierten Layouts ist es schön, wenn die Höhe sich so der Breite anpasst, dass immer das gleiche Seitenverhä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)		Bei Gridbasierten Layouts ist es schön, wenn die Höhe sich so der Breite anpasst, dass immer das gleiche Seitenverhä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)

@@ Zeile 1: / Zeile 1: @@
-== Seitenverhältnis von Divs einhalten ==
+== Aspect Ratio Divs - Seitenverhältnis 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)
+Bei Gridbasierten Layouts ist es schön, wenn die Höhe sich so der Breite anpasst, dass immer das gleiche Seitenverhä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.

@@ Zeile 59: / Zeile 59: @@
    position: relative;
+}
-/* Text Positioning */
-.slide-child a.full{
+/* Text positioning */
    display: table-cell;
    padding: 3%;
@@ Zeile 67: / Zeile 74: @@
    color: inherit;
+}
-.inner{
 </syntaxhighlight>
@@ Zeile 81: / Zeile 83: @@
            <div class="a-6-4">
              <div id="box-3"class="stretch">
-               <div class="slide-child">
+               <div class="child">
                  <div class="inner">
                    <a class="full" href="#">
@@ Zeile 97: / Zeile 99: @@
          <div class="col m6 s12 no-padding">
            <div class="a-6-4">
-             <div id="box-4" data-state="" class="stretch slide-parent hoveractive">
+             <div id="box-4" class="stretch">
-               <div class="slide-child initialposition">
+               <div class="child">
                  <div class="inner">
                    <a class="full" href="#">

@@ Zeile 1: / Zeile 1: @@
 /***********************************
    Aspect grid by stephanschlegel.de
 ************************************/
 /* set height of div so that bg keeps the aspect ratio */
 .stretch{ /*needs pos relative or absolute to work*/
@@ Zeile 9: / Zeile 12: @@
    height: 100%;
+}
-.col{ background: grey;}
+/*** Common ratios for 4 col grid
 .a-3-4{ /* 3:4 Aspect Ratio */
    width: 100%;
@@ Zeile 33: / Zeile 38: @@
    position: relative;
+}
 /* other common ratios */
 .a-1-1{
@@ Zeile 40: / Zeile 44: @@
    position: relative;
+}
 .a-4-3{
    width: 100%;
@@ Zeile 47: / Zeile 49: @@
    position: relative;
+}
 .aspect-8-5{
    width: 100%;
@@ Zeile 53: / Zeile 54: @@
    position: relative;
+}
 .a-16-9{
    width: 100%;
@@ Zeile 59: / Zeile 59: @@
    position: relative;
+}

CSS - Grid Snippets - Versionsgeschichte

Steff: /* Siehe auch */

Steff am 20. Juli 2018 um 13:35 Uhr

37.49.32.84: /* Höhe eines Elements per JavaScript auf 100% einstellen */

37.49.32.84 am 20. März 2017 um 17:48 Uhr

37.49.32.84: /* Seitenverhältnis von Divs einhalten */

37.49.32.84 am 28. Februar 2017 um 11:34 Uhr

37.49.32.84: /* Seitenverhältnis von Divs einhalten */

37.49.32.84 am 28. Februar 2017 um 11:24 Uhr

37.49.32.84: Die Seite wurde neu angelegt: „/*********************************** Aspect grid by stephanschlegel.de ************************************/ /*** 4 col grid uses the following ratios (one…“

37.49.32.84: Die Seite wurde neu angelegt: „/* Aspect grid by stephanschlegel.de / /* 4 col grid uses the following ratios (one…“