Supportnet / Forum / Webseiten/HTML
CSS Problem
Frage
Hallo Zusammen!
Seit ich mir vor kurzem das nötigsten HTML Grundwissen angeeignet habe, will ich mich mit CSS versuchen. Ich habe einige Probleme gut mit Self-HTML beheben können, nur dieses nicht:
Im unten stehenden Code würde ich gerne machen, dass nicht alle Links das gleiche, sondern jeder Link sein eigenes Bild bekommt!
Also das der Link "wald.html" ein eigenes Bild und ein eigenes hover-Bild hat und "blumen.html" ebenfalls. Ich habe aber keine Ahnung wie, und auf Self-HTML ist es komisch bzw. gar nicht richtig beschrieben, irgendwie mit Klassen oder so, jedenfalls kapier ich es dort nicht!
Deswegen würde ich mich auf einige hilfreiche Antworten freuen!^^
MfG MaLi
Hier noch der Code:
[quote]<html>
<head>
<style type="text/css">
a {background-image:url(bild1.jpg); width:150px; height:38px }
a:hover {background-image:url(bild2.jpg)}
</style>
</head>
<body>
<a href="wald.html"></a>
<a href="blumen.html"></a>
</body>
</html>[/quote]
Antwort 1 von rfb
um die Links zu unterscheiden kannst du Klassen einfügen (hier "blumen") und dann im Stylesheet für die Klassen die abweichenden Merkmale einzeln festlegen:
<html>
<head>
<style type="text/css">
a {background-image:url(bild1.jpg); width:150px; height:38px }
a:hover {background-image:url(bild2.jpg)}
a.blumen {background-image:url(bild3.jpg);}
a.blumen:hover {background-image:url(bild4.jpg)}
</style>
</head>
<body>
<a href="wald.html"></a>
<a href="blumen.html" class="blumen"></a>
</body>
</html>Antwort 2 von MaLi
Hey!
Danke für die Antwort!
Das es so einfach ist, hätte ich nie gedacht!
MfG MaLi
Danke für die Antwort!
Das es so einfach ist, hätte ich nie gedacht!
MfG MaLi
Antwort 3 von drago
Es geht noch einfacher:
<a href="wald.html" style="background-image:url(bild2.jpg)">hier dein Linktext</a>
<a href="blumen.html" style="background-image:url(bild2.jpg)">Hier dein 2. Linktext</a>
In dieser Form ist es einfacher, weil es für Einzelfälle besser ist.
Wenn man es also nur einmal braucht, muss man keine Klassen definieren.
<a href="wald.html" style="background-image:url(bild2.jpg)">hier dein Linktext</a>
<a href="blumen.html" style="background-image:url(bild2.jpg)">Hier dein 2. Linktext</a>
In dieser Form ist es einfacher, weil es für Einzelfälle besser ist.
Wenn man es also nur einmal braucht, muss man keine Klassen definieren.
Antwort 4 von rfb
aber drago:
CSS mitten im HTML ist extrem unübersichtlich. Das ist allenfalls kurzfristig einfacher - bei der nächsten Änderung sucht man ewig nach den Einträgen und wundert sich warum das "neue" Layout irgendwo nicht übernommen wird.
Wenn du für einen einzelnen Tag keine Klasse anlegen willst kannst du ihm auch eine ID verpassen und mit der arbeiten:
Die ID darf dann aber definitiv nur einmal im Dokument vorkommen.
Übrigens: das Problem mit dem Bilderwechsel beim
CSS mitten im HTML ist extrem unübersichtlich. Das ist allenfalls kurzfristig einfacher - bei der nächsten Änderung sucht man ewig nach den Einträgen und wundert sich warum das "neue" Layout irgendwo nicht übernommen wird.
Wenn du für einen einzelnen Tag keine Klasse anlegen willst kannst du ihm auch eine ID verpassen und mit der arbeiten:
<html>
<head>
<style type="text/css">
a {background-image:url(bild1.jpg); width:150px; height:38px }
a:hover {background-image:url(bild2.jpg)}
a#blumen {background-image:url(bild3.jpg);}
a#blumen:hover {background-image:url(bild4.jpg)}
</style>
</head>
<body>
<a href="wald.html"></a>
<a href="blumen.html" id="blumen"></a>
</body>
</html>Die ID darf dann aber definitiv nur einmal im Dokument vorkommen.
Übrigens: das Problem mit dem Bilderwechsel beim
hoverstyleAntwort 5 von MaLi
Hey!
Danke für die Anworten.
ich werde es aber wahrscheinlich mit den Klassen machen, find ich am einfachen und so funktionierts auch perfekt!
Danke für die Anworten.
ich werde es aber wahrscheinlich mit den Klassen machen, find ich am einfachen und so funktionierts auch perfekt!