Hover Problem bei der Navigation

    Guten Mittag :D

    Ich bin dabei für Informatik eine Homepage zu erstellen bin aber noch ein Blutiger Anfänger

    Ich stehe Momentan vor einem kleinen Schönheitsfehler bei der Navigation, welchen ich nicht weg bekomme..


    So soll es aussehen:


    [Blockierte Grafik: http://puu.sh/iopQJ/d582c47224.jpg]

    Also die ganze Zeile des Menüpunktes über den man "hovert" soll:
    bg-color: white und text-color: black sein.


    So sieht es allerdings nur aus, wenn man über die Schrift/Link eines Menüpunktes (z.B."Home") hovert
    ________________________________________________________________________________________

    So sieht es dann aus wenn mann nur über die Zeile und nicht über die Schrift/Link eines Menüpunktes (z.B. "Home") "hovert"

    [Blockierte Grafik: http://puu.sh/ioqaj/7e5d9c0640.jpg]

    Wie schaffe ich das?


    Im Prinzip soll:
    Wenn man über li hovert, auch .Hint:hover in Kraft treten.

    Hier der relevante Code:


    <style type="text/css">
    h1 {font-size: 50px;text-align: center; font-face: Agency FB; }
    h2 {color: white; font-size: 40px;text-align: center; }
    h3 {color: white; font-size: 35px;text-align: center; }
    P {color: white; }
    Body, a {background-image:url(#);[/url] background-repeat:no-repeat; background-position: center; font: normal 120.01% Agency FB, sans-serif; color: white; background-color: black; }
    table {color: white; margin-left:70px; }
    ul#Navigation {margin: 0; padding: 0; }
    ul#Navigation li {list-style: none; margin: 0; padding: 0;font-size: 22px; }
    .table_music {margin-left: auto; margin-right: auto; }
    .image {transition: transform 1s; }
    .image:hover {transform: scale(1.5, 1.5); }
    .text {transition: transform 1s; }
    .text:hover {transform: scale(1.5, 1.5); }
    .Hint {background-color: black; color: white }
    .Hint:hover {background-color: white; color: black }
    li:hover {background-color: white }
     </style>

    ______________________________________________________

    <!-- Navigation -->


    <table width="8%" border="1" cellpadding="5" cellspacing="1">
    <tr bgcolor="black">
    <td align="center" style="text-align:center;"> <ul id="Navigation">
    <font size="+3,5">Menü</font>
    <li><a href="#"><span class="Hint"; > Home </span> </a></li>
    <li><a href="#"> <span class="Hint"; >Infos</span> </a></li>
    <li><a href="#"> <span class="Hint"; >Team</span> </a></li>
    <li><a href="G#"> <span class="Hint"; >CreepyPastas</span> </a></li>
    </ul></td>
    </tr>
    </table>


    <!-- end of Navigation -->


    Bei Fragen einfach melden!


    Danke im Vorraus und Liebe Grüße
    Nyrumi

    Link zur Seite wäre sinnvoll.

    du gibst a eine schwarze Hintergrundfarbe, dann ist die auch schwarz, wie gewollt. ;)

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Dein Problem sind einfach falsche Syntax in den CSS-Anweisungen. Validiere mal. Wenn du Phase5² nimmst, installier dir HTML-Tidy.

    Und sowas, naja...
    <body>
    </div>

    2x body und lass die Tabellen sein.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Einmal editiert, zuletzt von Gastl (14. Juni 2015 um 16:50)

    Ich danke dir zwar für den Hinweis aber der "Fehler"
    <body>
    </div>
    Ist nicht ausschlaggebend zu meinem Problem..
    welche Syntax in den CSS-Anweisungen sind denn falsch?

    und was genau meinst du mit " und lass die Tabellen sein."

    Es ist ganz einfach so, dass HTML und CSS Anweisungen einer bestimmten Syntax zu folgen haben. Das ist bei dir nicht der Fall.

    Das mit den
    <body>
    </div>

    ist zwar, wie du bemerkst nicht der Grund für dein Problem, aber exemplarisch für deinen Quellcode. Ich wiederhole mal, validiere deinen Quellcode. Dazu gibt es vom W3C eine Seite, bei der man das kostenlos machen kann.

    Was ich mit Tabelle weglassen meine? Man stellt zwar aus Höflichkeit keine Gegenfragen, aber was willst du denn mit den Tabellen erreichen? Du hast keine Daten die tabellarisch dargestellt werden müssen in deinem Quelltext drin. Somit ist eine oder mehrere Tabelle(n) fehl am Platze.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Ich habe eine Tabelle für die Navigation benutzt, da zu dem Zeitpunkt dies für mich am einfachsten war um sie so aussehen zu lassen wie sie nun aussieht.. Wie schon gesagt.. Ich bin noch ein Anfänger

    Sorry, man kann lernen ;)
    Sollte es auch. Niemand ist perfekt, jeder lernt.

    Tipp: Sieh dir deine CSS-Anweisungen an. Einzelne Anweisungen enden mit einem Semikolon. Das ist dein Anzeigefehler. Die fehlen, glaube in 3 Zeilen.

    Wenn es für dich einfach ist von vornherein Fehler zu lernen und zu verinnerlichen, bist du auf einem falschen Weg. Lerne von Anfang an mit CSS zu positionieren und zu stylen. Mit Tabellen kann man das auch "noch" machen, aber HTML entwickelt sich weiter. So hast du z.B. etwas in deinem Quellcode drin, das es nicht mehr gibt, aber Browser das noch übersehen und auch interpretieren. Irgendwann ist damit aber Schluss und dann sieht deine Seite von heute auf morgen Sch.... aus. Dann ist das Geheul groß.

    So hast du z.B. drin: font-face
    W3C CSS sagt dazu: Die Eigenschaft font-face existiert nicht : Agency FB

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.