Hier bist Du: Home « Tipps und Tricks « Unterstreichungen mal anders

Tipps und Tricks: Unterstreichungen mal anders

Mit Unterstreichungen sollte man ja vorsichtig sein, da sie in der Regel für Hyperlinks vorgesehen sind. Es sei denn, sie unterscheiden sich von den üblichen Unterstreichungen, wie die folgenden Beispiele:

Internet Explorer 6.x, Netscape 6.x, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8
<ul style="list-style-type:disc">
<li>
 Dieser Text enthält Worte mit farbigen 
 <span style="border-bottom:1px solid #ff0000;">
 Unterstreichungen</span>
</li>
<li>
 Dieser Text enthält Worte mit dicken 
 <span style="border-bottom:3px solid #00ff00;">
 Unterstreichungen</span>
</li>
<li>
 Dieser Text enthält Worte mit gestrichelten 
 <span style="border-bottom:1px dashed #0000ff;">
 Unterstreichungen</span>
</li>
</ul>

Unterstreichung kannst du mit einem Rahmen simulieren. Die border-bottom-Eigenschaft legt für einen Element einen unteren Rahmen fest. Setze das Wort, dass unterstrichen werden soll, in ein <span>-Tag und lege mit style die Rahmeneigenschaften fest. Eine Vielfalt von Möglichkeiten, wie Farben, Rahmendicke und unterschiedliche Rahmenarten sollten den Ideen eines Webdesigners wenige Grenzen setzen.

Hier findest du weitere Informationen zu:
Rahmen unten (border-bottom)
Rahmenart (border-style)
Rahmendicke (border-width)
Farben
<span>
style

Browser

Browser wie der IE 5.0, die diese Technik nicht kennen, zeigen einfach keinen Rahmen an. Du kannst dies als zusätzliches Feature trotzdem einsetzen.