Ergebnis 1 bis 7 von 7

Thema: Mouse over mit und ohne link

  1. #1
    HTML Newbie
    Registriert seit
    06.11.2015
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Böse Mouse over mit und ohne link

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Mouse over mit und ohne link

    Code:
    <!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>
    Versuch's mal so.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    06.11.2015
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mouse over mit und ohne link

    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

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Mouse over mit und ohne link

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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    06.11.2015
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mouse over mit und ohne link

    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.

  6. #6
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Mouse over mit und ohne link

    Zunächst: dein HTML-Code enthält noch einige Syntaxfehler. Die solltest Du zuerst korrigieren:
    http://validator.w3.org/check?verbos....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 Zitat von Klausi1 Beitrag anzeigen
    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.

    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.

    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

  7. Folgende User finden die Antwort von threadi gut:


  8. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    06.11.2015
    Beiträge
    7
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Mouse over mit und ohne link

    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.

Ähnliche Themen

  1. bilder als Link ohne Linkrahmen
    Von synaptic im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 23.06.2007, 17:06
  2. bilder link ohne rahmen
    Von gast im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.12.2006, 19:22
  3. Link erstellen ohne unterstreichung
    Von Kolb im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 02.10.2006, 19:08
  4. Link ohne Frameset
    Von between us and them im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.06.2005, 15:54
  5. bild als link ohne link-markierung
    Von Kanzler2 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 06.04.2005, 23:14

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •