Mouse over mit und ohne link

Klausi1

Hallo, ich habe am Ende meiner Homepage einen Verteiler eingerichtet. Mit mouseover Effekt um damit weitere Informationen anzuzeigen. Erstellt habe ich das Ganze mit kleinen Bildern. Jetzt habe ich vielen Bildern einen Link zugeordnet, aber nicht allen. Bei den Bildern ohne Link gibt es halt keine weiteren Informationen. Leider funktioniert das jetzt nicht so wie ich mir das vorgestellt habe. Wenn ich den Bildern ohne Link jetzt keinen Link zuordne, wird der ganze Verteiler "zerschossen". Als Hilfslösung habe ich jetzt einen Anker im Fußberiech platziert und jetzt erscheint ein Strich an der Stelle wo der Anker sich befindet. Warum ein Strich?
Meine Fragen: Wie kann ich das Problem lösen, dass ich zum Teil Links einsetze und zum Teil nicht ohne dass sich mein Verteiler "verschiebt"? Wo kein Link ist darf dann auch kein "Händchen" erscheinen. So darf zum Beispiel bei "1980" nicht dieses "Händchen" (mit Hinweis auf einen Link) erscheinen.
Und warum erscheint bei dem Anker diese Linie?
Zu sehen ist dieser Verteiler hier: http://www.olympic-museum.de/footer/footer_test.html
Was muss ich ändern?
Danke für jede Hilfe.

klausi

djheke

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Olymoics</title>
<style>
* {
 margin:0;
 padding:0;
}


footer {
 text-align:center;
 position:relative;
}


h3 {
 text-align:left;
 background:#eee;
 padding:20px;
}


ul  {
 list-style:none;
 display:inline-block;
 text-align:center;
 clear:left;
}


li , a , span {
 display:inline-block;
}


li a {
 padding:10px;
 background:#ddd;
 color:#000;
 text-decoration:none;
}




li b {
 padding:10px;
 background:#daa;
 text-decoration:none;
}


span {
 position:absolute;
 top:20px;
 left:400px;
 display:none;
}


li:hover span {
 display:block;
}




</style>
</head>
<body>
<footer>
<h3>Other Olympic Official Badges:</h3>
<ul>
<li><a href="#">1886</a><span>Athen</span></li>
<li><b>1980</b><span>Moskau</span></li>
</ul>
</footer
</body>
</html>

Alles anzeigen

Versuch's mal so.

Klausi1

Hallo djheke,
vielen Dank für den Vorschlag, das Problem mit einer Liste zu lösen. Das ist eine Alternative, die ich noch nicht in Erwägung gezogen habe. Ich hatte diesen Verteiler ja mit kleinen Bildchen = png`s erstellt. Ist eine Lösung unter Einbeziehung der png`s nicht möglich oder nicht zu empfehlen? Ich würde gerne im Verteiler diese png`s einsetzen und bitte um eine Antwort ob dies auch möglich ist. Danke klausi1

djheke

Ja, klar kannst du die png's verwenden. Hatte mir nur nicht die Mühe machen wollen.

Klausi1

Ja aber gerade das war ja meine ursprüngliche Frage. Ich habe zwar jetzt eine alternative Lösung erhalten, aber mein eigentliches Problem wurde leider noch nicht beantwortet.

threadi

Zunächst: dein HTML-Code enthält noch einige Syntaxfehler. Die solltest Du zuerst korrigieren:
http://validator.w3.org/check?verbose=…t.html%23footer

Außerdem fehlt dort, wo Du den Style im Kopfbereich eingefügt hast ein beendendes "}". Dadurch kann es sein, dass manche Browser etwas falsch interpretieren.

Zitat von Klausi1

und jetzt erscheint ein Strich an der Stelle wo der Anker sich befindet. Warum ein Strich?

Weil Du den Link mit CSS-Eigenschaften versehen hast, die genau dafür sorgen. Außerdem ist dieser Link nicht wirklich ein Fußbereich, auch wenn seine ID "footer" heißt. Ich würde dir empfehlen zunächst über den Sinn und Zweck davon nachzudenken. Sollte es wirklich ein Fußbereich sein wäre <footer> das richtige Element und sollte nach allen anderen direkt im body stehen - nicht einfach irgendwo, wo du es gerade eingefügt hast.

Zitat

Wie kann ich das Problem lösen, dass ich zum Teil Links einsetze und zum Teil nicht ohne dass sich mein Verteiler "verschiebt"?

Mit einer Liste, wie schon gesagt. Und anstelle eines Links umgibst Du den Inhalt dann mit einem span dem du die exakt gleichen Eigenschaften gibst wie einem Link an dieser Stelle.

Zitat

Wo kein Link ist darf dann auch kein "Händchen" erscheinen. So darf zum Beispiel bei "1980" nicht dieses "Händchen" (mit Hinweis auf einen Link) erscheinen.

Stichwort cursor: http://www.css4you.de/cursor.html

Klausi1

Danke für die Hinweise. Ich habe jetzt einiges zu tun und werde alles erforderliche in Ruhe ein- und umarbeiten. Dann berichte ich von dem Ergebnis.

Tags