Ratfish: Verweis mit Bild und Rahmen gestalten (mehrere Elemente)

Beitrag lesen

SELF-Forum

Verweis mit Bild und Rahmen gestalten (mehrere Elemente)

Ratfish
– Informationen zu den Bewertungsregeln

Moin 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.

Beitrag melden
–
Informationen zu den Bewertungsregeln