jQuery Problem?!

Hallo,

also ich m�chte nun ein bisschen jQuery ausprobieren.
Mit Firebug funktioniert alles hervorragend. Nun m�chte ich das
in eine .js Datei schreiben. Bloss es wird nicht ausgef�hrt.

Erstmal habe ich jQuery richtig eingebunden:

Code:

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

Und die .js Datei habe ich folgend eingef�gt:

Code:

    <script type="text/javascript" src="js/js-test.js"></script>

Das sollte alles richtig sein. Wenn ich mit Firebug die .js Datei suche finde ich es auch
sowie den Inhalt.

Mein .js Code ist folgender:

Code:

$('#box1').click(function(){
   $('#box1').css('background-color','black');
});

Wenn ich auf die Box klicke, soll die Box Schwarz werden.
In FireBug funktioniert das auch, nur wenn ich das in der Datei
haben m�chte funktioniert das nicht.

Zur Information ich Arbeite Localhost und auf Ubuntu 12.04, mit Lampp.

PHP DOKUMENT:

Code:

<!DOCTYPE html>
    <head>
        <title></title>
        <link href="css/css.css" type="text/css" rel="stylesheet" />
        <link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Princess+Sofia' rel='stylesheet' type='text/css'>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="js/js-test.js"></script>
        
        
        
        
    </head>
        <body>
            <div id="wrapper">
                <div id="content">
                    <div id="header">
                        <p id="headerschrift">YourSite</p>
                        <div id="nav">
                            <ul class="ula">
                                <a href="#"><li class="clearfloat">Home</li></a>
                                <a href="#"><li class="clearfloat">Firma</li></a>
                                <a href="#"><li class="clearfloat">Kunden</li></a>
                                <a href="#"><li class="clearfloat">Links</li></a>
                            </ul>
                        </div>
                    </div>
                    <div id="inside">
        
                            
                            
                            <div id="box1">Klick mich</div>
                            
                                
                            
                </div>
            </div>
            <div id="footer">Copyright 2012 | Kevin D. </div>
        </body>


</html>

CSS DOKUMENT:

Code:

/* v1.0 | 20080212 */
 
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    
    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }
    
    /* remember to highlight inserts somehow! */
    ins {
        text-decoration: none;
    }
    del {
        text-decoration: line-through;
    }
    
    /* tables still need cellspacing=0 in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
/*--------------------------------------------------------*/
/*-----------CSS STYLE ZURUECK SETZEN --------------------*/
/*--------------------------------------------------------*/


/*<-<-<-<-<-<-<-START->->->->->->*/


/*Background*/
body{
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
background:-o-linear-gradient(top, #fff, #adf); /* Opera */
background:-ms-linear-gradient(top, #fff, #adf); /* IE */
background:linear-gradient(top, #fff, #adf); /* W3C Standard */
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;

}


#content{
    height: 100%;
    width: 1000px;
    border: 1px solid black;
    background-color: white;
    opacity: 40%;
    margin: 0 auto;
    border-radius: 9px;
    box-shadow: 0px 0px 5px black;
    margin-top: 20px;
}

#footer{
    text-align: center;
    font-size: 14px;
    margin-top: 5px;
}

#header{
    background-image: url(img/header.jpg);
    height: 100px;
    width: 1000px;
    border-radius:9px 9px  0 0 ;
    opacity: 90%;
}

#headerschrift{
    text-align: center;
    font-size: 70px;
    line-height: 80px;
    font-family: 'Dr Sugiyama', cursive;
}

.clearfloat{
    float:left;
    margin-left: 70px;
    text-align: center;
    margin-top: 12px;
}

ul{
     width: 500px;
     margin: 0 auto;
    
}

#nav{
    width: 1000px;
    height: 40px;
    background: #b8e1fc; /* Old browsers */
    background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
    position: absolute;
    font-family: 'Princess Sofia', cursive;
    font-size: 20px;
}

a{
    text-decoration: none;
    color: black;
}

a:hover{
    text-shadow:0px 0px 3px black;
}

#inside{
      height: 100%;
      margin: 60px auto 60px;
      width: 90%;

}

#box1{
    position:absolute;
    left:20px;
    top:20px;
    height:50px;
    width:50px;
    background-color:green;
  
}

JAVASCRIPT DOKUMENT

Code:

$('#box1').click(function(){
   $('#box1').css('background-color','black');
});

Vielen Dank!