• Windows XP
  • Chrome 3.0
  • Firefox 2.0
  • Firefox 3.0
  • Firefox 3.5
  • Internet Explorer 6.0
  • Internet Explorer 7.0
  • Internet Explorer 8.0
• Mac OS X
  • Firefox 2.0
  • Firefox 3.0
  • Firefox 3.5
  • Safari 3.0
  • Safari 4.0

Direkt zur Anwendung: Adobe Browser Lab

Über Adobe Browser Lab

Dreamweaver Erweiterungen: Part 1 & Part 2

Ähnliche Beiträge

• Free Monitor for Google
• 12 Animationen für Flash CS4
• Adobe Premiere Elements – Color Expert
• CSS 3-Unterstützung der Browser
• Icons helfen bei der Orientierung

Was ich hier vorstellen wollte, waren neben die Hintergründen das Spaltensystem und die Zusätzlichen Möglichkeiten von Rahmen. All diese Dinge funktionierten überhaupt noch nicht. Eigentlich sehr schade, denn dadurch wären viel Umstände im Designen von Websites Geschichte.

Ähnliche Beiträge

• CSS Layouts am Fließband
• Icons helfen bei der Orientierung
• flexible Layouts mit CSS
• flexibles CSS Layout
• Dreamweaver-Schulung für den Solar Verlag

Ja, ja, ich weiß das die nicht alle Browser dieses Feature unterstützen. Besonders der heutzutage noch oft verwendete Internet Explorer 6 macht dem Ganzen einen großen Strich durch die Rechnung. Aber warum müssen deswegen die Benutzer von neueren Browsern darauf verzichten? OK Schluss mit mit dem leidigen Thema der verschiedenen Browser-Versionen. Auf zu der Formatierung von schönen, manchmal auch bunten Verlinkung.

1. a[href$=".pdf"],
2. a[href$=".txt"],
3. a[href$=".zip"],
4. a[href$=".mp3"], a[href$=".wma"],
5. a[href$=".mpg"], a[href$=".mpeg"],a[href$=".wmv"],
6. a[href$=".swf"],
7. a[href$=".xls"], a[href$="ods"],
8. a[href$=".doc"], a[href$="odt"],
9. a[href*="rss2"], a[href*="rss"], a[href*="feed"],
10. a[href|="mailto:"], a[href|="skype:"], a[href|="msnim:"],
11. {
12. padding-bottom:2px;
13. padding-left:22px;
14. padding-top:2px;
15. background:transparent;
16. }

Als erstes habe ich nur alle relevanten Links mit einem Innenabstand versehen und die Hintergrundfarbe auf transparent gestellt. Dabei bedeutet der Selektor mit dem Dollarzeichen ($) z.B. das alle Links die im href-Attribut mit dem angegebenen Wert enden formatiert werden. Bei der Schreibweise mit dem Stern (*) sucht man irgend ein Vorkommen des Wertes und die Kombination mit dem Pipe (|) selektiert nur Links die mit den Wert beginnen.

1. a[href$=".pdf"]
2. {
3. background: url(images/acrobat.png) no-repeat scroll left center;
4. }
5. a[href$=".txt"]
6. {
7. background: url(images/text.png) no-repeat scroll left center;
8. }
9. a[href$=".zip"]
10. {
11. background: url(images/archive.png) no-repeat scroll left center;
12. }
13. a[href$=".mp3"], a[href$=".wma"]
14. {
15. background: url(images/audio.png) no-repeat scroll left center;
16. }
17. a[href$=".mpg"], a[href$=".mpeg"], a[href$=".wmv"]
18. {
19. background: url(images/video.png) no-repeat scroll left center;
20. }
21. a[href$=".swf"]
22. {
23. background: url(images/flash.png) no-repeat scroll left center;
24. }
25. a[href$=".xls"], a[href$=".ods"]
26. {
27. background: url(images/table.png) no-repeat scroll left center;
28. }
29. a[href$=".doc"], a[href$=".rtf"], a[href$=".odt"]
30. {
31. background: url(images/document.png) no-repeat scroll left center;
32. }
33. a[href*="feed"], a[href*="rss"]
34. {
35. background: url(images/feed.png) no-repeat scroll left center;
36. }
37. a[href|="mailto:"]
38. {
39. background: url(images/mail.png) no-repeat scroll left center;
40. }
41. a[href|="skype:"]
42. {
43. background: url(images/skype.png) no-repeat scroll left center;
44. }
45. a[href|="msnim:"]
46. {
47. background: url(images/messenger.png) no-repeat scroll left center;
48. }

Danach definiere ich für jede Verlinkungsart ein Hintergrundbild, welche sind nicht wiederholt, die Ausrichtung links mittig ist und nicht mitscrollt. Fertig ist die schöne, bunte Linkwelt. Und das super Gute daran ist, dass Browser die diese Art der Selektierung nicht kennen einfach ihren gewohnten Standard zeigen und alle zufrieden sind.

Zum Schluss hier nochmals die Dateien zum Download:

• CSS-Datei
• Icons als Zip-Datei

Ähnliche Beiträge

• CSS 3-Unterstützung der Browser
• Suchmaschinenoptimierung (SEO)
• Die Macht der Selektoren
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS

Das ganze, so schreibt der Autor, kann wunderbar zum Vergleichen von 2 Versionen einer Website genutzt werden und wenn man das ganze noch mit “IE Tabs” kombiniert, kann man gleichzeitig die unterschiedlichen Darstellungen der Browser-Engines vergleichen.

Und da ich heute aus einer alten Website den Datenbestand in den Relaunch übertragen muss, kann ich mir somit das lästige Umschalten zwischen den Tab-Fenstern ersparen.

Ähnliche Beiträge

• Adobe Browser Lab
• CSS 3-Unterstützung der Browser
• Icons helfen bei der Orientierung
• Neuanfang