lidox · October 30, 2015 09:44 · Oct 30, 2015 · Oct 19, 2015 · Oct 19, 2015 · Oct 19, 2015
diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -1,4 +1,5 @@
-# Einleitung
+#Responsive Web Design
+## Einleitung
 Dies ist eine Sammlung nützlicher Tips und Tricks zur Entwicklung Responsiver Webseiten. :ok_hand::relaxed: 
 
 ### Viewport und ([Normalize](https://github.com/necolas/normalize.css/))

diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -1,5 +1,5 @@
 # Einleitung
-Dies ist eine Sammlung nützlicher Tips und Tricks zur Entwicklung Responsiver Webseiten. :ok_hand: :relaxed: 
+Dies ist eine Sammlung nützlicher Tips und Tricks zur Entwicklung Responsiver Webseiten. :ok_hand::relaxed: 
 
 ### Viewport und ([Normalize](https://github.com/necolas/normalize.css/))
 ```HTML

diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -1,5 +1,5 @@
 # Einleitung
-Dies ist eine Sammlung nützlicher Tips und Tricks zur Entwicklung Responsiver Webseiten.
+Dies ist eine Sammlung nützlicher Tips und Tricks zur Entwicklung Responsiver Webseiten. :ok_hand: :relaxed: 
 
 ### Viewport und ([Normalize](https://github.com/necolas/normalize.css/))
 ```HTML

diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -1,3 +1,6 @@
+# Einleitung
+Dies ist eine Sammlung nützlicher Tips und Tricks zur Entwicklung Responsiver Webseiten.
+
 ### Viewport und ([Normalize](https://github.com/necolas/normalize.css/))
 ```HTML
 <!-- Damit wird die spezifische Skalierung der Smartphones ausgestellt --> 
@@ -63,7 +66,7 @@ beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
 Mit [FitVids.js](https://github.com/davatron5000/FitVids.js) werden die Videos responsive eingebunden.
 Link zur [offiziellen Homepage](http://fitvidsjs.com/)
 
-So bindest du es ein:
+######Wie kann ich es ausprobieren?
 ![fitvids code example](https://dl.dropboxusercontent.com/u/27765293/Bilder/github/fitvids_code_example.jpg)
 
 Link zu: [jQuery](http://jquery.com/download/)
diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -1,4 +1,4 @@
-# Viewport und ([Normalize](https://github.com/necolas/normalize.css/))
+### Viewport und ([Normalize](https://github.com/necolas/normalize.css/))
 ```HTML
 <!-- Damit wird die spezifische Skalierung der Smartphones ausgestellt --> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,7 +7,7 @@
 <link rel="stylesheet" href="/css/normalize.css">
 ```
 
-# Media Queries
+### Media Queries
 Media Queries je nach Website anpassen und besser keine fixen Pixelwerte verwenden. 
 Somit selber entscheiden, wann sich das Layout ändert (durch ausprobieren)! 
 ```css
