height:100% wird nicht richtig dargestellt

Fugel · 13.03.2009

hallo leute, irgendwie hab ich einen denkfehler bei meinem momentanen projekt, ich möchte den hintergrund meiner seite nach unten um 100% anzeigen lassen, wenn ich jetzt jedoch die seite in meinem browser öffne wird es im erstem moment richtig angezeigt, aber beim runterscrollen hört es auf sich zu wiederholen.

für diesen part ist die folgende zeile zuständig:

HTML:

#bg {
    width:1024px;
    height:100%;
    background-image:url(../images/bg.gif);
    overflow: auto;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

und beim aufruf im browser schauts dann nach dem runterscrollen so aus:

ich bin mir sicher das es sich dabei mal wieder nur um einen denkfehler handelt, nur ich komm nicht drauf

naja gibt halt solche und solche tage

Tattoomaus78 · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

hast du die Höhe von html und body auch auf 100% gesetzt?

btw. es ist immer hübscher wenn du den gesamten Code postest oder einen Link zur Seite angibst

Fugel · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

danke für deine antwort. ja das habe ich gemacht:

HTML:

html,body {
    height: 100%;
}

die seite ist im moment nur local, daher leider kein link zur hand.

Tattoomaus78 · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

zeig mal den kompletten code

Fugel · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

grrrr is ja gut

HTML:

html,body {
    height: 100%;
}
a:link {
    color: #FF6600;
}
a:hover {
    color: #FF9000;
}
body {
    margin:0px;
    background-color:#333333;
    background-image:url(../images/wgw_11.gif);
    background-repeat:repeat-x;
}
#head_bg_r {
    width:56px;
    height:384px;
    background-image:url(../images/wgw_04.gif);
    position:absolute;
    left:969px;
    top:0px;
    z-index:0;
}
#bg {
    width:1024px;
    height:100%;
    background-image:url(../images/bg.gif);
    overflow: auto;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
#head_bg_l {
    width:56px;
    height:384px;
    background-image:url(../images/wgw_10.gif);
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
}
#head {
    width:913px;
    height:232px;
    background-image:url(../images/wgw_02.gif);
    position:absolute;
    left:54px;
    top:0px;
    z-index:3;
}
#navi {
    width:913px;
    height:35px;
    background-image:url(../images/wgw_05.gif);
    position:absolute;
    left:54px;
    top:232px;
    z-index:4;
}
#main {
    width:913px;
    height:auto;
    min-height:300px;
    position:absolute;
    left:54px;
    top:267px;
    z-index:5;
    background-color:#484848;
}
#main_text {
    width:899px;
    height:auto;
    padding:7px;
}
#footer {
    width:913px;
    height:auto;
    border-top-style:groove;
    border-top-width:1px;
    border-top-color:#FF9000;
    font-size:9px;
}
#stadt {
    width:auto;
    height:auto;
    position:absolute;
    left:94px;
    top:181px;
    z-index:6;
    font-size:36px;
}
.menu {
  padding:0; 
  margin:0; 
  list-style-type:none;
  white-space:nowrap;
  border-right:1px dotted #000000;
  }
.menu li {
  float:left;
  min-width:1px;
  }
.menu a {
  position:relative;
  display:block; 
  text-decoration:none; 
  float:left;
  color:#000000;
  border-right:1px solid #000000;
  cursor:pointer;
  }
* html .menu a {
  width:100px;
  }
.menu a span {
  display:block;  
  background-image:url(../images/wgw_05.gif)
  text-align:center; 
  padding:11.5px;
  color:#000000;
  }
* html .menu a span {
  width:100px; 
  w\idth:66px;
  }
.menu a b {
  display:block; 
  }
.menu a em {
  display:none;
  }
.menu a:hover {
    background-image:url(../images/hover.gif);
    color:#ff9000;
  }
.menu a:hover span {
  background-image:url(../images/hover.gif);
  color:#ff9000;
  }
.menu a:hover em {
  display:block; 
  position:absolute; 
  color:#ff9000;
  }
#search {
    width:auto;
    height:20px;
    position:absolute;
    z-index:10;
    left: 670px;
    top: 236px;
}

FlashSoft · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

Probier es mal mit

background-repeat: repeat-y;

Fugel · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

FlashSoft schrieb:
Probier es mal mit

background-repeat: repeat-y;

ne funzt auch nicht, er wiederholt es ja auch richtig nur halt nicht in der richtigen größe.

sokie · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

ist ja auch klar, dass sich der nicht weiter wiederholt. du hast ja auch nur 100% zur Verfügung, die werden angezeigt, wenn man die Seite öffnet.
nach dem gefrickel ist aber auch wenig klar, wo das überhaupt hingehen soll, hast du mal ne zeichnung oder einen Link zur seite?(das wäre am besten)

(wenn tattoomaus nach dem KOMPLETTEN Code fragt, denke ich, meint sie nicht nur das css)

Tattoomaus78 · 13.03.2009

AW: height:100% wird nicht richtig dargestellt

sokie schrieb:
(wenn tattoomaus nach dem KOMPLETTEN Code fragt, denke ich, meint sie nicht nur das css)

da denkst du richtig

zum code gehört das html auch dazu und damit man weiss was du vorhast wenigstens noch ne skizze...

vielleicht hilft dir aber das schon weiter...

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="header"> Header </div>
  <div id="navi"> Navi </div>
  <div id="content"> tatüüü tataaaaaaaaa..... </div>
  <div id="footer"> Footer </div>
</div>
</body>
</html>

Code:

* {
	margin: 0;
	padding: 0;
	font:100% verdana, sans-serif;
}
body {
	text-align: center;
	background: #333;
	color:#fff;
}
div {
	text-align: left;
}
html, body {
	height: 100%;
}
div#wrapper {
	position:relative;
	margin: 0 auto;
	width: 1024px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: url(images/bg.jpg) repeat-y;
}
div#header {
	height: 80px;
	background: #000;
	margin-left:47px;
	width:930px;
}
div#navi {
	height: 25px;
	background: #000;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	margin-left:47px;
	width:930px;
}
div#content {
	width: 930px;
	margin-left:47px;
	padding: 15px;
}
div#footer {
	position: absolute;
	bottom: 0;
	height: 20px;
	background: #000;
	border-top: 1px solid #fff;
	margin-left:47px;
	width:930px;
}