nicht angemeldet
Verweis mit Bild und Rahmen gestalten (mehrere Elemente)
Gunnar BittersmannMoin zusammen,
ich habe mir vorgenommen einen Verweis als schönen großen Knopf zu gestalten.
OBEN soll ein Bild mit einem Rahmen drumrum stehen
DARUNTER ein Wort, wohin der Link führt (Rahmen links u. rechts)
GANZ UNTEN soll wieder ein Bild stehen das Rahmen (runde Ecken) kompletiert.
|----------------| Bild mit Rahmen
| |
| BILD |
| hier lang |
| ----------------/ unteres Bild |
Was ich bisher hinbekommen habe:
<head>
<style>
.link {
display: block;
width: 154px;
height: 99px;
text-decoration: none;
border: none;
border-color: #00FF00;
color: #00ff00;
text-align: center;
}
.link:hover {
border-color: #aaa;
color: #aaa;
}
.link img {
border: 3px solid;
}
.link p {
width: 154px;
text-align: center;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
border-left: solid 3px;
border-right: solid 3px;
}
.unten {
border: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<a class="link" href="#" name="LINK">
<img class="link" src="###.png" />
<p>Linktext</p>
???? <img class="unten" ????????????????????????? />
</a>
</body>
</html>
Meine Schwierigkeiten:
1. wie kann ich das unter Bild per CSS einbinden, so dass es auch unten steht?
2. bei mouse over dem obenen Bild verändert der Linktext samt Rahmen seine Farbe ABER bei mouse over dem Linktext verändert nur der Linktext nicht aber das obere Bild seine Farbe.
Weiß jemand vielleicht ein Beispiel mit Erklärung, ich hab' mich schon Wundgegoogelt.
-
Hi!
Ganz schoen kompliziert. Nun kenne ich deine Vorraussetzungen nicht, aber was spricht dagegen, den Link einfach mit display block zu versehen, ein grosses Hintergrundbild einzufuegen und den Text im Link z.B. durch nen dickes padding nach unten zu druecken?
Sicher kann es Gruende geben, dass nicht so zu machen, Du hast aber keine genannt.
--
Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.-
Das Bild kommt aus einem CMS und es steht nur dieses eine Bild zur Verfügung.
Wenn ich also möchte, dass sich die Rahmenfarbe ändert muss ich den Rahmen selber bauen.Das klappt auch. Ich weiß nur nicht wie ich einen Link anlegen muss, in dem mehrere Element enhalten sind. Mein erster Gedanke war, einfach ein <div> zu bauen und es innerhalb eines <a> zu packen. Das ist nicht erlaubt, funktioniert im FF trotzdem, aber im IE eben nicht.
Gibt es nicht ein Element, in dem ich mein Gerüst bauen kann und das dann zum Link wird?
-
@@Ratfish:
nuqneH
Mein erster Gedanke war, einfach ein <div> zu bauen und es innerhalb eines <a> zu packen. Das ist nicht erlaubt, funktioniert im FF trotzdem, aber im IE eben nicht.
In HTML5 werden auch Blockelemente in 'a'-Elementen erlaubt sein; in HTML 4/XHTML 1 sind weder 'div' noch 'p' erlaubt.
Mit dem Fehler
<a href="http://example.net"><div>Lorem ipsum</div></a>gehen verschiedene Browser unterschiedlich um: Manche verlinken den gesamten Inhalt des Blockelements; andere schließen implizit das 'a'-Element vor dem <div>-Start-Tag.Gibt es nicht ein Element, in dem ich mein Gerüst bauen kann und das dann zum Link wird?
Ja: ein Inline-Element. 'span' bietet sich an:
<a href="http://example.net" class="figure"> <img src="foo" alt=""/> <span class="figcaption">Lorem ipsum</span> </a>(Ich hab die Klassen mal nach den entsprechenden HTML5-Elementen benannt. [HTML5 §4.5.11 f.] Du kannst sie gerne auch "Bilderrahmen"und "Bildunterschrift" nennen, aber "link" und "unten" sind dä^Wungünstige Bezeichener.)
Stylesheet:
.figure { color: #00FF00; display: inline-block; text-decoration: none; } .figure:hover { color: #AAA; } .figure * { border: 3px solid #00FF00; cursor: pointer; display: block; } .figure:hover * { border-color: #AAA; } .figure .figcaption { border-top: none; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; padding: 5px; text-align: center; width: 144px; /* Breite des Bildes minus padding */ }Alle gängigen Browser außer IE können runde Ecken schon mit CSS. [icke]
Nur für IEs wären die – wenn’s denn unbedingst sein muss – mit einem(!!) Hintergrundbild zu realisieren. Ein Hintergrundbild, das beide farbigen U-förmigen Rahmen in ausreichender Höhe enthält (CSS-Sprite):
*:first-child+html .figure .figcaption { background: url(figure-background.png) 0 bottom; border: none; width: 150px; /* Breite des Bildes minus padding plus border */ } *:first-child+html .figure:hover .figcaption { background-position: -256px bottom; /* Verschiebung entsprechend der Position im Sprite */ }(Falls IE < 7 auch noch unterstützt werden sollen (wozu?), das ganze nochmal mit '
* html'.)Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
danke für Deine ausführliche und hilfreiche Antwort. Ich habe versucht der Sache auf den Grund zu gehen, verstehe auch wie das im Firefox (Chrome und Opera gehen auch) funktioniert.
Der Tipp mit den Sprites war neu für mich, das finde ich sehr hilfreich, danke.
Allerdings habe ich nicht verstanden was Du meinst, wenn du schreibst:
(Falls IE < 7 auch noch unterstützt werden sollen (wozu?), das ganze nochmal mit '* html'.)
Mir steht gerade leider kein IE6 zur Verfügung um zu testen und ich weiß nicht wo und wie ich * html benutzten muss.
-
@@Ratfish:
nuqneH
Allerdings habe ich nicht verstanden was Du meinst, wenn du schreibst:
(Falls IE < 7 auch noch unterstützt werden sollen (wozu?)Mit „wozu?“ meinte ich, dass IE < 7 keiner Unterstützung mehr bedürfen. Nutzer von Browsern aus der Steinzeit müssen halt mir unschöner Darstellung leben.
das ganze nochmal mit '* html'.)
Mir steht gerade leider kein IE6 zur Verfügung um zu testen und ich weiß nicht wo und wie ich * html benutzten muss.Wenn du eine Anpassung für IE 7 mit
*:first-child+html foo { bar: baz }
vornimmst und dieselbe Anpassung auch für IE < 7 benötigst, musst du zusätzlich noch
* html foo { bar: baz }
im Stylesheet notieren.Zusammenfassen als
*:first-child+html foo, * html foo { bar: baz }
lässt sich das leider nicht, da IE < 7 wegen Unkenntnis des Selektors für benachbarte Elemente (+) [CSS2 §5.7] (und auch der Pseudoklasse :first-child) die ganze Regel missachtet.Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-