Ab und zu kommt man in die Situation, dass ein YouTube-Video in eine Webseite eingebettet werden muss. YouTube bringt systembedingt schon dynamische Einstellungen wie Breite und Höhe mit, jedoch funtkioniert dies nicht 100%ig responsive. Die Lösung ist einfach: 1) Der YouTube iframe wird in einen DIV-Container gesteckt. <div class=“youtube-responsive“> //Hier der YouTube iframe </div> 2)
Continue reading...
Ab und zu kommt man in die Situation, dass man absolut positionierte Container/Elemente zentrieren muss. Die Lösung dieses Problems ist denkbar einfach, wenn man einmal das Prinzip dahinter verstanden hat. Wie zentriere ich absolut positionierte Elemente? <div id=“absolut-zentriert“>Inhalt</div> #absolut-zentriert { position:absolute; width:500px; left:50%; margin-left:-250px; /* Halbe Breite des Elements */ }
Continue reading...
Retinabildschirme sind immer häufiger auf deutschen Schreibtischen vertreten. Das besondere an Retina-Displays ist die enorm hohe Auflösung von bis zu 5k, zum Beispiel in Apples neuem iMac. Die hohe Pixeldichte macht es dem menschlichen Auge fast unmöglich, die typischen Abstufungen der einzelnen Pixel zu erkennen. Der Vorteil: Das Bild erscheint deutlich schärfer. Der Nachteil: Normale
Continue reading...
Zahlreiche Webseiten setzen auf vollflächige Hintergründe. Doch bei zahlreichen Internetseiten ist die Umsetzung eher schlecht als recht und nicht für alle Geräte und Browsertypen korrekt eingerichtet. Wir zeigen heute einen CSS-Codeschnipsel, der vielen Webdesignern die Zeit des Experimentierens verkürzen könnte: html { background: url(images/hintergrund.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size:
Continue reading...