CSS & Layout

Webdesign in Reutlingen – Grundkurs

von

Neues Webdesign Seminar im August 2023 in der VHS Reutlingen

Grundlagen: Webseitenerstellung und Webdesign

In diesem Webdesign Grundkurs erlernen Sie alle notwendigen Kenntnisse zum Erstellen Ihrer ersten Webseite. Die Sprachen HTML und CSS bilden dafür die Basis. Nützliche Programme, die das Erstellen Ihrer Homepage erleichtern, werden vorgestellt.

Vorkenntnisse: Sicherer Umgang mit dem PC, Windows und Internet

3 Abende, 21.08.2023 – 23.08.2023
18:15 – 21:30 Uhr, 15 Min. Pause
3 Termin(e)
Achim Siegmund
233E440700
Haus der Volkshochschule, Spendhausstraße 6, 72764 Reutlingen, Raum: 212, DV, 2. OG
106,00 €

Anmeldung auf den Seiten der VHS Reutlingen:

Programmseite: Webdesign Grundkurs in Reutlingen

Webdesign Grundkurs – HTML & CSS

von

Neues Webdesign-Seminar im Oktober 2019 in der VHS Reutlingen

Grundlagen der Webseitenerstellung

In diesem Webdesign Grundkurs erlernen Sie alle notwendigen Kenntnisse zum Erstellen Ihrer ersten Webseite. Die Sprachen HTML und CSS bilden dafür die Basis.
Nützliche Programme, die das Erstellen Ihrer Homepage erleichtern, werden vorgestellt.

Vorkenntnisse: Sicherer Umgang mit dem PC, Windows und Internet

3 Abende, 08.10.2019 – 22.10.2019
Dienstag, wöchentlich, 18:15 – 21:30 Uhr, 15 Min. Pause
3 Termin(e)
Achim Siegmund
Dv4418
Haus der Volkshochschule, Spendhausstraße 6, 72764 Reutlingen, Raum: 212, DV, 2. OG
99,00 €
Fachkursförderung: ja (mehr Infos hier)

Anmeldung auf den Seiten der VHS Reutlingen:

https://www.vhsrt.de/Veranstaltung/cmx5cc0480d87e85.html

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):