Hallo, ich bin gerade dabei meine Website von allen Tabellen zu befreien und bin eigentlich schon recht weit gekommen, leider stehe ich jetzt vor dem Problem das ich einen Footer mit DIV einfügen will und der am unteren ende der Seite angezeigt werden soll.
Mit Tabellen konnte ich es so mach, das sich die Tabelle dem Inhalt anpasst und sich dadurch die Seite dem Inhalt angepasst hat.
Siehe hier http://www.scheibo.de
Das Problem ist der untere Grüne Balken.
Jetzt habe ich folgendes gemacht:
Index:
Und hier die CSS:
dabei kommt folgendes raus:
Ich möchte aber das der Grüne Balken immer unten bleibt, also nicht am unteren Ende des Browser, sondern am ende der Seite wenn ich viel Inhalt drin stehen habe. Ist das überhaupt mit DIV möglich?
Hoffe ich habe mich einigermaßen verständlich ausgedrückt :P
Mit Tabellen konnte ich es so mach, das sich die Tabelle dem Inhalt anpasst und sich dadurch die Seite dem Inhalt angepasst hat.
Siehe hier http://www.scheibo.de
Das Problem ist der untere Grüne Balken.
Jetzt habe ich folgendes gemacht:
Index:
Code:
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Unbenanntes Dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">[img]images/header.jpg[/img]</div> <div id="navigation">[img]images/_button_startseite.jpg[/img] [img]images/_button_partydates.jpg[/img] [img]images/_button_newseinsenden.jpg[/img] [img]images/_button_archiv.jpg[/img] [img]images/_button_forum.jpg[/img] [img]images/_button_chat.jpg[/img] [img]images/_button_links.jpg[/img] [img]images/_button_kontakt.jpg[/img] [img]images/_navi_down.jpg[/img]</div> <div align="center" id="zeit_zum_wochenende"> <hr width="170" size="1" color="#000000"/> </div> <div id="werbebanner_header"> <div id="werbung_links">[img]images/banner_01.jpg[/img]</div> <div id="werbung_oben">[img]images/banner_02.jpg[/img]</div> <div id="werbung_rechts">[img]images/banner_03.jpg[/img]</div> <div id="werbung_unten">[img]images/banner_05.jpg[/img]</div> <div id="werbebannerbild">[img]images/scheibobanner/banner.gif[/img]</div> </div> <div id="senkrecht_rechts"></div> <div id="inhalt"> Das ist der Inhalt, bis jetzt nur ein Testtext, denn ich glaube nicht das es wirklich geht!</p> </p> </p> </p> rgrgtb</p> erbg</p> etb</p> r</p> tbg</p> re</p> b</p> rt</p> gb</p> rtb</p> re</p> b</p> re</p> b</p> trb</p> tr</p> b</p> re</p> </div> <div id="footer">[img]images/footer.jpg[/img]</div> <div id="unter_wochenendanzeige"></div> </body> </html>
Code:
body{
padding : 0;
margin : 0;
font-family: verdana;
font-style: normal;
font-size: 11px;
color: #000000;
}
#header{
position : absolute;
top : 0;
left : 0;
z-index : 50;
}
#navigation{
position : absolute;
top : 113px;
left : 0;
z-index : 49;
}
#werbebanner_header{
position : absolute;
top : 25px;
left : 281px;
z-index : 100;
}
/* Der zusammengesetzte Werbebanner */
#werbung_links{
position : absolute;
top : 0;
left : 0;
z-index : 100;
}
#werbung_oben{
position : absolute;
top : 0;
left : 15px;
z-index : 100;
}
#werbung_rechts{
position : absolute;
top : 0;
left : 483px;
z-index : 100;
}
#werbung_unten{
position : absolute;
top : 62px;
left : 15px;
z-index : 100;
}
#werbebannerbild{
position : absolute;
top : 2px;
left : 15px;
z-index : 100;
}
/* Der zusammengesetzte Werbebanner ENDE*/
#footer{
position : absolute;
bottom : 0px;
left : 0px;
z-index : 101;
}
#inhalt{
position : absolute;
top : 113px;
left : 175px;
z-index : 200;
}
#senkrecht_rechts{
background-image: url(images/_right.jpg);
width: 175px;
height: 100%;
background-repeat: repeat-y;
position : absolute;
top : 0px;
left : 766px;
z-index : 100;
}
#zeit_zum_wochenende{
position : absolute;
top : 340px;
left : 0px;
z-index : 200;
}
#unter_wochenendanzeige{
background-image: url(images/_navi_background.jpg);
width: 175px;
height: auto;
background-repeat: repeat-y;
position : absolute;
top : 330px;
left : 0px;
z-index : 100;
}
Ich möchte aber das der Grüne Balken immer unten bleibt, also nicht am unteren Ende des Browser, sondern am ende der Seite wenn ich viel Inhalt drin stehen habe. Ist das überhaupt mit DIV möglich?
Hoffe ich habe mich einigermaßen verständlich ausgedrückt :P
Kommentar