| chris2001 |
28.12.2004 15:20 |
Leiste am Ende einer Seite positionieren?
Hallo,
ich habe einmal folgendes CSS-Design erstellt. http://de.bach-online.de/test. Ich bekomme es aber einfach nicht hin, dass das letzte graue Element (es heißt "greybottom") unterhalb der gelben Container am unteren Rand erscheint.
Hat hier jemand eine Idee?
Danke,
Christopher
Code:
<html><head><title>CSS-Test</title>
<style type="text/css">
<!--
body {
font-family: 'Georgia', serif;
font-size:12pt;
}
h1 {font-size:16pt;color:#000080;margin-bottom:5px; margin-top:5px;}
#breakingnews {
position:relative;
width:auto;
background-color:#FF0000;
color:#FFFFFF;
font-family: 'Arial', sans-serif;
font-size:18pt;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin-top:90px;
margin-left:160px;
margin-right:160px;
margin-bottom:0px;
z-index:3;
}
#dummybox {
position:relative;
width:auto;
margin-top:90px;
margin-left:160px;
margin-right:160px;
z-index:3;
}
#box1 {
position:absolute;
left:0px;
top:0px;
width:100%;
height:65px;
background-image:url(homepage_r1_c1_r1_c9.jpg);
background-repeat:repeat-x;
}
#greytop {
position:absolute;
left:0px;
top:65px;
height:25px;
width:100%;
background-image:url(homepage_r1_c1_r2_c9.jpg);
background-repeat:repeat-x;
}
#greybottom {
position:relative;
height:25px;
width:100%;
left:0px;
background-image:url(homepage_r1_c1_r2_c9.jpg);
background-repeat:repeat-x;
}
#menutext { padding-top:5px; padding-left:28px; font:bold 12pt Garamond; color:white; }
#menuleft {
position:absolute;
top:95px;
left:5px;
width:150px;
background-color:yellow;
border-width:1px;
border-color:black;
border-style:solid;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
#menuright {
position:absolute;
top:95px;
right:5px;
width:150px;
background-color:yellow;
border-width:1px;
border-color:black;
border-style:solid;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
#menumiddle{
position:relative;
width:auto;
height:auto;
min-width:120px;
margin-left:160px;
margin-right:160px;
margin-bottom:0px;
padding:5px;
background-color:white;
z-index:3;
}
-->
</style>
</head><body bgcolor="FFFFFF" text="#000000">
<div id="box1">[img]homepage_r1_c1.jpg[/img]</div>
<div id="greytop"><div id="menutext">Hier stehen nun die Links zu den anderen Seiten drin.</div></div>
<div id="dummybox"></div>
<div id="menumiddle">
<h1>Willkommen auf meiner neuen Homepage.</h1>
MITTE MITTE MITTE Dies hier ist nur ein Test. Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.</div>
<div id="menumiddle">
<h1>Willkommen auf meiner neuen Homepage.</h1>
MITTE MITTE MITTE
Dies hier ist nur ein Test. Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test</div>
<div id="menuleft">LEFT LEFT LEFT Dies hier ist nur ein Test. Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test </div>
<div id="menuright">RIGHT RIGHT RIGHT Dies hier ist nur ein Test. Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test.Dies hier ist nur ein Test</div>
<div id="greybottom"><div id="menutext">© 2005 Copyright</div></div>
</body></html>
|
