Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Farbverlauf für Internet Explorer 9

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine weitere bedingte Anweisung dient dazu, eine Sprite-Grafik an den Internet Explorer 9 auszuliefern und dadurch einen Farbverlauf für den horizontalen Navigationsbereich anzuzeigen.

Transkript

Ie9 und auch ie8 hier verstehen beide keinen css 3 Farbverlauf, und deswegen ist die horizontale Navigation hier ganz normal, ohne Farbverlauf dargestellt. Das ist nicht weiter schlimm, weil sie funktioniert. Hier auch ohne Farbverlauf ist deutlich, wo man ist, und von daher ist eine Reparatur optional. Sie soll aber trotzdem stattfinden. Und gleichzeitig möchte ich ihnen dabei einen Trick zeigen, der Sprite-Grafik genannt wird. Wenn Ihre erste Assoziation bei dem Wort Sprite momentan noch Zitronenlimonade in grünen Flaschen ist, ist das völlig ok, denn CSS Sprites sind in gewisser Weise auch erfrischend, aber hier wird das Wort Sprite in der wörtlichen Bedeutung verwendet, das heißt also Elfe , Kobold oder schemenhafte Erscheinung, und man verwendet das für diese Technik, weil die für den Hover Effect benötigte Grafik gar nicht es nachgeladen werden muss. Sie sehen hier die Sprite-Grafik navi-sprite, der Name ist beliebig, also da muss nicht der Begriff Sprite drin vorkommen, aber es ist entsprechend so. Und hier sehen Sie die Vergrößerung, und da sind zwei in einem. Die oberen 30 Pixeln sind die Grafik für den Farbverlauf, und die unteren 30 Pixeln sind die Grafik für den hover-Effekt und für das "Sie sind hier" das Signal an den Benutzer auf welcher Seite er gerade ist. Diese beiden Grafiken sind in einer Grafik vereint, und das spart im Browser das Nachladen. Er muss also nur eine Grafik laden, und damit hat sich die Sache erledigt. Im Editor habe ich hier schon mal was vorbereitet und zwar ein Stylesheet namens ie9 und 8.css, und hier wird die Sprite-Grafik eingebaut. Das geht am einfachsten, wenn man sich aus navi-Float horizontal hier die entsprechenden Styles ausleiht. Das wäre also zum einen diese hier und dann Kopieren und hier Einfügen. Das Ganze hier unten nochmal, also überall, wo hier der Farbverlauf drin vorkommt und die soll der Klasse active hier mitten drin, die nehmen wir gleich mit. So, so sieht das doch schon ganz gut aus, dann wir einmal gespeichert und alles entfernt, was nicht mit Farbverläufen oder Ähnlichen zu tun hat, weil das wird hier in der andern Datei schon definiert. Background color ist gut, der bleibt wie er ist. So, und hier kommen auch die Collors noch wieder raus, so. Das ist im Moment der Ausgangspunkt, Linear-gradient versteht der Browser nicht hier der ie9 und die ie8, also können wir das auch schon entfernen. Und so, dann bevor jetzt hier die Datei perfektioniert wird, möchte ich Ihnen noch kurz zeigen, wie die eingebunden wird, und zwar wieder mit einem conditional Comment. Sie kennen bereits if less than IE9, und jetzt haben wir if less than or equal IE9. Also, deswegen ie9 oder kleiner sprich ie8. Das ist auf allen drei Seiten eingebaut, und damit wird diese Stylesheet nachgeladen, Ich sage es nochmal, es ist optional, dass es nur, wenn in den Farbverlauf zur perfekten Imitierung dort auch wirklich vorhanden sein sollen. So, jetzt kommt die Grafik, also diese hier noch einmal in der Vergrößerung gezeichnet navi-sprite.jpg, die eigentlich 2 in 1 sind, und die soll jetzt hier eingebaut werden, und zwar mit Background- image:url, und das zeigt mir hier der schon an, so, und jetzt gehen wir dazwischen und sagen navi-sprinte, und dann zeigt da die Grafik hier schon. Falls es in ihrem Editor nicht der Fall sein sollte, dann müssen Sie das eben von Hand eingeben. Das kopiere ich mir hier schon mal und füge das bei den anderen hier auch ein. Ein Semikolon genügt. So. Und hier auch navi-sprite, navi-sprite, navi-sprite. Das ist soweit in Ordnung. Ich verwende hier übrigens nicht die kurze Schreibweise Background, sondern der Deutlichkeit hover die ausführliche Variante. Und jetzt muss im nächsten Schritt noch die Wiederholung geregelt werden also, background-repeat: für eine Grafik background-repeat: und, da wird gesagt repeat-x, also entlang der X-Achse, auch das kopiere ich mich herüber und regele das hier unten auch, so, das ist in Ordnung. Und jetzt noch kommt noch die Positionierung: background-position, und das ist hier left-top, und auch das kopiere ich einmal rüber, bevor das gleich noch etwas geändert wird: left-top, also links oben in plan German. So, gespeichert ist jetzt wir kommen wieder in den Internet Explorer, 9 wird hier simuliert. Ich lade mal neu. Und da ist schon der Farbverlauf für die Navigation. Und hier wird für den hover-Effect, den können wir schon sehen, der funktioniert, weil er unterstrichen wird, aber es wird dieselbe Grafik verwendet. Ich muss jetzt hier im CSS noch sagen, dass für den hover-Effect und für das sie sende ich hier, der untere Teile der Grafik verwenden soll: diese Grafik 60px hoch und 30 oben und 30 unten. Und im CSS sage ich hier links Anfang, aber nicht top, sondern -30px. Das hier unten genauso -30px, also fange nicht oben an, sondern 30px weiter unten heißt das übersetzt und jetzt hier wieder in den Browser, da sehen Sie schon, wo Sie sind, und beim Hovern wird die selbe Grafik verwendet. Der Trick besteht also darin, beim Sprite-Grafik verwenden hier eine Grafik, die in Wirklichkeit 2 ist. Das spart dem Browser minimal Zeit beim Nachladen. Er muss nur diese eine Grafik laden, die hatte schon im Cash, und muss ich dann eigentlich nur versetzt anzeigen. Das funktioniert hier im Internet Explorer ganz wunderbar. Diesen Trick kann man natürlich auch in anderen Browsern verwenden, aber jetzt haben Sie hier von ie8 über ie9 und ie10 bis hin zur modernsten Variante. hier Edge der neueste ie11 sieht die aside fast gleich aus mit relativ wenig Aufwand.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!