interaktion via CSS: inhalts-verzeichnis

warum interaktion via css?

viele user haben javascript deaktiviert
css läuft praktisch immer
realisation [für designer] einfacher
css-interpreter verzeiht mehr als javascript interpreter
das lästige preloading via javascript entfällt
sprite-technik erfordert nur das herunterladen EINER datei
website läd schneller

:hover, der auslöser von interaktivität

:hover = wenn der cursor sich auf einem element gefindet
muss nicht grundsätzlich zusammen mit <a href="…"> stehen!
außer für internet explorer > 7…

<!-- html -->
<p id="hoverDemo">ich bin <strong>kein</strong> link!</p>

/* css */
p#hoverDemo {font-size:90%;background-color:#CF3;text-align:center;}
p#hoverDemo:hover {font-size:120%;background-color:#063;color:#fff;}

ich bin kein link!

unsichtbar ≠ versteckt

ich

unsichtbar (visibility:hidden) macht ein element unsichtbar
der dafür benötigte platz bleibt erhalten
versteckt (display:none) läßt ein element verschwinden
es bleibt keine lücke

menüs = ungeordnete listen

egal ob waagrecht oder senkrecht:
menüs sind praktisch immer als ungeordnete listen aufgebaut!
vorteil: menüs sind so auch ohne css verständlich
vorteil: css bietet sehr viele möglichkeiten, das aussehen von listen zu beeinflussen

<div id="navi">
   <h3 class="unsichtbar">Seitenauswahl</h3>
   <ul>
      <li class="aktiv"><a href="home.html" title="startseite">home</a></li>
      <li><a href="news.html" title="neuigkeiten">news</a></li>
      <li><a href="portfolio.html" title="unsere arbeiten">portfolio</a></li>
      <li><a href="contact.html" title="kontaktseite">contact</a></li>
   </ul>
</div>

Seitenauswahl

senkrechtes menü

Seitenauswahl

/* css */
.unsichtbar {display:none;}

div#navi li {
   margin:0;
   display:block;
   list-style-type:none;
   border-bottom:1px solid #fff;
   padding-top:0.2em;
   background:#6C6;
   width:6em;
   height:1.4em;
}
div#navi li.aktiv {background: #693;}
div#navi a:link, div#navi a:visited {text-decoration:none;color:#000;}
div#navi a:hover, div#navi a:active, div#navi a:focus {color:#fff;}

<!-- xhtml -->
<div id="navi">
   <h3 class="unsichtbar">Seitenauswahl</h3>
   <ul>
      <li><a href="home.html" title="startseite">home</a></li>
      <li class="aktiv"><a href="news.html" title="neuigkeiten">news</a></li>
      <li><a href="portfolio.html" title="unsere arbeiten">portfolio</a></li>
      <li><a href="contact.html" title="kontaktseite">contact</a></li>
   </ul>
</div>

waagrechtes menü

Seitenauswahl

/* css */
.unsichtbar {display:none;}
div#navi2 li {
   margin:0;
   display:block;
   list-style-type:none;
   background:#6C6;
   width:6em;
   height:1.2em;
   padding-top:0.2em;
   float:left;
   text-align:center;
   border-right:1px solid #fff;
}
div#navi li.aktiv {background: #693;}

<!-- xhtml -->
<div id="navi2">
   <h3 class="unsichtbar">Seitenauswahl</h3>
   <ul>
      <li><a href="home.html" title="startseite">home</a></li>
      <li class="aktiv"><a href="news.html" title="neuigkeiten">news</a></li>
      <li><a href="portfolio.html" title="unsere arbeiten">portfolio</a></li>
      <li><a href="contact.html" title="kontaktseite">contact</a></li>
   </ul>
</div>

image replacement

vorteil: für suchmaschinen bleibt die überschrift eine überschrift
vorteil: dokument bleibt auch dann verständlich, wenn css deaktiviert ist

Salzburger Nockerln

