• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Positionierung eines Links auf einem Bild

N

nucknuck

Neues Mitglied
Hallo,

folgende Problematik habe ich und komme nicht darauf, was ich falsch mache. Ich platziere einen Link auf einem Bild. Dieses ist auf einer normalen HTML-Seite.
Live kann das ganze hier betrachtet werden:

Test

Problem:

Im Firefox, Android-Browser, Chrome und Opera ist der Link zu Google genau an der Kante rechts am Bild.
Beim IE 9 hingegen immer etwas nach rechts verschoben. IE8 und IE7 hingegen sind ok.
Zwar ist dies vielleicht als kleinlich zu betrachten, jedoch bei größer werdenden Bildern und Schriftgrößen, fällt es stärker auf.

HTML:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<body>

<div id="box">

<div id="bild">
<img src="/cat.jpg" width="400" height="300" />
</div>

<div id="link">
<a href="http://www.google.de">google</a>   
</div>

</div>

</body>
</html>

CSS

Code: 
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #a09b9b;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222121), to(#a09b9b));
    background-image: -webkit-linear-gradient(top, #222121, #a09b9b); 
    background-image:    -moz-linear-gradient(top, #222121, #a09b9b);
    background-image:     -ms-linear-gradient(top, #222121, #a09b9b);
    background-image:      -o-linear-gradient(top, #222121, #a09b9b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF222121, endColorstr=#FFa09b9b);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF222121, endColorstr=#FFa09b9b)";
}


#bild {
    width: 400px;
    margin: 0 auto;
}

#link {
    left: 422px;
    position: relative;
    top: -103px;
    width: 100px;
}

#link a {
    font-size: 30px;
    color: #FFFFFF;
}

#box {
    width: 600px;
    margin: 100px auto;
}

Bitte habt Nachsicht mit mir - ich lerne noch und ärgere mich schon genug über meine Unfähigkeit.

Danke und Gruß
Marcus
 
Mmh, jetzt gehts auch bei mir. Lag wohl an dem von dir gewählten Hoster :|

Ich verstehe aber noch nicht ganz was Du erreichen willst? Für mich sieht das aus als würdest Du versuchen eine Intro-Seite für eine Webseite zu gestalten die aus einem Bild und einem Link darüber bestehen soll?

Wieso fügst Du das Bild dann als Bild und nicht als Hintergrundbild ein? Auf einem Hintergrundbild könntest Du beliebig Text ausrichten. Dann müsstest Du auch nicht so viel HTML-Code dazu schreiben.
 
Dann hätte ich aber das Problem den Farbverlauf als eigentlichen Hintergrund zu nutzen, oder?

Seite mit Hintergrund und Bild mit Link.
Gerne nehm ich auch eine einfache Variante.
 
Nein, hättest Du nicht. Aber hier gäbe es 2 Möglichkeiten:

Beispiel:
HTML: 
<body>
 <p><a href="#">Link</a></p>
</body>

Möglichkeit 1:
Dem body gibst Du dann den Hintergrundverlauf als Bild.
Dem p gibst Du das zentriert darzustellende Bild und sagst ihm auch, dass es in einer bestimmten Breite zentriert dargestellt werden soll (denke mal die Breite des Hintergrundbildes wäre hier relevant).
Den Link kannst Du über "text-align: center;" beim p horizontal zentrieren. Die vertikale Zentrierung könntest Du über line-height erreichen (müsstest Du ausmessen, welcher da optimal ist, abhängig von Schriftgröße und -art ...).
Tipp: hilfreich für diese Ansicht ist
Code: 
html, body, p { height: 100%; }

Möglichkeit 2:
Wie 1, nur dass Du dem body per gradient-Eigenschaft den Hintergrundverlauf gibst und gleichzeitig auch das Hintergrundbild gibst. Siehe:
CSS3 Gradient
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben