Seite will nicht gescrollt werden - obwohl lange Inhalt

BlueBull

Grünschnabel
Hallo, ich habe da ein Problem. Die Seite will nicht gescrollt werden, obwohl lange Inhalt (viele <br> hingemacht zum Testen). fixed ist auch nicht drin. :/

CSS:
Code:
body {
	margin: 0px;
	padding: 0px;
	background-image: url('../template/backgroundzb.jpg');
}
p {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 13px;
	color: #4d4d4d;
}
p a:link {
	color: #2a8dd4;
	text-decoration: none;
}
p a:hover {
	color: #96c4e6;
	text-decoration: none;
}
p a:visited {
	color: #ea4d4e;
	text-decoration: none;
}
div.header {
	position: fixed;
	background-image: url('../template/headerbg.png');
	background-repeat: repeat-x;
	width: 100%;
	height: 170px;
}
div.headercontent {
	position: fixed;
	width: 1010px;
	height: auto;
	left: 50%;
	margin-left: -505px;
}
div.logobar {
	background-image: url('../template/logobarbg.png');
	background-repeat: no-repeat;
	width: 1010px;
	height: 83px;
}
span.logo {
	background-image: url('../template/logo.png');
	background-repeat: no-repeat;
	width: 351px;
	height: 45px;
	display: block;
	float: left;
	margin: 30px;
}
span.facebookpartner {
	background-image: url('../facebookpartner/fb_eyelevi.png');
	background-repeat: no-repeat;
	width: 230px;
	height: 45px;
	display: block;
	float: right;
	margin: 30px;
}
div.navibar {
	position: absolute;
	background-image: url('../template/navibarbg.png');
	background-repeat: repeat-x;
	width: 1010px;
	height: 43px;
}
#navibarbuttons {
	margin-top: 6px;
	margin-left: 50px;
}
div.navibarleiste {
	position: absolute;
	top: 126px;
	background-image: url('../template/navibarleistebg.png');
	background-repeat: repeat-x;
	width: 1010px;
	height: 38px;
	left: 50%;
	margin-left: -505px;
}
#navi {
	padding-top: 13px;
	padding-left: 30px;
	padding-right: 30px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 12px;
	color: #4d4d4d;
}
div.banner {
	position: absolute;
	background-image: url('../template/bannerbg.png');
	background-repeat: repeat;
	margin-left: 5px;
	width: 1000px;
	height: 110px;
	top: 164px;
	left: 50%;
	margin-left: -500px;
}
div.content {
	background-image: url('../template/contentbg.png');
	background-repeat: repeat-y;
	position: fixed;
	top: 274px;
	width: 1010px;
	height: auto;
	left: 50%;
	margin-left: -505px;
	padding-bottom: 20px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 13px;
	color: #4d4d4d;
}
div.main {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
}
div.streamwindow {
	width: 640px;
	float: left;
}
div.sidebar {
	width: 300px;
	float: right;
	clear: right;
}
div.mainfoot {
	padding-top: 20px;
	clear: both;
}
div.footer {
	background-image: url('../template/contentbg.png');
	background-repeat: repeat-y;
	width: 1010px;
	height: 15px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 11px;
	color: #4d4d4d;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
	clear: both;
}

HTML:
Code:
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>

<body>
<div class="header"></div>
<div class="headercontent">
	<div class="logobar">
		<span class="logo"></span>
		<span class="facebookpartner"></span>
	</div>
	<div class="navibar">
		<div id="navibarbuttons">
		<a href="#" id="home">Home</a>
		<a href="#" id="language">Language</a>
		<a href="#" id="stream1">Pim 1-9</a>
		<a href="#" id="stream2">Pim 10-19</a>
		<a href="#" id="stream3">Pim 20-29</a>
		<a href="#" id="stream4">Pim</a>
		<a href="#" id="stream5">Pim Mix</a>
		<a href="#" id="news">News</a>
		</div>
	</div>
</div>
<div class="navibarleiste">
	<div id="navi">
	Startseite &middot; Partnerschaftsanfrage &middot; Kontakt
	</div>
</div>
<div class="banner">test</div>
<div class="content">
	<div class="main">
		<div class="streamwindow">
		<font color="#c80204">Test</font>
		
		</div>
		<div class="sidebar">Blabla das ist Sidebar</div>
		<div class="mainfoot">Test</div>
	</div>
	<div class="footer">Copyright &copy; 2013 &middot; Made in Switzerland <font color="#c80204">?</font> &middot; All Rights Reserved.<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
	<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
	<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
	<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
	<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
	<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
	<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a</div>
</div>
</body>

</html>
 
Hi,
doch fixed ist drinnen in div.content und dein Footer ist ein Kindelement von diesem.
Ich würde mal das fixed überall rausnehmen und erst ganz am Schluss bei den Elementen hinzufügen wo du es wirklich benötigst.

Aber ich würde dir raten nochmal von Vorne zu beginnen. Du hast sehr viele position:absolute und position: fixed drinnen. Für mich sieht das etwas ungesund aus. Und dann kommt es eben zu solchen Problemen.

http://jsbin.com/elipar/4/edit

Viele Grüße
 
Ouh ********,.. wenn ich nochmal von vorne anfangen würde, würde meine 14 Stunden umsonst. Wenn ich das fixed und absolute rausnehmen würde, würde dann ganze schief. Deswegen hab ich so "Hilfsmittel" reingetan, damit es alles schön und gerade aussieht. :/
 
Nimm die 14 Stunden als Lehre :).
Also die Webseite muss auch ohne dem position:fixed funktionieren, das ist ja damit Elemente beim Scrollen stehen bleichen, das brauchst du wirklich erst am Schluss, wenn überhaupt.
Bei absolute sieht die Sache etwas anders aus, machts aber auch nicht besser.
Und
- das Font-Element ist seit HTML 4.01 als depricated deklariert. Also nicht mehr verwenden.
- Inlinesytles werden nicht so geschrieben: color="#fff" sondern style="color: #fff;".

Dann deklariere deine Klassen besser ohne Angabe des HTML-Elementes du beschneidest dich dadurch nur und machst das Layout von der Struktur abhängig. Heißt wenn du dein HTML-Element änderst, funktioniert dein CSS nicht mehr.
Dies Bezüglich gibt es aber unterschiedliche Meinungen, also selber eine bilden :).

Hier mal eine aufgeräumte Version: http://jsbin.com/elipar/16/edit
Ob diese jetzt so 100% deiner Vorstellung entspricht weiß ich nicht. Lässt sich ja aber anpassen.

Der IE kann je nach Version mit dem border-box Probleme haben. Musst du selber wissen bis zu welcher Version du unterstützt.

Was die Breite der Webseite angeht so kannst du für .wrapper auch max-width anstatt width nehmen dann bekommst du floatende Webseite.

Viele Grüße
 

Neue Beiträge

Zurück