Webdesign
Webseiten-Programmierung ist ein weites Feld, als statische Seite oder besser als CMS, und dann als Typo3 oder WordPress (wie diese Seite).
Um Seiten erstellen zu können benötigt man Kenntnisse in verschiedenen Sprachen. HTML, CSS, JavaScript, PHP, MySQL …
Selbst zur Erstellung einer WordPress-Seite werden Zusatzkenntnisse gebraucht, sobald Anpassungen gewünscht werden.
In meiner Lehrtätigkeit vermittle ich dieses Wissen. Darüber hinaus erstelle ich Webseiten und unterstütze Partner bei ihren Projekten.
In den nächsten Wochen werden interessante praktische Tipp´s auf der Seite gesammelt. Dabei sind Themen um html/css/js wie auch zum Thema CMS geplant.
Als Appetithappen schon mal zwei Beiträge:
- js (jQuery) – Code um den Link in der Navi hervorzuheben,
der per Navi-Link angewählt ist bzw.
beim Scrollen durch den jeweiligen Inhaltsbereich durchlaufen wird.
ansehen ⇒ - css – column, Spaltigkeit für längere Texte … aber auch für Bildergalerien
(direkt im Anschluss)
Column
Allgemeine Anwendung
Mit column steht eine sehr komfortable Möglichkeit zur spaltigen Darstellung von Texten zur Verfügung.
.spalten {
column-count: 3; /*Anz.Spalten*/
column-width: 200px; /*Mindestweite einer Spalte*/
column-rule: 2px solid red;/*Trennlinie zwischen den Spalten*/
column-gap: 40px; /*Spaltenabstand*/
}
Diese einfachen Eigenschaften werden von den aktuellen Browsern sauber umgesetzt und ermöglichen es längere Texte spaltig darzustellen. Die Darstellung ist durch die Angabe einer Spaltenmindestweite (column-width) automatisch responsiv.
(ie > 9; firefox > 52 ohne prefix; crome > 49 ohne prefix; safari > 8 ohne prefix)
Verwendung zur Darstellung von Foto-Rastern
Eine weitere sinnvolle Anwendungsmöglichkeit ergibt sich bei der Darstellung von mehreren Grafiken.
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
font:16px Arial,
sans-serif;
}
.photos {
max-width: 990px;
margin: auto;
background: #aaa;
column-count: 4;
column-width: 200px;
column-gap: 0;
}
.photos img {
display: block;
padding: 1px;
}
html:
<section class="photos">
<img src="img/h1.jpg" alt="">
<img src="img/h2.jpg" alt="">
<img src="img/h3.jpg" alt="">
<img src="img/h4.jpg" alt="">
<img src="img/h5.jpg" alt="">
<img src="img/h6.jpg" alt="">
<img src="img/h7.jpg" alt="">
<img src="img/h8.jpg" alt="">
<img src="img/h9.jpg" alt="">
<img src="img/h10.jpg" alt="">
<img src="img/h11.jpg" alt="">
<img src="img/h12.jpg" alt="">
<img src="img/h13.jpg" alt="">
<img src="img/h14.jpg" alt="">
</section>
Die img-Tags können auch durch den Code für Lightbox o.ä. erweitert werden.
Viel Spaß beim testen!