HTML & CSS => mein tot -.-

imoney91 · 25 Februar 2012

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:

<html><head>	<title>Hugo Clan</title>	<link rel="stylesheet" type="text/css" href="style/navigation.css" ></head>
<body style="" >
	<div id="basis" style="position:relative; float:none; margin-left:auto; margin-right:auto; display:block; " >	<div id="menuheader" style="position:relative; float:none; margin-left:auto; margin-right:auto; display:block; " >		<ul id="navlists" >			<li id="item-first" ><a class="current" href="index.html" target="_top" ><span>Willkommen</span></a></li>			<li><a href="member.html" target="_top" ><span>Member</span></a></li>			<li><a href="forum.html" target="_top" ><span>Forum</span></a></li>			<li><a href="videos.html" target="_top" ><span>Videos</span></a></li>			<li><a href="fotos.html" target="_top" ><span>Fotos</span></a></li>			<li id="item-last" ><a href="impressum.html" target="_top" ><span>Impressum</span></a></li>		</ul>	</div>	</div>

</body></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:

vitus37 · 25 Februar 2012

Das sieht sehr nach einem falschen Pfad aus. Zeigt "style/navigation.css" tatsächlich auf die richtige Datei?

WhispR · 26 Februar 2012

Versuche desweiteren nur eine Art von CSS Definition pro HTML Element zu benutzen, eine Definition per Classe / Id + style-Attribut verkompliziert die ganze Sache später für dich ;-)

sysop · 27 Februar 2012

Html und Style funktionieren.

Lass dir den Quelltext anzeigen und klick auf den Styl-Pfad, dann musst du dein Stylesheet sehen. Ist dem nicht so, ist der Pfad nicht korrekt.
Das Verzeichnis style muss existieren.

HTML & CSS => mein tot -.-

imoney91

Mitglied

vitus37

Senior HTML'ler

WhispR

Mitglied

sysop

Guest

Neueste Beiträge