Erstellung von Websites, Gutachterliche Tätigkeit, Fotografie. Ein Überblick zu den Tätigkeiten und gleichzeitig Ausstellungsraum.

s-zigan.de

Digitale Medien und mehr

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.

Bei Interesse nutzen Sie sogleich das Kontaktformular.

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 ein Beitrag zum css-Thema COLUMN:


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!

Beispiel-Datei