Hyperlink funktioniert nicht

toyfriend · 19.02.12, 18:31

Hallo Leute,

bin gerade dabei eine website mit Adobe Dreamweaver zu erstellen.

In meiner Navigationsleiste funktioniert die Verlinkung nicht. Sie ist anklickbar, jedoch bleibe ich immer auf der Seite wo ich war.

Hat jemand ne Lösung?

toyfriend · 19.02.12, 18:44

Okay, habe es hinbekommen. Jedoch nicht ganz. Wenn ich den text nicht per text-align verschwinden lasse und auf das Wort selbst klicke, dann geht es. Aber ich möchte nur auf die Hintergrundgrafik des Div-Tags klicken müssen um den Link zu folgen.

Hat jemand nen Rat?

toyfriend · 19.02.12, 19:37

Zitat:

Zitat von HababaX

Not sure if troll or just stupid...

Sollen wir Deinen Code raten?

<!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>Unbenanntes Dokument</title>
<style type="text/css">
#wrapper {
margin-right: auto;
margin-left: auto;
width: 912px;
}
#wrapper #header #registrieren:active {
background-image: url(images/bg_navigation.png);
background-position: -152px -72px;
height: 36px;
width: 152px;
}
#wrapper #hauptbildschirm {
margin-top: 46px;
margin-bottom: 10px;
height: 800px;
}

