Anfrage bzgl. Programmierung eines Navigationsmenüs

Dieses Thema im Forum "Programmieren" wurde erstellt von Kevin2, 14. September 2004.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Kevin2

    Kevin2 Byte

    Registriert seit:
    18. Mai 2003
    Beiträge:
    93
    Hallo!

    Ich hätte eine Frage bzgl. einen Navi-Menüs auf
    http://www.gratis-tut-gut.de/toplisten.html .
    Und zwar würd ich gerne wissen, wie das Menü programmiert wurde.
    Mir gefällt nämlich sehr dieser Mouse-Over-Effekt wenn man über einen Link geht.
    Diese halbtransparente Leiste, die dann zu sehen ist, würde ich auch gerne für meine Navigationsleiste auf meiner Webseite nutzen.

    Kann mir jemand helfen, wie dieses Menü aufgebaut ist? :rolleyes:

    Grüße
    ekschperte :)
     
  2. astera

    astera Guest

    Hallo,

    wenn du auf der Seite bist, probier mal:
    Ansicht ==> Quelltext
    aber psssssst, nicht weitersagen ;-)
     
  3. Kevin2

    Kevin2 Byte

    Registriert seit:
    18. Mai 2003
    Beiträge:
    93
    Das mit dem Quelltext hatte ich schon probiert. Finde da aber nicht so das richtige...

    ich denke mal, dass das ganze mit CSS gemacht worden ist...weiß es aber nicht so genau....
     
  4. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.473
  5. astera

    astera Guest

    Coooool, wieder was gelernt.............
    :-)

    astera
     
  6. Kevin2

    Kevin2 Byte

    Registriert seit:
    18. Mai 2003
    Beiträge:
    93
    Ja okay aber reicht es, wenn ich nur folgenden Teil der css-Datei verwende?
    a:hover{ color: #000000;background-color:#E0EEE0; text-decoration:underline;font-family: verdana; font-size: 8pt; }

    Dann hab ich zwar einen Link-Hintergrund wenn ich mit der Maus drüber gehe, ich möchte aber auch noch diese gestrichelte Linie unter dem Link.
    Und warum macht er den Hintergrund nur für den Link und nicht wie auf
    http://www.gratis-tut-gut.de/toplisten.html für die gesamte Tabellenzelle?

    Sorry, aber ich hab nich so viel Erfahrung mit Css!
    Gruß
    ekschperte
     
  7. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.473
    Es reicht nicht, wie du an deinem Ergebnis siehst. Vor dem a:hover steht im Beispiel noch ein #menu. Dieses stellt einen Bezug zu einem Seitenelement mit selbiger "id", in dem Fall eine Tabelle, her - womit sich Änderung im <a>-Tag auch auf dieses Element auswirken:

    <table id="menu">
    <tr><td><a href="bla.html">BlaBlub</a></td></tr>
    </table>

    Die css-Anweisung lautet dann:

    #menu a:hover {
    ...was auch immer...
    }

    Über die weiteren css-Eigenschaften klärt dich http://de.selfhtml.org/css/eigenschaften/index.htm auf. Das Thema mit der Linie steht unter: http://de.selfhtml.org/css/eigenschaften/rahmen.htm

    Gruss, Matthias
     
  8. Kevin2

    Kevin2 Byte

    Registriert seit:
    18. Mai 2003
    Beiträge:
    93
    Hallo kalweit!

    Danke erstmal für deine Hilfe.
    Ich hab das Menü jetzt erstmal so gut wie fertig.
    Hätte da nur noch zwei kleine Fragen:

    Hier erstmal der Link zu meiner Seite. Das Menü befindet sich links.
    http://www.super-viel-geld-verdienen******

    Also:
    1.) Wie krieg ich es hin, dass die Backgroundfarbe wirklich komplett die ganze Zelle ausfüllt? Es ist ja immernoch ein kleiner Rand/Abstand zu sehen...
    2.) Die Links scheinen etwas nach rechts eingerückt - wie kommt das?
    Hab keine Ahnung, warum links neben der Verknüpfung ein bisschen Freiraum ist.

    Hoffe, du kannst mir nochmal helfen?!

    Soweit erstmal mein Code:

    Die Links:

    <table id="menu">
    <tr><td><a href="twister.htm" target=TRLX_Middle>1.] Twister-Mails</a></td></tr>
    </table>

    Und das Menü:

    <style type="text/css">
    #menu a {display: block;
    background-color:#DDDDDD;
    color:#003366;text-decoration:none;font-family:arial, sans-serif; font-size: 10pt; width:173px;
    border-bottom:solid 1px #d5e0e6;
    padding-left: 0px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
    }


    #menu a:visited{background-color:#DDDDDD;
    color:#003366;text-decoration:none;font-family:arial, sans-serif; font-size: 10pt; width:173px;
    border-bottom:solid 1px #d5e0e6;
    padding-left: 0px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
    }


    #menu a:active{background-color:#F0FFF0;
    color:#003366;text-decoration:none;font-family:arial, sans-serif; font-size: 10pt; width:173px;
    border-bottom:solid 1px #d5e0e6;
    padding-left: 0px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;
    }


    #menu a:hover {background-color:#F0FFF0;
    color: #003366;
    text-decoration:none ;font-family:arial, sans-serif; font-size:10pt;
    width:173px;
    border-bottom:dotted 1px #000000;
    padding-left: 0px; padding-bottom: 0px; padding-top: 0px;margin: 0px auto;

    }

    </style>
     
  9. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.473
    Ein cellpadding=0 im table könnte helfen...

    Gruss, Matthias
     
  10. Kevin2

    Kevin2 Byte

    Registriert seit:
    18. Mai 2003
    Beiträge:
    93
    Hi!

    Komischerweise steht alles auf 0!

    </HEAD>
    <BODY BGCOLOR="#FFCC66" TEXT="#080000" background="013d2c00dkelyh.gif" LINK="#003399" ALINK="#802873" VLINK="#660099">
    <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" VSPACE="0" HSPACE="0" >
    <TR>
    <TD ALIGN="LEFT"><FONT SIZE="2" COLOR="#003399" FACE="Arial,Helvetica,sans-serif"><B> <TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="183" BORDERCOLORLIGHT="#000099" BORDERCOLORDARK="#EEEEEE" FRAME="BOX" RULES="ROWS">
    <tR>
     
  11. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.473
    Ich meine die Tabellen um die Menüpunkte.

    Gruss, Matthias

    <table id="menu" cellpadding="0">
    <tr><td><a href="superstarmail.htm" target=TRLX_Middle>6.] SuperStarMail</a></td></tr>
    </table>
     
  12. Kevin2

    Kevin2 Byte

    Registriert seit:
    18. Mai 2003
    Beiträge:
    93
    Okay danke, das funktioniert!

    Aber mal noch ne andere Frage: Wird das Menü bei dir richtig angezeigt?
    Ich hab von einigen gehört, dass es "leer" ist und man sozusagen nur den grauen Hintergrund sieht. Bei mir war es auch so. Ich musste erstmal auf Aktualisieren gehen um es richtig zu sehen!?
     
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen