Navigation Problem

[snuf]

Hallo,

ich bin totaler neuling in xhtml und css. Leider habe ich da ein problem bei dem ich nicht weiter komme.

Folgender Quellcode von xhtml

<div id="kopf">
        
        <ul id="navi">
        <li title="home"><a href="#" >Home</a></li>
        <li title="about"><a href="#" >About</a></li>
        <li title="archive"><a href="#" >Archive</a></li>
        <li title="contact"><a href="#" >Kontakt</a></li>
        <li title="links"><a href="#" >Links</a></li>
        </ul>
        </div>

Ich habe ein div um den Kopf Container zu bestimmen und diesen zu bearbeiten. In dem Div Container soll ein Logo alls Background-imag

Im folgenden habe ich den css code der in einer anderen Datei liegt.

#kopf{
background-image:url("http://www.html.de/images/logo.jpeg");
background-repeat: no-repeat;
background-position:center;
background-color: white;
display: block;
}

ul#navi{
    list-style-type: none;
    margin-top:;
    padding:0px;
    background-color: orange;  
    display: block;
  }


ul #navi li  {
        padding:1px;
        display: inline;
        float:left;
        }
        
ul  #navi li a{
         display:block;
         width:70px;
         color:white;
         text-decoration: none;
         padding:4px;
         }
         
ul #navi li a:link, li a:active {
                           border:0px;
                           }
                           
ul #navi li a:hover{
                background-color: rgb(103, 158, 241);

Folgendes Problem besteht nun eigentlich sollte die navigation Horizontal unter dem in der Box erscheinen, doch dieses tut es leider nicht und das navi bleibt vertikal desweiteren kann mann leider das Imag nicht sehen und man bekommt nur die backgroundcolor von body wieder. Leider weiss ich nicht wie man die ul richtig anspricht oder wie man, dass richtig selektiert.

Hatte mir das CC4 yous chon durchgelesen aber bin nicht richtig weiter gekommen :(

danke für eure hilfe


MERGED

Habe meinen Quellcode nun verändert und skaliert:

Folgendes ist neu geworden:

        <div id="kopf">
        
        <ul>
        <li title="home"><a href="#" >Home</a></li>
        <li title="about"><a href="#" >About</a></li>
        <li title="archive"><a href="#" >Archive</a></li>
        <li title="contact"><a href="#" >Kontakt</a></li>
        <li title="links"><a href="#" >Links</a></li>
        </ul>
        </div>

die liste besitzt nun keine eigenen div Cointianer mehr.

neuer CSS Quellcode:

#kopf{
background-repeat: no-repeat;
float: left;
width: 100%;
background-color: yellow;
background-image: url (images/hanslogo.jpg);


}

#kopf ul{

    list-style-type: none;
    margin-top:;
    padding:0px;
    margin: 0px;
    background-color: orange;  
    display: block;
  }

#kopf ul li  {
        padding:1px;
        margin: 0px;
        display: inline;
        float:left;
        }
        
#kopf a { 
        display: block;
        }
        
#kopf ul li a{
         display:block;
         width:70px;
         color:white;
         text-decoration: none;
         padding:4px;
         }
         
#kopf ul li a:link, li a:active {
                           border:0px;
                           }
                           
#kopf ul li a:hover{
                background-color: rgb(103, 158, 241);
                }

leider wird das Logo nicht angezeit die Horizontale Navigation funktioniert ohne probleme bloss das Logo im kopf wird nicht angezeigt.

Folgendes Das Image dafür liegt in (Website/images/)
die css datei in (Website)

Ich komme leider nicht dahinter wieso das logo nicht angezeigt wird.

 

[w7]

background:url('');

die ' und ' Anführungszeichen brauchen ein paar Browser im Quirksmodus.