#wrapper #header #home {
float: left;
height: 36px;
width: 152px;
background-image: url(images/bg_navigation.png);
text-indent: -9999;
}
#wrapper #header #home:hover {
background-image: url(images/bg_navigation.png);
background-position: 0px -36px;
}
#wrapper #header #home:active {
background-image: url(images/bg_navigation.png);
background-position: 0px -72px;
}
#wrapper #header #registrieren {
background-image: url(images/bg_navigation.png);
float: left;
height: 36px;
width: 152px;
background-position: -152px -108px;
text-indent: -9999em;
}
#wrapper #header #binaereoptionen {
background-image: url(images/bg_navigation.png);
background-position: -304px 0px;
float: left;
height: 36px;
width: 152px;
text-indent: -9999em;
}
#wrapper #header #binaereoptionen:hover {
background-image: url(images/bg_navigation.png);
background-position: -304px -36px;
}
#wrapper #header #binaereoptionen:active {
background-image: url(images/bg_navigation.png);
background-position: -304px -72px;
}
#wrapper #header #performance {
background-image: url(images/bg_navigation.png);
background-position: -456px 0px;
float: left;
height: 36px;
width: 152px;
text-indent: -9999em;
}
#wrapper #header #performance:hover {
background-image: url(images/bg_navigation.png);
background-position: -456px -36px;
}
#wrapper #header #performance:active {
background-image: url(images/bg_navigation.png);
background-position: -456px -72px;
}
#wrapper #header #FAQ {
background-image: url(images/bg_navigation.png);
background-position: -608px 0px;
float: left;
height: 36px;
width: 152px;
text-indent: -9999em;
}
#wrapper #header #FAQ:hover {
background-image: url(images/bg_navigation.png);
background-position: -608px -36px;
}
#wrapper #header #FAQ:active {
background-image: url(images/bg_navigation.png);
background-position: -608px -72px;
}
#wrapper #header #Support {
background-image: url(images/bg_navigation.png);
float: left;
height: 36px;
width: 152px;
background-position: -760px 0px;
text-indent: -9999em;
}
#wrapper #header #Support:hover {
background-image: url(images/bg_navigation.png);
background-position: -760px -36px;
}
#wrapper #header #Support:active {
background-image: url(images/bg_navigation.png);
background-position: -760px -72px;
}
#wrapper #hauptbildschirm #logo {
float: left;
height: 30px;
width: 908px;
margin-left: 2px;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
}
#wrapper #hauptbildschirm #flash {
height: 100px;
width: 908px;
float: left;
margin-right: 2px;
margin-left: 2px;
}
#wrapper #header {
margin-right: auto;
margin-left: auto;
}
#wrapper #footer #copyright {
color: #888;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
width: 408px;
float: left;
}
#wrapper #footer {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #e5e5e5;
border-bottom-color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
height: 18px;
float: left;
}
#wrapper #hauptbildschirm #brokers {
height: 250px;
float: left;
}
#wrapper #footer #sitemap {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #08c;
width: 55px;
float: left;
margin-left: 5px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e5e5e5;
}
#wrapper #footer #impressum {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #08c;
float: left;
width: 70px;
text-align: left;
margin-left: 5px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e5e5e5;
}
#wrapper #footer #sprache {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #08c;
width: 80px;
float: left;
margin-left: 5px;
text-align: left;
}
#wrapper #footer #nutzungsbedingungen {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #08c;
width: 135px;
float: left;
margin-left: 5px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e5e5e5;
}
#wrapper #footer #datenschutz {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #08c;
width: 75px;
float: left;
margin-left: 5px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e5e5e5;
}
#wrapper #footer #kontakt {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #08c;
float: left;
width: 50px;
margin-left: 5px;
text-align: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e5e5e5;
}
#wrapper #hauptbildschirm #broker1 {
float: left;
height: 148px;
width: 222px;
margin-top: 10px;
background-color: #FFFFFF;
background-image: url(images/bg_kachel.png);
}
#wrapper #hauptbildschirm #brokers #broker1:hover {
background-image: url(images/bg_kachel.png);
background-position: 0px 148px;
}
#wrapper #hauptbildschirm #broker2 {
float: left;
height: 148px;
width: 222px;
margin-top: 10px;
margin-left: 8px;
background-image: url(images/bg_kachel.png);
}
#wrapper #hauptbildschirm #brokers #broker2:hover {
background-image: url(images/bg_kachel.png);
background-position: 0px 148px;
}
#wrapper #hauptbildschirm #broker3 {
float: left;
height: 148px;
width: 222px;
margin-top: 10px;
margin-left: 8px;
background-image: url(images/bg_kachel.png);
}
#wrapper #hauptbildschirm #brokers #broker3:hover {
background-image: url(images/bg_kachel.png);
background-position: 0px 148px;
}
#wrapper #hauptbildschirm #broker4 {
float: left;
height: 148px;
width: 222px;
margin-top: 10px;
margin-left: 8px;
background-image: url(images/bg_kachel.png);
}
#wrapper #hauptbildschirm #brokers #broker4:hover {
background-image: url(images/bg_kachel.png);
background-position: 0px 148px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #08c;
}
a:hover {
text-decoration: underline;
color: #08c;
}
a:active {
text-decoration: none;
color: #08c;
}
a {
font-size: 12px;
color: #08c;
}
#wrapper #hauptbildschirm #mainscreen {
height: 400px;
width: 908px;
margin-top: 20px;
margin-right: 2px;
margin-left: 2px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="home"><a href="index.html">Home</a></div>
<div id="registrieren"><a href="#">Registrieren</a></div>
<div id="binaereoptionen"><a href="#">Binäre Optionen</a></div>
<div id="performance"><a href="#">Performance</a></div>
<div id="FAQ"><a href="#">FAQ</a></div>
<div id="Support"><a href="#">Support</a></div>
</div>
<div id="hauptbildschirm">
<div id="flash">Subnavigation</div>
<div id="logo">Navigation</div>
<div id="mainscreen">Raum für den Inhalt von id "mainscreen"</div>
<p> </p>
</div>
<div id="footer">
<div id="copyright">Copyright © 2012 platinumsignals.de Alle Rechte vorbehalten.</div>
<div id="sitemap"><a href="#">Sitemap</a></div>
<div id="nutzungsbedingungen"><a href="#">Nutzungsbedingungen</a></div>
<div id="datenschutz"><a href="#">Datenschutz</a></div>
<div id="kontakt"><a href="#">Kontakt</a></div>
<div id="impressum"><a href="#">Impressum</a></div>
<div id="sprache"><img src="images/germanyicon.png" width="12" height="12" alt="germany" /> <a href="#">Sprache</a> <img src="images/morearrow.png" width="4" height="7" alt="Sprache auswählen" /></div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