/* css (Phark Revisited) */
h2#bildStattText {
   /* schiebt den "echten text" extrem weit nach links */
   text-indent:-10000px;
   overflow:hidden;
   background: url(pix/nockerln_schriftzug.gif);
   /* hoehe und breite der grafik angeben! */
   height:150px;
   width:500px;
}

<!-- xhtml -->
<h2 id="bildStattText">Salzburger Nockerln</h2>

mehr dazu bei mezzoblue

rollover-effekt via css – das prinzip:

das hintergrund-bild wird via css verschoben
nur der ausgewählte teil des bildes wird sichtbar

div {
   height:115px;
   width:240px;
   background-image: url(pix/rolloverButton.gif);
   overflow:hidden;
}

rollover-effekt via css [sprite-technik]

vorteil: funktioniert OHNE javascript
kein preloading von grafiken nötig
funktioniert sogar beim internet explorer ;-)

mehr informationen

/* css */
div#rollOverDemo a {
	text-indent:-1000px; /* text wegmachen */
	display:block;
	height:115px;
	width:240px;
	background-image: url(rolloverButton.gif);
	overflow:hidden;
}

div#rollOverDemo a:hover {
	background-image: url(rolloverButton.gif);
	background-position: 0 -120px; /* position verschieben */
}

<!-- xhtml -->
<div id="rollOverDemo">
	<a href="#wrap" title="mehr informationen">mehr informationen</a>
</div>

rollover-menü [1]

aufbau des menüs mittels einer ungeordneten liste…

<!-- xhtml -->
<ul id="rollOverMenu">
   <li id="home"><a href="home.html" title="back to our homepage">homepage</a></li>
   <li id="news"><a href="news.html" title="up-to-date-news">news</a></li>
   <li id="refs"><a href="refs.html" class="aktiv" title="our clients">references</a></li>
   <li id="portfolio"><a href="portfolio.html" title="samples of our work">portfolio</a></li>
   <li id="links"><a href="links.html" title="links to partners & friends">links</a></li>
</ul>

so sieht es ohne css aus:

so soll es am ende aussehen

rollover-menü [2]

link-texte weit nach links verschieben
hintergrund-grafiken plazieren
die hintergrund-grafik
so sieht es bisher aus

css-code

/* größe des menüs */
ul#rollOverMenu {
	height: 100px;
	width: 125px;
	position:relative;
} 

/* text extrem nach links verschieben */
ul#rollOverMenu a {text-indent:-1000px;}

ul#rollOverMenu li, ul#rollOverMenu a {
	display:block;
	height:100px;
	width:25px;
	overflow:hidden;
}

ul#rollOverMenu li {
	list-style:none;
	position:absolute;
	top:0;
	background-image: url(rollOverMenue.gif);
}

/* individuelle pos. des background-image */
/* datei so im photoshop aufgebaut
dass abstände überall gleich sind */
li#home {left:0; background-position:0 0;}
li#news {left:25px; background-position:-25px 0;}
li#refs {left:50px; background-position:-50px 0;}
li#portfolio {left:75px; background-position:-75px 0;}
li#links {left:100px; background-position:-100px 0;}

rollover-menü [3]

hover-angaben im css einfügen
die hintergrund-grafik
so sieht es bisher aus

css-code

/*
hover-zustaende normal 
hintergrund-grafik wird um 120px nach oben verschoben
*/
ul#rollOverMenu a:hover {background-image: url(rollOverMenue.gif);}
li#home a:hover {background-position:0 -120px;}
li#news a:hover {background-position:-25px -120px;}
li#refs a:hover {background-position:-50px -120px;}
li#portfolio a:hover {background-position:-75px -120px;}
li#links a:hover {background-position:-100px -120px;}

rollover-menü [4]

aktiven menü-punkt kennzeichnen
die hintergrund-grafik
so sieht es bisher aus

css-code

/*
aktiver menue-punkt 
hintergrund-grafik wird um 240px nach oben verschoben
*/
ul#rollOverMenu a.aktiv {background-image: url(rollOverMenue.gif);}

