Hallo,
also ich habe folgendes Problem. Ich habe mich etwas im Internet umgeschaut nach einer Vorlage für einen Style und wie das funktioniert.
Nun bin ich auf folgendes gestoßen und habe schon etwas daran rumgefummelt: wingi.bplaced.net/css/test.htm
Ich weiß nun jedoch nicht genau wie man das macht, dass das Navi und der Header stehen bleibe, der Footer unter dem Text ist und nicht der Text hinter dem Header und dem Footer durchscrollt. Das war jetzt recht komplex aber ich hoffe jemand versteht wie ich das meine.
Hier mal der Quelltext vieleicht nicht so ganz sauber aber bis hierhin hats geklappt.
Dankeschön!
test.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Herzlich Wilkommen</h1>
</div>
<div id="content-wrap">
<div id="content">
<p class="info">Hier stehen diverse Info's.<BR>
Je nachdem wie viel hier steht desto länger wird die Box die Breite bleibt jedoch erhalten.!</p>
<p> Hier ist der eingentliche Inhalt der Seite. Hier kann so viel hin wie will!
<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e
<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e<BR>e</p>
<p>Letzte Zeile.</p>
</div>
</div>
<div id="footer">
<div id="labfooter">
<p>Hier ist der Footer hier kommt das Copyright hin!</p>
</div>
<div id="navi">
<p>Hier ist das Navi!</p>
</div>
</div>
</div>
</body>
Hier die test.css
head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Frames, version 2: Example 1, full-width | 456 Berea Street</title>
<style type="text/css" media="screen,print">
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
}
html>body #wrap {height:100%;} /* 100 % height */
#header {
height:5em;
top:10;
left:215;
right:15;
}
html>body #header {
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #navi {
position:fixed;
width:200;
height:500;
left:0;
top:10;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {padding:6em 1em 0em 215;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
height:5em;
}
html>body #footer {
position:fixed;
bottom:10;
left:215;
right:5;
z-index:10; /* Prevent certain problems with form controls */
}
/* Styling to make this demo page look just a little bit better */
html,
body {
color:#333;
background:#ffefd5 url(bg.gif) fixed; /* HIER KANN MAN DIE HINTERGRUNDFARBE ÄNDERN UND EIN BILD EINFÜGEN */
}
body {font:76%/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;}
h1,
h2 {
margin:0.25em 0;
font:normal 1.5em/1.1 "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
text-align:center;
letter-spacing:1px;
}
p {margin:1em 0;}
.info {
position:relative;
width:40em;
margin:0 auto;
padding:0.5em;
border:2px solid #999;
background:#eee8aa;
}
a:link,
a:visited {
border-bottom:1px dotted;
color:#AE4F0C;
font-weight:bold;
text-decoration:none;
}
a:focus,
a:hover {
border-bottom-style:solid;
color:#D03900;
}
#header,
#navi,
#footer {
color:#111;
background:#ddd;
text-align:center;
}
#content-wrap,
#content {background:#f8f8f3 url(weiß ich nicht.gif);}
#footer a {color:#111;}
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->
</head>