HagenTronje · 19.02.12, 19:52

Also wenn du ne ordentliche Homepage machen willst, rate ich dir: Finger weg von Dreamweaver und anderen grafischen Benutzeroberflächen! Lern HTMl und CSS, das is nicht so schwer wie viele glauben, und wenn dus mal kannst, geht im Quellcode schreiben auch schneller als mit Dreamweaver und Co. Und man kann dir besser helfen, weil der Code übersichtlicher is.

Also es geht um den bereich?
<div id="header">
<div id="home"><a href="index.html">Home</a></div>
<div id="registrieren"><a href="#">Registrieren</a></div>
<div id="binaereoptionen"><a href="#">Binäre Optionen</a></div>
<div id="performance"><a href="#">Performance</a></div>
<div id="FAQ"><a href="#">FAQ</a></div>
<div id="Support"><a href="#">Support</a></div>
</div>

entweder den Div innerhalb vom a:
<a href="index.html"><div id="home">Home</div></a>
oder
<div id="home" onclick="location.href='ZIELLINK'><a href="index.html">Home</a></div>
müsste auch gehn

toyfriend · 19.02.12, 19:58

Zitat:

Zitat von HagenTronje

Also wenn du ne ordentliche Homepage machen willst, rate ich dir: Finger weg von Dreamweaver und anderen grafischen Benutzeroberflächen! Lern HTMl und CSS, das is nicht so schwer wie viele glauben, und wenn dus mal kannst, geht im Quellcode schreiben auch schneller als mit Dreamweaver und Co. Und man kann dir besser helfen, weil der Code übersichtlicher is.

Also es geht um den bereich?
<div id="header">
<div id="home"><a href="index.html">Home</a></div>
<div id="registrieren"><a href="#">Registrieren</a></div>
<div id="binaereoptionen"><a href="#">Binäre Optionen</a></div>
<div id="performance"><a href="#">Performance</a></div>
<div id="FAQ"><a href="#">FAQ</a></div>
<div id="Support"><a href="#">Support</a></div>
</div>

entweder den Div innerhalb vom a:
<a href="index.html"><div id="home">Home</div></a>
oder
<div id="home" onclick="location.href='ZIELLINK'><a href="index.html">Home</a></div>
müsste auch gehn

Aber wo lag denn jetzt der Fehler? Der Link war doch richtig gesetzt, oder?

HagenTronje · 19.02.12, 20:32

Es war ja kein Fehler, sondern einfach eine andere Anforderung.
Ein gewöhnlicher Link bezieht sich nunmal auf den Text. Du willst aber, dass auch der Hintergrund zur gewünschten Seite führt, oder hab ich da was falsch verstanden?

toyfriend · 19.02.12, 21:13

Zitat:

Zitat von HagenTronje

Es war ja kein Fehler, sondern einfach eine andere Anforderung.
Ein gewöhnlicher Link bezieht sich nunmal auf den Text. Du willst aber, dass auch der Hintergrund zur gewünschten Seite führt, oder hab ich da was falsch verstanden?

Für den Anfang will ich erst einmal mit Dreamweaver arbeiten - weil es für mich einfacher erscheint/ist - wie kann einen Link zu einem Hintergrundbild eines Div-Tags in Dreamweaver CS5 umsetzen?

toyfriend · 19.02.12, 21:17

Zitat:

Zitat von toyfriend

Für den Anfang will ich erst einmal mit Dreamweaver arbeiten - weil es für mich einfacher erscheint/ist - wie kann einen Link zu einem Hintergrundbild eines Div-Tags in Dreamweaver CS5 umsetzen?

Bei Deiner ersten Variante funktioniert es. Allerdings wird jetzt der Text "Home" angezeigt und nicht mehr durch den Text-Allign aus dem Bild "geschoben".

toyfriend · 20.02.12, 15:34

Okay, hat alles super funktioniert. Vielen Dank!