li#home a.aktiv {background-position:0 -240px;}
li#news a.aktiv {background-position:-25px -240px;}
li#refs a.aktiv {background-position:-50px -240px;}
li#portfolio a.aktiv {background-position:-75px -240px;}
li#links a.aktiv {background-position:-100px -240px;}

rollover-menü [5]

aktiven menü-punkt auch mit rollover
so sieht es dann fertig aus
rolloverMenu.html
rolloverMenu.zip

css-code

/*
aktiver menue-punkt, hover-zustand
hintergrund-grafik wird um 360px nach oben verschoben
*/
ul#rollOverMenu a.aktiv:hover {background-image: url(rollOverMenue.gif);}

li#home a.aktiv:hover {background-position:0 -360px;}
li#news a.aktiv:hover {background-position:-25px -360px;}
li#refs a.aktiv:hover {background-position:-50px -360px;}
li#portfolio a.aktiv:hover {background-position:-75px -360px;}
li#links a.aktiv:hover {background-position:-100px -360px;}

das biest explorer zähmen

bitte NICHT via browser-sniffing realisieren
das ist super unzuverlässig!
bitte NICHT via hacks realisieren
bei versionswechel gibts sonst sehr unliebsame überraschungen!
stattdessen für internet explorer ein eigenes stylesheet entwickeln
darin NUR die speziellen anweisungen, die IE schwierigkeiten machen
dieses via conditional comments im html-dokument einbinden

z-index

legt fest, was vorne und was hinten liegt
z-achse in mathe…
läßt sich nur bei positionierten elementen anpassen
position: absolute oder position:relative;
der wert kann positiv oder negativ sein
das element mit dem höchsten wert liegt ganz oben

pulldown-menüs

aufbau des menüs mittels mehrerer ineinander-geschachtelter listen
die jeweils 2. menü-ebene wird anfang mit css unsichtbar geschaltet
display:none;

<!-- hauptmenue -->
<ul>
	<li><a href="home.html" title="back to our homepage">homepage</a></li>
	<li><a href="news.html" title="up-to-date-news">news</a>
		<!-- submenue von news -->
		<ul>
			<li><a href="aktuelles.html" title="aktuelle meldungen">aktuelles</a></li>
			<li><a href="events.html" title="aktuelle meldungen">events</a></li>
		</ul>
	</li>
	<li><a href="work.html" title="what we do">unsere arbeit</a></li>
</ul>

so sieht es ohne css aus:

web typography [1], sIFR

mehr dazu online

vorteil: für suchmaschinen bleibt die überschrift eine überschrift
vorteil: beliebige schrift einsetzbar
relevanter font muß in flash-datei integriert sein
vorteil: man muß nicht vorab den inhalt der überschrift kennen
ideal also für content management systeme
vorteil: wenn flash nicht installiert ist, erscheint die normale überschrift
nachteil: komplizierter setup mit vielen komponenten (css + javascript + flash)

web typography [2], Cufón

mehr dazu online

vorteile: ähnlich wie bei sIFR
vorteile: weniger komponenten, nur moderner browser, javascript und css
nachteil: kann (auch) nur punktuell verwendet werden – nicht für den ganzen text!
nachteil: rechtliche grauzone, weil font-designer keine explizite erlaubnis zum verwenden geben…

Achtung: Demo funktioniert nur online auf unserem Server – Kopierschutz von Cufón…

web typography [3], @font-face

vorteile: von praktisch allen modernen browsern unterstützt Safari 4, Firefox 3.5, Opera 10, Chrome beta, Internet Explorer 5+ …
vorteile: kein javascript notwendig
vorteile: kann für jeden text auf der website verwendet werden
nachteil: teilweise rechtliche grauzone – genau in der EULA schauen, ob verwendung im web erlaubt ist!
nachteil: font-dateien können sehr gross sein – das verzögert das laden der seiten…
nachteil: fonts schauen bei internet explorer oft schrecklich aus!