@@ -24,14 +24,14 @@ Somit selber entscheiden, wann sich das Layout ändert (durch ausprobieren)!
     }
 }
 ```
-# Tools für Media Queries 
+### Tools für Media Queries 
 Firefox: Extras, Webentwickler, Bildschirmgrößen testen (Nachteil: Metainfos werden nicht interpretiert)
 
 -> Firefox OS Simulator oder Opera Mobile Emulator (verschiedene Devices zur Auswahl)
 
 Chrome: Hat ein Tool, wo man schlechte Netzwerkverbindungen simulieren kann 
 
-# Clearfix: [Blogbeitrag 2015](http://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/)
+### Clearfix: [Blogbeitrag 2015](http://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/)
 ```css
 /*
 Mit CSS gefloatete Elemente werden aus dem Standard-Dokumentfluss eines HTML-Dokuments entfernt.
@@ -53,8 +53,17 @@ beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
   *zoom: 1; /* Für den IE6 und IE7 */
 }
 ```
-# Texte und Fonts
+### Texte und Fonts
 1. Schriftgrößen mit 'em' (1em= 16px)
 2. @media fontsize: 100%
 3. Gute JS-Plugins:  [Slaptext](https://github.com/freqDec/slabText/) und [FitText](https://github.com/davatron5000/FitText.js)
-4. [Responsive Data Tables](https://css-tricks.com/responsive-data-tables/)
+4. [Responsive Data Tables](https://css-tricks.com/responsive-data-tables/)
+
+### Responsive Videos
+Mit [FitVids.js](https://github.com/davatron5000/FitVids.js) werden die Videos responsive eingebunden.
+Link zur [offiziellen Homepage](http://fitvidsjs.com/)
+
+So bindest du es ein:
+![fitvids code example](https://dl.dropboxusercontent.com/u/27765293/Bilder/github/fitvids_code_example.jpg)
+
+Link zu: [jQuery](http://jquery.com/download/)
diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -56,4 +56,5 @@ beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
 # Texte und Fonts
 1. Schriftgrößen mit 'em' (1em= 16px)
 2. @media fontsize: 100%
-3. Gute JS-Plugins:  [Slaptext](https://github.com/freqDec/slabText/) und [Fittext](https://github.com/davatron5000/FitText.js) 
+3. Gute JS-Plugins:  [Slaptext](https://github.com/freqDec/slabText/) und [FitText](https://github.com/davatron5000/FitText.js)
+4. [Responsive Data Tables](https://css-tricks.com/responsive-data-tables/)
diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -9,7 +9,7 @@
 
 # Media Queries
 Media Queries je nach Website anpassen und besser keine fixen Pixelwerte verwenden. 
-Besser selber entscheiden, wann sich das Layout ändert! 
+Somit selber entscheiden, wann sich das Layout ändert (durch ausprobieren)! 
 ```css
 /* Media Queries hier für Screens / ≥ 568px */
 @media screen and (max-width: 35.5em) {
@@ -26,6 +26,7 @@ Besser selber entscheiden, wann sich das Layout ändert!
 ```
 # Tools für Media Queries 
 Firefox: Extras, Webentwickler, Bildschirmgrößen testen (Nachteil: Metainfos werden nicht interpretiert)
+
 -> Firefox OS Simulator oder Opera Mobile Emulator (verschiedene Devices zur Auswahl)
 
 Chrome: Hat ein Tool, wo man schlechte Netzwerkverbindungen simulieren kann 
@@ -51,4 +52,8 @@ beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
 .clearfix {
   *zoom: 1; /* Für den IE6 und IE7 */
 }
-```
+```
+# Texte und Fonts
+1. Schriftgrößen mit 'em' (1em= 16px)
+2. @media fontsize: 100%
+3. Gute JS-Plugins:  [Slaptext](https://github.com/freqDec/slabText/) und [Fittext](https://github.com/davatron5000/FitText.js) 
diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -1,4 +1,4 @@
-# Viewport und Normalize ([GitHub: normalize.css](https://github.com/necolas/normalize.css/))
+# Viewport und ([Normalize](https://github.com/necolas/normalize.css/))
 ```HTML
 <!-- Damit wird die spezifische Skalierung der Smartphones ausgestellt --> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,7 +8,8 @@
 ```
 
 # Media Queries
-Media Queries je nach Website anpassen und besser keine fixen Pixelwerte
+Media Queries je nach Website anpassen und besser keine fixen Pixelwerte verwenden. 
+Besser selber entscheiden, wann sich das Layout ändert! 
 ```css
 /* Media Queries hier für Screens / ≥ 568px */
 @media screen and (max-width: 35.5em) {
@@ -23,6 +24,11 @@ Media Queries je nach Website anpassen und besser keine fixen Pixelwerte
     }
 }
 ```
+# Tools für Media Queries 
+Firefox: Extras, Webentwickler, Bildschirmgrößen testen (Nachteil: Metainfos werden nicht interpretiert)
+-> Firefox OS Simulator oder Opera Mobile Emulator (verschiedene Devices zur Auswahl)
+
+Chrome: Hat ein Tool, wo man schlechte Netzwerkverbindungen simulieren kann 
 
 # Clearfix: [Blogbeitrag 2015](http://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/)
 ```css

diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -1,15 +1,14 @@
-Viewport und Normalize
+# Viewport und Normalize ([GitHub: normalize.css](https://github.com/necolas/normalize.css/))
 ```HTML
 <!-- Damit wird die spezifische Skalierung der Smartphones ausgestellt --> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <!-- Vereinheitlichung der Styles, da jeder Browser unterschiedliche Standards nutz --> 
 <link rel="stylesheet" href="/css/normalize.css">
-
-[GitHub: normalize.css](https://github.com/necolas/normalize.css/)
 ```
 
-Media Queries
+# Media Queries
+Media Queries je nach Website anpassen und besser keine fixen Pixelwerte
 ```css
 /* Media Queries hier für Screens / ≥ 568px */
 @media screen and (max-width: 35.5em) {
@@ -25,7 +24,7 @@ Media Queries
 }
 ```
 
-Clearfix: [Blogbeitrag 2015](http://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/)
+# Clearfix: [Blogbeitrag 2015](http://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/)
 ```css
 /*
 Mit CSS gefloatete Elemente werden aus dem Standard-Dokumentfluss eines HTML-Dokuments entfernt.

diff --git a/responsive webdesign tips and tricks.md b/responsive webdesign tips and tricks.md
@@ -0,0 +1,49 @@
+Viewport und Normalize
+```HTML
+<!-- Damit wird die spezifische Skalierung der Smartphones ausgestellt --> 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<!-- Vereinheitlichung der Styles, da jeder Browser unterschiedliche Standards nutz --> 
+<link rel="stylesheet" href="/css/normalize.css">
+
+[GitHub: normalize.css](https://github.com/necolas/normalize.css/)
+```
+
+Media Queries
+```css
+/* Media Queries hier für Screens / ≥ 568px */
+@media screen and (max-width: 35.5em) {
+    .navigation .inhalt {
+      float: none;
+      width: auto;
+    }
+
+    /* Liste innerhalb der Navigation ändern */
+    .navigation li {
+      display: inline-block;
+    }
+}
+```
+
+Clearfix: [Blogbeitrag 2015](http://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/)
+```css
+/*
+Mit CSS gefloatete Elemente werden aus dem Standard-Dokumentfluss eines HTML-Dokuments entfernt.
+Andere Elemente verhalten sich daher so, als wären die gefloateten Elemente nicht vorhanden und
+rutschen im Layout häufig an eine unerwünschte Stelle. Um Floats aufzuheben und somit das oben 
+beschriebene Problem zu lösen, wird i.d.R. ein sog. Clearfix eingesetzt.
+*/
+.clearfix::before,
+.clearfix::after {
+  content: " ";
+  display: table;
+} 
+
+.clearfix::after {
+  clear: both;
+}
+
+.clearfix {
+  *zoom: 1; /* Für den IE6 und IE7 */
+}
+```