collected work

KS Ingenieure Referenzbuch

admin — Fri, 18 May 2012 18:02:48 +0000

Layout des KS Referenzbuches unter Berücksichtigung der CI-Richtlinien. Bildkorrekturen und -bearbeitungen sowie die Druckbegleitung waren Teil der Arbeit.

www.ksingenieure.com

Saitenspiel

admin — Fri, 18 May 2012 10:24:19 +0000

Startseite mit den wichtigsten Infos und zwei WP-Seiten für die Spezialisierungen dieser Instrumentenbau-Werkstatt.

www.saitenspiel.at

smart SOMA solutions

admin — Fri, 18 May 2012 10:05:53 +0000

Entwurf mit Einbindung des Logos, Umsetzung in HTML & CSS

www.smartsoma.at

Anschlagtafel

admin — Fri, 18 May 2012 09:55:36 +0000

Die virtuelle Anschlagtafel soll alle Benachrichtigungen, die im Wohnhaus angeschlagen werden, auch online verfügbar machen. Konzept für lunaconsult (www.lunaconsult.com)

Entwurf nach Kundenwunsch, Umsetzung in HTML & CSS

www.anschlagtafel.at

Top Chem

admin — Fri, 18 May 2012 09:40:08 +0000

Entwurf und Umsetzung in HTML & CSS

www.topchem.at

zimmerWG

admin — Fri, 18 May 2012 09:35:00 +0000

Entwurf und Umsetzung in HTML & CSS, jQuery

www.zimmerwg.at

sticky footer

admin — Wed, 16 May 2012 20:38:17 +0000

Ein Footer der immer am unteren Bildschirmrand ist; das kann zweierlei bedeuten:

Der Footer ist immer sichtbar am unteren Rand des Browserfensters, egal ob die Seite gescrollt werden kann oder nicht
Der Footer ist am unteren Rand des Browserfensters, wenn aber gescrollt wird, dann kommt er erst nach dem Content. Er ist also erst sichtbar, wenn zum Ende der Seite gescrollt wurde.

Im Folgenden wird die 2. Art behandelt.

Da diese Technik min-heigth verwendet ist sie nichts für den IE6.

Dem wrapper wird eine minimale Höhe 100% gegeben – dadurch füllt er immer das Browserfenster. Zusätzlich bekommt er die Eigenschaft position:relative. Der Footer liegt innerhalb des wrappers und hat die Eigenschaft position:absolute mit bottom:0 – diese Positionierung bezieht sich auf das nächste Elternelement mit position:relative.

Der footer hat nun eine gewisse Höhe, die Inhalte überlappen könnte. Deshalb kommen alle Inhalte in ein eigenes content-div, das eine margin-bottom hat die der Höhe des Footers entspricht.

Bsp: ein dynamischer sticky footer

CSS

html, body{
padding:0;
margin:0;
height:100%
}
#wrapper{
position:relative;/*damit sich position:absolute auf den wrapper bezieht*/
min-height:100%;/*mindestens das Browserfenster soll gefüllt werden*/
width:100%;/*das ist quasi der neue body, soll also die ganze Breite füllen*/
overflow:auto;/*verhindert Fehler in IE7 und Safari*/
}
#content{
padding:10px;
margin-bottom:100px;/*entspricht der Footer-Höhe*/
}
#stickyfoot{
position:absolute;/*bezieht sich auf den #wrapper*/
bottom:0px;/*der footer ist am unteren Rand vom wrapper*/
height:100px;
width:100%;
background:#000;
color:#fff;
}

HTML

 
 
 Inhalte hier
 
 der footer

CSS 3 – Mehrere Hintergrundbilder

admin — Mon, 14 May 2012 18:43:27 +0000

Mit CSS 3 können mehrere Bilder als Hintergrund verwendet werden. Diese werden in “Layern” übereinander angeordnet. Positionierung und Kachelung erfolgt wie gewohnt. Hier nun die Kurzschreibweise und zwei Beispiele.

Für die Beispiele habe ich eine Template angelegt, das die Mitte des Browserfensters mit einem kleinen schwarzen Quadrat anzeigt. Der IE6 kann das nicht, da die Beispiele aber CSS 3 demonstrieren, ist das egal.

Hier wird vieles möglich! Die background-Definition kann in zukünftigen CSS-files sehr lang werden!

Bsp. 1: 3 Hintergrundbilder in der Mitte des Browserfensters

body{
background: url("bgimage1.jpg") center center fixed no-repeat, url("bgimage2.jpg") center center fixed no-repeat, url("bgimage3.jpg") center center fixed no-repeat;
}

Bsp. 2: 3 Hintergrundbilder unterschiedlich angeordnet

body{
background: url("bgimage1.jpg") 60% 30% no-repeat, url("bgimage2.jpg") top right fixed no-repeat, url("bgimage3.jpg") repeat-y;
}

Bildschirmfüllendes Bild mit css

admin — Wed, 09 May 2012 14:57:02 +0000

CSS3 macht es nett und angenehm, leider sind nicht alle Browser dafür bereit: ein Bild als Hintergrund der Seite soll immer den ganzen Bildschirm (oder eben das Browserfenster) füllen, nicht verzerrt sein und möglichst noch mittig platziert werden.

Eines vorweggenommen: Ich fand keine reine CSS Lösung, die das auch für IE6 und IE7 möglich macht. Ohne der mittigen Platzierung gibt es Möglichkeiten, ohne proportionales skalieren sowieso. Hier nun Techniken für oben beschriebenen Fullscreen-Effekt.

Technik1: Kurz und einfach mit CSS3

background: url(dasBild.jpg) no-repeat center center fixed;
background-size: cover;

