|
Image-Replacement-Technik: Teil 3 |
|
|
|
Geschrieben von MK
|
|
07.08.2005 |
|
Teil 3 der Image-Replacement-Technik beschäftigt sich mit der MIR-Methode. Dabei wird mit der Eigenschft "Zeichenabstand" und dem Wert "-1000em" für das HTML-Element "h1" der zu ersetzende Text "versteckt". <html>
<head>
<title>Titel</title>
<style type="text/css">
<!--
h1 { background: url(titel.gif); height: 50px; letter-spacing: -1000em; width: 250px; }
-->
</style>
</head>
<body>
<h1>Muster</h1>
</body>
</html> gefunden bei meiert.com |
|
Letzte Aktualisierung ( 31.03.2006 )
|
|
|
Image-Replacement-Technik: Teil 2 |
|
|
|
Geschrieben von MK
|
|
07.08.2005 |
|
Eine weitere Image-Replacement-Technik ist die LIR-Methode.
Die Anwendung eines Box-Model-Hacks ist dabei erforderlich. <html>
<head>
<title>Titel</title>
<style type="text/css">
<!--
h1 { background: url(titel.gif); height: 0 !important; height /**/:50px; overflow: hidden; padding-top: 50px; width: 250px; } -->
</style>
</head>
<body>
<h1>Muster</h1>
</body>
</html> gefunden bei meiert.com |
|
|
Image-Replacement-Technik: Teil 1 |
|
|
|
Geschrieben von MK
|
|
07.08.2005 |
|
Immer dann, wenn zur Gestaltung von Webseiten Schriftarten eingesetzt werden sollen, bei denen nicht sicher ist, ob diese auf dem Rechner des Betrachters verfügbar sind, ist die Image-Replacement-Technik eine Alternative zum herkömmlichen <h1><img xsrc="titel.gif" alt="Titel" /></h1>.
Mit Hilfe von CSS kann dies benutzer (Barrierefreiheit)- und suchmaschinenfreundlich umgesetzt werden (Dwyer-Methode):
<html>
<head>
<title>Titel</title>
<style type="text/css">
<!--
h1 { background: url(titel.gif); height: 50px; width: 250px; }
h1 span { display: block; height: 0; overflow: hidden; width: 0; }
-->
</style>
</head>
<body>
<h1><span>Muster</span></h1>
</body>
</html> Diese Technik sollte mit allen gängigen Browsern umsetzbar sein. Anregung von evolt.org + meiert.com |
|
Letzte Aktualisierung ( 31.03.2006 )
|
|
|
CSS: Kurzschreibweise - border |
|
|
|
Geschrieben von MK
|
|
06.08.2005 |
|
Zur Erzeugung eines Rahmens (z.B. um einen Absatz) kann man statt border-width: 3px; border-color: #FF0000; border-style: solid; auch die Kurzschreibweise border: 3px solid #FF0000; verwenden.
Alle Angaben werden durch ein Leerzeichen getrennt. Die Reihenfolge kann frei gewählt werden.
Aber auch eine Angabe wie border: solid; ist möglich. Dabei wird die Rahmendicke auf den Standardwert (3-4px) gesetzt und die Rahmenfarbe der Textfarbe innerhalb des Rahmens angepasst. Anregung von evolt.org |
|
|
CSS: HTML-Element mit zwei Klassen |
|
|
|
Geschrieben von MK
|
|
06.08.2005 |
|
CSS lässt es zu, einem HTML-Element zwei Klassen zuzuordnen ... zum Beispiel ... Inhalt CSS: ... .klein { font-size: 12px;}
.rahmen { border: 1px solid red; } ... Inhalt HTML: ...
<p class="klein rahmen">Text</p>
... Anzeige: Text Die Klassennamen sind dabei mittels Leerzeichen voneinnader zu trennen. Es können auch mehr als zwei Klassen für ein HTML-Element verwendet werden. Anregung von evolt.org |
|
Letzte Aktualisierung ( 31.03.2006 )
|
|
|
|
<< Anfang < Vorherige 1 2 Nächste > Ende >>
|
| Ergebnisse 10 - 16 von 16 |
HTML & CSS 