Ich hab hier ein paar kleinere Problemchen mit einer Seite, die auf divs basiert.
Ist es nicht möglich, einem div per css die Höhe 100% zuzuweisen? Ich habe ein zentriertes div als Container, damit die Seite mittig dargestellt wird. Darin sind die weiteren divs eingefügt, allerdings mit position:absolute. Das Problem ist, daß sich die Hintergrundfarbe des Containers nicht über die gesamte Höhe der Seite. Ich bin davon ausgegangen, wenn ich die absoluten divs in den Container einbette, daß der Container auch die Höhe mit übernimmt.
Der Quellcode:
Das CSS:
Ist es nicht möglich, einem div per css die Höhe 100% zuzuweisen? Ich habe ein zentriertes div als Container, damit die Seite mittig dargestellt wird. Darin sind die weiteren divs eingefügt, allerdings mit position:absolute. Das Problem ist, daß sich die Hintergrundfarbe des Containers nicht über die gesamte Höhe der Seite. Ich bin davon ausgegangen, wenn ich die absoluten divs in den Container einbette, daß der Container auch die Höhe mit übernimmt.
Der Quellcode:
Code:
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div id="container1" align="center">
<div id="container" align="center">
<div id="top">
</div>
<div id="inhalt">
<div id="text1">
</div>
</div>
<div id="navi2">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</div>
</body>
</html>
Code:
body{background-color:#004f2f}
#container1{position:relative;
background-color:#black;
background-image:url('images/back.jpg');
}
#container{position:relative;
width:1020px; height:100%;
background-color:#545454;
background-image:url('images/container.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
}
#inhalt{position:absolute;
left:110px; top:250px;
width:800px; height:1000;
background-color:black;
background-image:url('images/main.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
}
#top{position:absolute;
top:0px; left:110px;
width:800px; height:250px;
background-color:red;
background-image:url('images/top.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;
}
#left{position:absolute;
top:0px; left:10px;
width:100px; height:250px;
background-color:white;
background-image:url('images/left.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}
#right{position:absolute;
top:0px; left:910px;
width:100px; height:250px;
background-color:white;
background-image:url('images/right.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}
#navi2{position:absolute;
top:280px; left:120px;
width:150px; height:150px;
background-color:white;
background-image:url('images/right.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}
#text1{position:absolute;
top:10px; left:170px;
width:620px; height:500px;
background-color:white;
background-image:url('images/right.jpg');
background-repeat:no-repeat;
background-position: top left;
background-attachment:fixed;
border: none;
overflow:hidden;}
p{color:#b1b1b1; font-family:Arial; font-size:12px}
a{color:#ffffff; font-family:Arial; font-size:12px, font-weight:bold; text-decoration:underline}
a:hover{color:#ac0004; font-family:Arial; font-size:12px, font-weight:bold; text-decoration:none}