CSS Einsteiger

    Guten Abend,

    wie schon im Titel erwähnt versuch ich mein ersten Gehversuche mit CSS. Ich möchte eine Navileiste erstellen, für diese hab ich mir den HTML-Code und den dazu passenden CSS-Code heruntergeladen. Diese Navileiste würde ich nun gerne in meine Hompage einbetten, leider wird aber nur der blanke Text angezeigt und die Bilder wollen sich nicht zeigen^^.

    Hier mein Hompage Ordner Aufbau:

    [] Blog (wird automatisch über die URL aufgerufen, muss meines wissens also nicht mehr bei der Verlinkung in der CSS-Datei angegeben werden)
    -> folgende Dateien befinden sich in diesem Ordner:

    [] images (dieser Ordner enthält die Bilder für die Navi leiste)
    - dropdown-menu.css (dies ist der CSS code für die Navileiste)
    - index.html (hier habe ich den HTML Code für die Navileiste drin)

    Hier der CSS Code:
    #navigation {
    margin:0;
    padding: 0;
    clear:both;
    width:950px;
    height:51px;
    background: #d6eaf8 url(http://test.rogfrog.com/images/dropdown-bg.gif) repeat-x left top;
    }


    ul.nav-main,
    ul.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
    }


    ul.nav-main {
    position: relative;
    z-index: 597;
    }

    ul.nav-main li:hover > ul {
    visibility: visible;
    }


    ul.nav-main li.hover,
    ul.nav-main li:hover {
    position: relative;
    z-index: 599;
    cursor: pointer;
    background: url(http://test.rogfrog.com/images/dropdown-bg-hover.gif) repeat-x left top;
    }


    ul.nav-main li {
    float:left;
    display:block;
    height: 51px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    background: url(http://test.rogfrog.com/images/separator.gif) no-repeat right center;
    }

    ul.nav-main li a {
    display:block;
    padding: 16px 16px 0 16px;
    height: 35px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    text-decoration:none;
    }

    ul.nav-main li a:hover {
    color:#D6D6D6;
    }


    ul.nav-main *.list {
    padding-right: 22px;
    background: url(http://test.rogfrog.com/images/navigation-arrow.gif) no-repeat right top;
    }


    ul.nav-sub {
    visibility: hidden;
    position: absolute;
    padding:10px;
    top: 48px;
    left: 0;
    z-index: 598;
    background: #353535 url(http://test.rogfrog.com/images/dropdown-list-bg.gif) repeat-x left top;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    }


    ul.nav-sub li {
    list-style:none;
    display:block;
    padding: 0;
    height: 27px;
    float: none;
    width:145px;
    border-bottom: 1px solid #5a5a5a;
    background: none;
    }

    ul.nav-sub li a {
    list-style:none;
    display:block;
    padding: 6px 5px 6px 5px;
    height: 15px;
    float: none;
    width:145px;
    background: none;
    font: 12px Arial, Helvetica, sans-serif;
    }


    Und Hier der HTML-Code der Index.html-Datei
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="de-ch">
    <head>
    <meta content="text/html;charset=ISO-8859-1"
    http-equiv="Content-Type">
    <title>ROGFROG Blog</title>
    <meta content="ROG" name="author">
    <meta content="Der Blog für zwischendurch!"
    name="description">
    </head>
    <body>
    <br>
    <br>
    <ul id="navigation" class="nav-main">
    <li><a href="http://test.rogfrog.com/">Home</a></li>
    <li class="list"><a href="#">Freebies</a>
    <ul class="nav-sub">
    <li><a href="http://test.rogfrog.com/">Backgrounds</a></li>
    <li><a href="http://test.rogfrog.com/">Buttons</a></li>
    <li><a href="http://test.rogfrog.com/">Graphics</a></li>
    <li><a href="http://test.rogfrog.com/">HTML
    &amp; CSS</a></li>
    <li><a href="http://test.rogfrog.com/">Icons</a></li>
    <li><a href="http://test.rogfrog.com/">PSD</a></li>
    <li><a href="http://test.rogfrog.com/">Templates</a></li>
    <li><a href="http://test.rogfrog.com/">Tutorials</a></li>
    </ul>
    </li>
    <li class="list"><a href="#">About</a>
    <ul class="nav-sub">
    <li><a href="http://test.rogfrog.com/">About
    PSDGraphics</a></li>
    <li><a href="http://test.rogfrog.com/">Commercial
    Use</a></li>
    <li><a href="http://test.rogfrog.com/">Terms
    Of Use</a></li>
    </ul>
    </li>
    <li><a href="http://test.rogfrog.com//">Advertise</a></li>
    <li><a href="http://test.rogfrog.com/">Contact</a><img
    src="chrome://editor/content/images/tag-comment.gif"><!-- Kommentar: LOGO Start --></li>
    </ul>
    <div style="text-align: center;"><img
    style="width: 800px; height: 165px;" alt="ROGFROG Blog Logo.png"
    src="http://test.rogfrog.com/ROGFROGBlogLogo.png"><!-- Kommentar: LOGO Start END --><!-- Kommentar: Intro Start -->
    <div style="text-align: center;"><img
    style="width: 800px; height: 392px;" alt="ROGFROG Blog Logo.png"
    src="http://test.rogfrog.com/rogfrogintrobild.png"><!-- Kommentar: Intro END --><!-- Kommentar: mobil Blog Start -->
    <div style="text-align: center;"><a
    href="http://m.rogfrog.com/"><img
    style="border: 0px solid ; width: 800px;"
    alt="ROGFROG Blog Logo.png"
    src="http://test.rogfrog.com/thenewblogforyour.png"></a><!-- Kommentar: mobil Blog END --></div>
    </div>
    </div>
    </body>
    </html>


    Ich würde mich über hilfreiche Antworten sehr freuen =)


    Mit freundlichen Grüssen
    Euer ROG

    Vielen Dank für die schnelle Antwort.

    Verbinde ich die CSS-Datei nicht hier:

    <ul id="navigation" class="nav-main">

    mit der HTML-Datei?
    Falls nein, wie und wo müsste ich die verbinden?^^ Wie schon gesagt versuch mich zum Erstenmal darin.

    Im Head :)

    HTML
    <html>
<head>
<link href="pfad zur css/dateiname.css" rel="stylesheet" type="text/css">
<title>Titel</title>
</head>
<body>
</body>
</html>

    Yeaaa funktioniert ja prima - vielen Dank für eure schnelle und kompetente Hilfe =)


    Ich wünsche euch noch einen schönen Abend ;)


    Mit freundlichen Grüssen

    Euer ROG