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

scheibo · 30.12.2005, 18:45

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:

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 :P

lomtas · 31.12.2005, 00:50

entferne erst mal die ganzen position: absolute und befasse dich mit float: right und float: left, dann wird sich dein problem schnell lösen.

scheibo · 31.12.2005, 01:42

Danke für den Tip, hatte Zeitgleich das selbe gefunden, 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;}

lomtas · 01.01.2006, 03:54

das ist so ne sache. lies dich mal in height und min-height rein...

b.punkt · 01.01.2006, 14:54

Außerdem ein Hinweis:

Aus einer Tabellensuppe eine Div-Suppe zu machen, bringt nichts. Z.B. der Footer:

Warum <div><img></div>. Mach doch gleich <img> allein und gib dem img selbst alle nötigen Daten per CSS

Außerdem die Navi - für sowas eignen sich LISTEN hervorragend, denn im Prinzip IST deine Navi eine Liste von Links.

Ansonten: DRANBLEIBEN!!

scheibo · 01.01.2006, 22:05

Zitat:

Zitat von b.punkt

Außerdem ein Hinweis:

Aus einer Tabellensuppe eine Div-Suppe zu machen, bringt nichts. Z.B. der Footer:

Warum <div><img></div>. Mach doch gleich <img> allein und gib dem img selbst alle nötigen Daten per CSS

Außerdem die Navi - für sowas eignen sich LISTEN hervorragend, denn im Prinzip IST deine Navi eine Liste von Links.

Ansonten: DRANBLEIBEN!!

Wie meinst du das mit dem LISTEN?
Ich muss doch der Navigation eine absolute Position angeben (wegen dem Text), oder?

Mein erstes Problem konnt ich jetzt lösen, jetzt stehe ich vor dem nächsten.
Wenn ich auf meiner Seite viel text stehen habe passt alles einwandfrei, sobald ich wenig oder keinen Text in dem DIV stehen habe möchte ich das sich das Div an die Größe der Seite anpasst, leider weiß ich nicht wie ich das machen kann.

Hier die Beispiele:

Mit Text -> http://www.scheibo.de/index1.php

Ohne Text -> http://www.scheibo.de/wenigtext.php

Kann mir da jemand helfen?

EDIT:

Hier die Codes:

Datei:

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="index1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo"></div>
<DIV id=menu> [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 id=inhalt></DIV>
  <div id="footer">[img]images/footer.jpg[/img]</div>
</div>
<div id="werbebannerheader"> 
  
  <div id="werbunglinks">[img]images/banner_01.jpg[/img]</div>
  <div id="werbungoben">[img]images/banner_02.jpg[/img]</div>
  <div id="werbungrechts">[img]images/banner_03.jpg[/img]</div>
  <div id="werbungunten">[img]images/banner_05.jpg[/img]</div>
  <div id="werbebannerbild">[img]images/scheibobanner/banner.gif[/img]</div>
  
</div>
</body>
</html>

und die CSS:

Code:

HTML {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	HEIGHT: 100%
}
BODY {
	PADDING-TOP: 0px;
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	width: 100%;
	FONT-SIZE: 12px;
	MARGIN: 0px;
	COLOR: #000000;
	FONT-FAMILY: Verdana, Arial, SunSans-Regular, Sans-Serif;
	HEIGHT: 100%;
	BACKGROUND-COLOR: #FFFFFF
}
#menu {
	top: 113px;
	LEFT: 0px;
	WIDTH: 175px;
	POSITION: absolute;
	BACKGROUND-COLOR: #45AD3A;
	visibility: visible;

}
#inhalt {
	MARGIN-LEFT: 175px;
	HEIGHT: 100%;
	BACKGROUND-COLOR: #AED8AA;
}
#footer {
	clear:left;
	padding:0px;
	margin:0px;
	text-align: left;
}
#container {
	width: 766px;
	padding:0px;
	margin: 0px;
	border-right-width:1px;
	border-right-color:#000000;
	border-right-style:solid; 
	BACKGROUND-COLOR: #AED8AA;
	background-image:  url(images/_navi_background.jpg);
	background-repeat: repeat-y;
} 
#werbebannerheader{
width:485px;
height:65px;
position : absolute;
top : 25px;
left : 281px;
}
#werbunglinks{
position :absolute;
top :0;
left :0;
width:15px;
height:65px;
}
#werbungoben{
position : absolute;
top : 0;
left : 15px;
width: 468px;
height:2px;
}
#werbungrechts{
position :absolute;
top :0;
left :483px;
width:2px;
height:65px;
}
#werbungunten{
	position :absolute;
	top :62px;
	left :15px;
	width:468px;
	height: 3px;

}
#werbebannerbild{
position : absolute;
top : 2px;
left : 15px;
}
#logo{
background-image:  url(images/header.jpg);
width: 766px;
height:113px;
}

lomtas · 02.01.2006, 00:14

Das Problem bekommst du nur deswegen, weil du mit position: absolute arbeitest. Das sollte man aber im normalfall immer unterlassen. Guck dir mal float an.

scheibo · 02.01.2006, 00:50

O.K....habe mir jetzt mal über FLOAT belesen und es klappt :wink: danke.
Jetzt stehe ich wieder vor dem nächsten Problem

Seht selbst : http://www.scheibo.de/wenigtext.php

Ich will das die Seite von oben bis unten den Browser füllt, wenn ich dem DIV container die höhe 100% gebe klappt es nicht.

Ich weiß bald nicht mehr weiter.

