CSS & Layout

Responsive embed Youtube Video

von

Da sich Youtube-Videos am einfachsten per iframe einbetten lassen, ist die responsive gestaltete Website schnell gar nicht mehr so richtig responsive. Dieses Problem läßt sich durch einen CSS-gestylten Container beseitigen. Dazu wrappt man das iframe-Element mit einem div-Container folgendermaßen:

<div class="video-container-name">.....</div>

und stylt den Container mit folgenden CSS-Anweisungen:


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Das Ergebnis könnt Ihr hier ausprobieren (einfach das Browserfenster verkleinern):

Sass – dynamische Erzeugung von CSS

von

Webdesigner werden in letzter Zeit immer öfter mit den Begriffen Sass, Less und Stylus konfrontiert. Bisher habe ich mich noch nicht eingehender mit diesen Style-Sheet Sprachen beschäftigt. Das könnte sich ändern, denn im nachfolgenden Video wird auf einfache Weise erklärt, was es z.B. mit Sass auf sich hat und wie es sinnvoll eingesetzt werden kann.

Weiter Infos zu Sass:
http://sass-lang.com/
http://de.wikipedia.org/wiki/Sass_(Stylesheet-Sprache)

Neue Homepage ab 300 Euro

von

praxis-birgelIn dieser Woche habe ich die komplett neugestaltete Homepage der Physiotherapie-Praxis Birgel fertiggestellt. Die Website ist mit Hilfe von WordPress realisiert und kann auf allen Viewports (Smartphones, Tablets und PCs) problemlos betrachtet werden.

Für die Realisierung des responsive Design wurde das Bone-Template auf die Bedürfnisse der Physiotherapie-Praxis angepasst.

Eine Homepage ähnlich dieser kann ich ab 300 Euro auch für Sie erstellen. Über Ihre Kontaktaufnahme freue ich mich jederzeit.