VanHellsehn
Erfahrenes Mitglied
Hallo Leute
ich habe ein kleines Problem. Ich mache mir gerade ein neues Adminpanel-Design für mich und stoße dabei auf folgendes Problem.
Ich habe einen Head wo z.B. ein Seiten Titel drin steht dann habe ich links die Navigation und unten noch ein Footer mit meinem Copyright. Soweit so gut. Nun möchte ich das nur der Content eine Scrollbar hat. Dafür habe ich bis jetzt den Header, Footer und Navi mit position:absolute auf die jeweilge Seite gebracht aber ich bekomme das mit dem Scrollbaren Content nicht hin.
Das ist mein bisheriger Code:
ich habe ein kleines Problem. Ich mache mir gerade ein neues Adminpanel-Design für mich und stoße dabei auf folgendes Problem.
Ich habe einen Head wo z.B. ein Seiten Titel drin steht dann habe ich links die Navigation und unten noch ein Footer mit meinem Copyright. Soweit so gut. Nun möchte ich das nur der Content eine Scrollbar hat. Dafür habe ich bis jetzt den Header, Footer und Navi mit position:absolute auf die jeweilge Seite gebracht aber ich bekomme das mit dem Scrollbaren Content nicht hin.
Das ist mein bisheriger Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Admin</title>
<base href="http://local/own/cryosys/admin/" />
<link href="../styles/admin_design.css" rel="stylesheet" type="text/css" />
<meta name="generator" content="M-Kuhn.net MVC-Framework" />
</head>
<body>
<div id="head">
<h1>Adminpanel</h1>
</div>
<ul id="navi">
<li id="first"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<div id="content-wrapper">
<div id="content"><div style="height:10000px;">This is for Scroll test</div>
</div>
<div id="foot">
<p>©2012 by
<a href="http://m-kuhn.net" style="color:#aaa">Marvin Kuhn</a>
</p>
</div>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 11pt;
}
#head, #foot{
background: url('../images/admin_head_bg.jpg');
height: 40px;
color: #aaa;
z-index: 6 !important;
width: 100%;
height: 60px;
position: absolute;
}
#head{
left:0;
top: 0;
border-bottom: 1px solid #888;
}
#navi{
z-index: 2;
width: 200px;
margin: 0;
background: #ddd;
height: 100%;
position: absolute;
left:0;
top: 0;
}
#foot{
bottom: 0;
left:0;
text-align: center;
}
#content-wrapper{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#content{
padding: 70px 0 60px 260px;
}
#first{
margin-top: 60px;
}
h1{
margin: 0;
padding: 13px 0 0 30px;
font-size: 200%;
}
