Problem mit DIV -Bild soll am unteren Ende der Seite bleiben

thomas :D · #1 (**permalink**) 30.12.2005, 20:34

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.

Das Problem ist der untere Grüne Balken (siehe Bild unten).
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>

Und hier die CSS:

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; 
}

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

thomas :D · #2 (**permalink**) 31.12.2005, 01:45

Also, mein erstes Problem habe ich gelöst bekommen, jetzt habe ich das Problem das es so wie es aussehen soll im IE richtig angezeigt wird, aber in Opera und Firefox rein garnicht

Kann mir jemand den Fehler zeigen?

Bitte mal hier testen:

http://www.scheibo.de/css.php

Finde es auch komisch das ich bei dem DIV für die Grafik unter der Navigation einen Negativen wert angeben musste obwohl die Grafik über der Layout DIV liegt:

Code:

#unternavi 
{ 
background-color: #45AD3A; 
background-image:  url(images/_navi_background.jpg); 
width: 175px; 
background-repeat: repeat-y; 
position:absolute; 
top: 0; 
margin:0; 
height: 100%; 
z-index : -1;}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Problem mit einbinden von Dropdown-Navigation in Seite...	epsylon2	CSS	4	28.03.2009 23:25
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12
Problem mit div (float)	Sp33dy G0nz4l3s	CSS	2	29.05.2006 19:13