Hallo Community,
ich habe vor 2 Tagen mit HTML / CSS / PHP angefangen.
Meine Programmierkenntnisse: Java, Objective C, ABAP
Ich habe eine HTML Datei, die ein Navigationselement (Apple Navigation) im Body erstellt.
Im Head verzweige ich auf meine CSS Datei, er übernimmt aber einfach die Einstellungen nicht!
Setze ich die Stiles aber in den Header funktioniert es einwandfrei!
Ich verzweifle. Hoffe ihr könnt mir helfen. Anbei mein SC.
[HTML] Hugo Clan
[/HTML]Mein CSS:
[CODE]#menuheader { position:relative;
display:block;
height:35px;
-webkit-border-top-left-radius:4px;
border-top-left-radius:4px;
-o-border-top-left-radius:4px;
-ms-border-top-left-radius:4px;
-moz-border-radius-topleft:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
-o-border-top-right-radius:4px;
-ms-border-top-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-o-border-bottom-right-radius:4px;
-ms-border-bottom-right-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-o-border-bottom-left-radius:4px;
-ms-border-bottom-left-radius:4px;
-moz-border-radius-bottomleft:4px;
-webkit-box-shadow:rgba(0, 0, 0, 0.292969) 0px 1px 2px;
box-shadow:rgba(0, 0, 0, 0.292969) 0px 1px 2px;
-o-box-shadow:rgba(0, 0, 0, 0.292969) 0px 1px 2px;
-ms-box-shadow:rgba(0, 0, 0, 0.292969) 0px 1px 2px;
-moz-box-shadow:rgba(0, 0, 0, 0.292969) 0px 1px 2px;
font:normal normal normal 12px/normal ‚Lucida Grande‘, ‚Lucida Sans Unicode‘, Helvetica, Arial, Verdana, sans-serif;
line-height:35px;
text-decoration:none;
margin-top:10px;
width:600px;
background-color:transparent;
}
body {
width:100%;
height:100%;
background-color:#FFFFFF;
margin:0;
padding:5px;
}
#basis {
width:640px;
height:960px;
position:relative;
float:none;
display:block;
background-color:#FFFFFF;
margin:30px auto auto auto;
}
#menuheader-roundrect, #menuheader-fill {
display:block;
position:absolute;
width:600px;
height:35px;
top:0;
left:0;
z-index:2;
}
#menuheader-shadow {
display:block;
position:absolute;
width:600px;
height:35px;
top:-1px;
left:-2px;
z-index:1;
}
#menuheader #navlists {
position:relative;
display:block;
zoom:1;
margin:0;
padding:0;
}
#menuheader #navlists li {
display:inline;
text-align:center;
color:#FFFFFF;
}
#menuheader #navlists li a {
float:left;
height:35px;
overflow:hidden;
background-image:url(images/navi.png);
background-repeat-x:no-repeat;
background-repeat-y:no-repeat;
background-repeat:no-repeat;
background-attachment:initial;
background-origin:initial;
background-clip:initial;
background-color:#000000;
color:#FFFFFF;
text-align:center;
width:100px;
background-position:100% 0px;
background-position-x:100%;
background-position-y:0;
outline-style:none;
outline-width:initial;
outline-color:#000000;
text-decoration:none;
}
#menuheader #navlists li a:link {
cursor:pointer;
}
#menuheader #navlists li#item-first a {
background-position:0px 0px;
background-position-x:0;
background-position-y:0;
}
#menuheader #navlists li#item-first a.before {
background-position:0px -35px;
background-position-x:0;
background-position-y:-35px;
}
#menuheader #navlists li#item-first a:hover, #menuheader #navlists li#item-first a:focus {
background-position:0px -70px;
background-position-x:0;
background-position-y:-70px;
}
#menuheader #navlists li#item-first a:active {
background-position:0px -105px;
background-position-x:0;
background-position-y:-105px;
}
#menuheader #navlists li a.before {
background-position:100% -35px;
background-position-x:100%;
background-position-y:-35px;
}
#menuheader #navlists li a:hover, #menuheader #navlists li a:focus {
background-position:100% -70px;
background-position-x:100%;
background-position-y:-70px;
}
#menuheader #navlists li a:active {
background-position:100% -105px;
background-position-x:100%;
background-position-y:-105px;
}
#menuheader #navlists li#item-last a {
background-position:-100px 0px;
background-position-x:-100px;
background-position-y:0;
}
#menuheader #navlists li#item-last a.before {
background-position:-100px -35px;
background-position-x:-100px;
background-position-y:-35px;
}
#menuheader #navlists li#item-last a:hover, #menuheader #navlists li#item-last a:focus {
background-position:-100px -70px;
background-position-x:-100px;
background-position-y:-70px;
}
#menuheader #navlists li#item-last a:active {
background-position:-100px -105px;
background-position-x:-100px;
background-position-y:-105px;
}
#menuheader #navlists li a.current {
background-position:100% -140px;
background-position-x:100%;
background-position-y:-140px;
}
#menuheader #navlists li#item-last a.current {
background-position:-100px -140px;
background-position-x:-100px;
background-position-y:-140px;
}[/CODE]