Link rechts im Bild

[JasperMill]

Hallo,

hier mal eine Schilderung des Problems...

ich möchte einen Text-Link innerhalb eines Bildes anzeigen lassen. Das habe ich irgendwie auch mal hinbekommen, allerdings musste ich das Bild als Backgroundimage in die css packen und habe somit keine Chance es mit einem Alt-Text zu versehen.

Frage: Wer kann mir eine sauber programmierte Lösung zu diesem Problem zeigen. (keine Hacks, Spagetticode etc.)


(Beispiel: Der Home - Button oben rechts)
XBoxUser.de


Jasper

 

[prm]

Lass es so, das ist die richtige und beste Lösung.
Der alt-Text soll ja nur dazu dienen, einen alternativen Text anzuzeige für den Fall, dass das Bild - aus welchen Gründen auch immer - einmal nicht angezeigt wird.

Bei der von dir gewünschten Variante müsstest du das bild relativ positionieren und die Navi dazu absolut mit entsprechenden top, left-Werten. Ist aber im Vergleich zum bg-image unnötig kompliziert.

 

[JasperMill]

Hallo prm,

thanks for your advise...aber in dem Fall ist es mir den Aufwand wert, da ich den Alttext unbedingt drin haben möchte.

Kannst Du mir Code-Beispiele für die relative Positionierung des Bildes, die absolute des Links und den notwendigen html Teil geben? thanks a lot.

Jasper

 

[JasperMill]

habs jetzt so gemacht, wie vorgeschlagen...der link befindet sich auch im bild, allerdings kann ich ihn nicht positionieren...hm? Einer ne Ahnung worans liegen kann?

Jasper

 

[JasperMill]

Das hab ich im CSS stehen


#header{
width: 970px;
height: 240px;
border: none;
background-image: url(../gfx/header/header-2.jpg);
text-align: right;
}

.header a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 50px 50px 0px 0px;
}

.header a:link, .header a:visited, .header a:active{
text-decoration: none;
color: #F692E2;
}

.header a:hover{
text-decoration: underline;
color: #F692E2;
}



und das im html code

<div id="header">
<a href="http://www.Domain.com" accesskey="1" class="header" title="Domain.com - Home" target="_self" rel="nofollow">Home</a>
</div>



der Link reagiert aber überhaupt nicht.

Jasper

 

[prm]

Du must hier ansetzen:

#topmenu ul {
	
	margin: 10px 0px 0px 30px;
	padding: 68px 35px 0px 0px;
	list-style: none;
	line-height: 100%;
}

Die Positionierung kannst du mit entsprechenden margin-Werten erreichen.
Die vier Werte bedeuten im Uhrzeigersinn von oben beginnend:
Abstand oben, rechts, unten, links

 

[JasperMill]

So habs hinbekommen...Alter: Du bist ein Held! Den Link hab ich nun wie auf Position: absolute - Anwendungsbeispiele beschrieben in eine Box verpackt und siehe da...alles wie's sein soll. Herzlichen Dank dafür.


Jasper