darstellungsfehler?

Andre267

Andre267

Erfahrenes Mitglied
Schönen guten Abend/Morgen,

irgendwie glaube ich das mein Browser spinnt...
Ich habe was ganz einfaches geschrieben, aber es wird einfach irgendwie nicht dargestellt.

(folgende Klassen: heady, cont, footy(teilweise fehlerhaft))

Was mache ich falsch?

index.php
HTML: 
<!DOCTYPE html>
<?php
	##Relevanten Datein includieren
	include("inc/func.php");
	
	$func = new func();

?>
<html lang="de">
	<head>
		<meta charset="UTF-8"/>
		<title><?php echo $func->get_title(); ?></title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<section class="wrapper">
		
			<header class="header">
				<span class="headerTitle"><?php echo $func->get_title(); ?></span>
				<nav>
					<ul>
						<li><a href="?site=Home">Home</a></li>
						
						<li><a href="?site=gen">generieren</a></li>
					</ul>
				</nav>
			</header>
			
			<article class="content">
				<section class="heady">
					<h1>Test</h1>
				</section>
				<section class="cont">
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
				</section>
				<footer class="foty"><p>Autor: Andre</p><p>Datum: 11.06.2013</p></footer>
			</article>
			
			<footer class="footer">
				(C) by Andre - 2013
			</footer>
			
		</section>
	</body>
</html>

Code: 
body{
	text-align: auto center;
	margin: 0 auto;
	padding: 0;
}

.wrapper{
	border: 1px solid black;
	width: 600px;
	height: 800px;
	background-color: red;
	position: absolut;
	margin: 0 auto;
	padding: 0px;
	margin-top: 20px;
	text-align: center;
}

.header{
	height: 150px;
	width: 600px;
	background-color: green;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: left;
}

.headerTitle{
	font-size: 1.8em;
	font-weight: bold;
	background-color:black; 
	filter:alpha(opacity=60); 
	opacity:.6;
	color: white;
	padding: 2px;
	margin: 0;
	padding-right: 20px;
	padding-left: 20px;
}

nav ul{
	margin: 0;
	padding: 0;
	margin-top: 92px;
	list-style-type: none;
	background-color:black; 
	filter:alpha(opacity=60); 
	opacity:.6;
	text-align: center;
}

.header nav ul li{
	display: inline;
	margin: 8px;
}

.header nav ul li a{
	text-decoration: underlined;
	color: white;
}

.header nav ul li a:hover{
	text-decoration: none;
}

.content{
	margin: 0 auto;
	width: 600px;
}

.heady{
	background-color: black;
}

.heady h1{
	color: white;
	margin: 0;
	padding: 0;
	font-size: 1.2em;
}

.cont{
	background-color: white;
	color: black;
}

footer .footy{
	color: white;
	background-color: black;
	display: inline;
}

Live Ansicht: http://anide.de/dev/blub/

Weiß jemand was ich falsch mache?
 
Was wird denn da nicht dargestellt? Also ich sehe hier eine Seite mit grünem Header und rotem Inhaltsbereich.
 
Andre267 hat gesagt.:
(folgende Klassen: heady, cont, footy(teilweise fehlerhaft))

HTML: 
<section class="heady">
					<h1>Test</h1>
				</section>
				<section class="cont">
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
				</section>
				<footer class="foty"><p>Autor: Andre</p><p>Datum: 11.06.2013</p></footer>
Zum Vergrößern anklicken....

Wie oben beschrieben.
 
Hi Andre,

gib dem header mal bei der Positions-Angabe statt absolute lieber relative:

HTML: 
.header{
    height: 150px;
    width: 600px;
    background-color: green;
    margin: 0;
    padding: 0;

    position: relative;

    text-align: left;
}

Sonst rückt dein Content, hinter den Header.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück