Anfrage bzgl. Programmierung eines Navigationsmenüs

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?

Grüße
ekschperte

 

Hallo,

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

 

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....

 

??? Also ich sehe nichts, was nicht mit einem normalen a:hover machbar wäre...

Gruss, Matthias

PS: http://www.gratis-tut-gut.de/format.css

 

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

astera

 

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

 

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

 

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>

 

Ein cellpadding=0 im table könnte helfen...

Gruss, Matthias

 

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>

 

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>

 

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!?