lomtas · 02.01.2006, 10:06

also... position: absolute solltest du überall entfernen...

ich sehe die height: 100% bisher nur beim body und bei html... dein container der eigentlich 100% haben soll hat diese noch nciht, oder?

lomtas · 02.01.2006, 11:45

und noch mal zu den Listen. Du musst dich immer fragen, was ein benutzer mit ausgeschalteten Stylsheets und Bildern sieht... Wenn du dann genau darüber nachdenkst hast du ja eigentlich das Menü als eine Liste. Aber du hast diese im Quelltext nicht als eine solche ausgezeichnet. Ein Menü ist immer eine Liste von Menüpunkten. Also sollte man dafür euch die <ul>[*][/list]usw. verwenden. Per CSS kannst du es ja dann so formatieren wie du willst...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Es erscheint das alte Bild (cache problem) !!	mac	PHP-Fortgeschrittene	12	18.05.2011 11:23
Bei richtiger Eingabe Daten an nächste Seite versenden	xx_heidi_xx	PHP Tipps 2008	49	27.05.2008 14:56
Weblog Rss Problem - auf eigener Seite	ypsie	PHP Tipps 2007	0	17.12.2005 14:26
problem mit bilddarstellung. bild einfach zusammenschneiden?	Promaetheus	PHP Tipps 2007	14	07.12.2005 00:23
[Erledigt] Seite aktualisieren		PHP Tipps 2007	11	14.11.2005 17:17
JS: Wie Seite "neu zeichnen"?? Problem bei Opera..		HTML, Usability und Barrierefreiheit	1	06.10.2005 16:48
Problem beim Bild hochladen		PHP Tipps 2004-2	7	11.11.2004 16:15
Problem beim einbinden einer PHP seite.	imported_DJ Nuno	HTML, Usability und Barrierefreiheit	26	11.09.2004 20:06
[Erledigt] php+Seite kann nicht angeziegt werden, Seite existiert aber		Server, Hosting und Workstations	2	09.09.2004 08:21
Problem beim übertragen von Bild URL in DB		PHP Tipps 2004	5	07.09.2004 14:28
bild problem		HTML, Usability und Barrierefreiheit	2	25.08.2004 02:00
Bild + URL auf neuer Seite anzeigen		PHP Tipps 2004	8	18.07.2004 20:51
Templates (?) - dynamische Seite - Problem		PHP Tipps 2004	0	15.07.2004 16:45
Bild größe hat prob mit umbenennung.	JEGO	PHP Tipps 2004	1	08.07.2004 16:30
[Erledigt] PHP Eine neue PHP seite automatisch öffnen		PHP Tipps 2004	1	19.06.2004 12:40


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

31.12.2005, 00:50
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	entferne erst mal die ganzen position: absolute und befasse dich mit float: right und float: left, dann wird sich dein problem schnell lösen.

31.12.2005, 01:42
scheibo Benutzer Registriert seit: 03.08.2003 Beiträge: 74	Danke für den Tip, hatte Zeitgleich das selbe gefunden, 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;} __________________ Bitte nehmt Rücksicht, bin einfach nur ein Blutiger Anfänger in PHP.

01.01.2006, 03:54
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	das ist so ne sache. lies dich mal in height und min-height rein...

01.01.2006, 14:54
b.punkt Benutzer Registriert seit: 13.07.2004 Beiträge: 42	Außerdem ein Hinweis: Aus einer Tabellensuppe eine Div-Suppe zu machen, bringt nichts. Z.B. der Footer: Warum <div><img></div>. Mach doch gleich <img> allein und gib dem img selbst alle nötigen Daten per CSS Außerdem die Navi - für sowas eignen sich LISTEN hervorragend, denn im Prinzip IST deine Navi eine Liste von Links. Ansonten: DRANBLEIBEN!!

02.01.2006, 00:14
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	Das Problem bekommst du nur deswegen, weil du mit position: absolute arbeitest. Das sollte man aber im normalfall immer unterlassen. Guck dir mal float an.

02.01.2006, 00:50
scheibo Benutzer Registriert seit: 03.08.2003 Beiträge: 74	O.K....habe mir jetzt mal über FLOAT belesen und es klappt :wink: danke. Jetzt stehe ich wieder vor dem nächsten Problem Seht selbst : http://www.scheibo.de/wenigtext.php Ich will das die Seite von oben bis unten den Browser füllt, wenn ich dem DIV container die höhe 100% gebe klappt es nicht. Ich weiß bald nicht mehr weiter. __________________ Bitte nehmt Rücksicht, bin einfach nur ein Blutiger Anfänger in PHP.

02.01.2006, 10:06
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	also... position: absolute solltest du überall entfernen... ich sehe die height: 100% bisher nur beim body und bei html... dein container der eigentlich 100% haben soll hat diese noch nciht, oder?

02.01.2006, 11:45
lomtas Erfahrener Benutzer Registriert seit: 08.02.2005 Beiträge: 224	und noch mal zu den Listen. Du musst dich immer fragen, was ein benutzer mit ausgeschalteten Stylsheets und Bildern sieht... Wenn du dann genau darüber nachdenkst hast du ja eigentlich das Menü als eine Liste. Aber du hast diese im Quelltext nicht als eine solche ausgezeichnet. Ein Menü ist immer eine Liste von Menüpunkten. Also sollte man dafür euch die <ul>[*][/list]usw. verwenden. Per CSS kannst du es ja dann so formatieren wie du willst...