bzw. gibt es diese browsereigenen Bezeichnungen – zur Sicherheit:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

Für alle Browser, die CSS3 unterstützen.

Bsp.: Fullscreen mit CSS3

Auch für CSS2 gibt es Möglichkeiten. Zwei habe ich hier gefunden: http://css-tricks.com/perfect-full-page-background-image/ - teilweise ergänzt mit Tips von: http://paulmason.name/item/full-screen-background-image-pure-css-code

Für beide Techniken gilt: Damit sich das Bild dynamisch an das Browserfenster anpasst, muss es innerhalb eines tag im HTML stehen. Das Bild ist bei mir das erste Element nach . Wie so oft gilt auch für diese Techniken, dass alte Versionen des Internet Explorers Probleme machen.

Technik 2 : skalieren mit einer class, positionieren mit @media query

img.bg {
min-height: 100%;
min-width: 1400px; /*tatsächliche Bildbreite*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0; }

Die zentrierte Positionierung erfolgt über eine @media Abfrage mit max-width und max-height. Der Internet Explorer kann damit erst ab Version 9 etwas anfangen, ebenso macht Opera Probleme mit der Positionierung…

@media screen and (max-width: 1400px) { /*tatsächliche Bildbreite*/
img.bg {
left: 50%;
margin-left: -700px; /* die Hälfte von meinem Bild*/
} }

@media screen and (max-height: 937px) { /*tatsächliche Bildhöhe*/
img.bg {
left: 50%;
margin-top: -465px; /* die Hälfte von meinem Bild*/
} }

FAZIT: Schön, einfaches HTML, die @media query mit width funktioniert allerdings erst ab Version 9 des Internet Explorers

IE6 und IE5: Wenn der tag im HTML gleich nach dem body kommt, dann liegt das Bild ÜBER dem Inhalt. Wenn es im HTML am Ende geschoben steht (über dem schliessenden tag) wird auch hier das Bild als Hintergrund angezeigt.

In IE6 funktioniert diese fullscreen-Technik nicht, weil dieser Browser min-width und min-height nicht kennt. Stattdessen interpretiert er die normale width und height als Minimalgrössen und skaliert dementsprechend (width:100%, height:auto).

Bsp.: CSS2 Technik 1

Technik 3: div mit 200%, img mit 50%

diese Technik setzt das Bild in ein eigenes div, das doppelt so gross wie das Browserfenster ist, und zentriert es darin. Das Bild füllt nun dieses div aus oder ist zumindest halb so hoch oder breit, was der Grösse des Browserfensters entspricht.

html, body{/*vor allem notwendig für IE...*/
padding:0;
margin:0;
overflow:auto;
}

#bg { position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%; }

#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}

Fazit: mehr HTML und teilweise überraschende skalierungen

Probleme in IE6 und IE7: scrollbar, skalierung und positionierung… (Kommentare dazu sind willkommen! Ich teste hauptsächlich mit http://netrenderer.de/)

Während IE6 fullscreen schafft, aber Probleme mit den scrollbalken macht, verhaut IE7 den fullscreen völlig…

Funktioniert ab IE8

Bsp.: CSS2 Technik 3

Ein wirklich grosses Problem sind die fehlenden Scrollbalken in IE6 und IE7 (der netrenderer zeigt sie nicht an), denn dabei geht es um fehlende Information auf der Seite, und nicht nur um ein fancy Background image.

Technik 4: Technik 3 mit extra scrollbalken

Eine dritte Alternative fand ich auf http://www.drweb.de/magazin/100-hintergrundbild-im-browser/. Diese Technik entfernt die scrollbalken vom body und setzt den gesamten Inhalt in einen container mit scrollbalken… Nicht gerade schön, und das Demo auf dieser Seite ist auch nicht mit zentriertem Bild, aber immerhin kommen auch IE6 Nutzer zur Information.

Ich habe diese Technik mit der zweiten fullscreen Technik kombiniert. Das Ergebnis: IE6 macht einen fullscreen, nicht zentriert mit scrollbar; IE7 macht irgendetwas mit scrollbar; ab IE8 läufts.

body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
overflow:hidden;/*der scrollbar wird vom body entfernt*/
position: relative;
}

#bgimg { /*Hintergrundbild wie bei der zweiten Technik*/
position:fixed;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
z-index:1; }

#bgimg img{
position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;/*rückt es in die mitte*/
 min-width:50%;
 min-height:50%;
}

#scrollbar {/*das ist der Container mit scrollbar*/
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 overflow:auto;
 z-index:2;}

#content{
position:relative;
width:600px;
margin:0 auto;
border:1px solid #fff;
color:#000;
padding:10px;
z-index:10;/*der content muss nun im z-index drüber liegen*/
}

Bsp.: Die bestmögliche fullscreen-Lösung?

Techniken Webdesign

admin — Wed, 09 May 2012 09:40:00 +0000

Nützliches für Webdesign

Diese Artikel beinhalten Beispielseiten mit Erklärung zu verschiedensten Techniken, die ich für Webdesigns verwende. Es sind in erster Linie Merkhilfen für mich, außerdem habe ich HTML und CSS Beispiele gerne online zur Verfügung zum Testen. Wenn auch Nützliches für andere dabei ist – umso besser!

Ich bemühe mich immer anzugeben, wer eine der Techniken erfunden, geschrieben oder veröffentlicht hat, und verlinke zu Seiten mit mehr Infos. Teilweise handelt es sich um Artikel in englischer Sprache, meine Artikel sind immer auf deutsch.

Kommentare, Korrekturen, Anregungen,… sind willkommen und werden nach Möglichkeit eingearbeitet werden!