Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

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

    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
    Bitte nehmt Rücksicht, bin einfach nur ein Blutiger Anfänger in PHP.

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

    Kommentar


    • #3
      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.

      Kommentar


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

        Kommentar


        • #5
          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!!

          Kommentar


          • #6
            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;
            }
            Bitte nehmt Rücksicht, bin einfach nur ein Blutiger Anfänger in PHP.

            Kommentar


            • #7
              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.

              Kommentar


              • #8
                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.

                Kommentar


                • #9
                  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?

                  Kommentar


                  • #10
                    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...

                    Kommentar


                    • #11
                      Ich hatte den DIV extra noch nicht auf 100% gestellt damit ich zeigen kann was mein Problem ist, wenn ich diesen auf 100% setzte bleibt der Footer wieder oben stehen, wenn ich jetzt den DIV 'INHALT' auf 100% setzte dann wird dieser ja berechnet an der 100% vom Browser, und dadurch sehe ich die Footergrafik nicht mehr (nicht mehr im Sichbereich).

                      Ich habe es auch schon mit min-height versucht, aber dann kommt es ja auch darauf an welche Bildschirmeinstellung der Besucher hat.

                      Ich muss die absolute position für den werbebanner nutzen, denn anders bekomme ich ihn nicht dort hin.

                      Wenn der Besucher meine Seite ohne Stylsheets und Bildern sieht es meine Navigatoin eh nicht, da die Navigation nur aus Bildern besteht.
                      Kann ich denn einer Liste sagen das sie aus schrift besteht und dann in der CSS die Bilder dafür angeben?
                      Bitte nehmt Rücksicht, bin einfach nur ein Blutiger Anfänger in PHP.

                      Kommentar


                      • #12
                        ach so... jetzt verstehe ich deine frage erst richtig. es gibt für dein problem keine lösung.

                        Kommentar


                        • #13
                          Hm...also muss ich wohl doch mit Tabellen weiterarbeiten !?!?!?
                          Bitte nehmt Rücksicht, bin einfach nur ein Blutiger Anfänger in PHP.

                          Kommentar


                          • #14
                            das ist die richtige einstellung....

                            Kommentar


                            • #15
                              Hallo Scheibo,

                              >>Hm...also muss ich wohl doch mit Tabellen weiterarbeiten !?!?!?
                              >das ist die richtige einstellung....

                              Nein, das ist die falsche Einstellung!!

                              Vielleicht ist folgendes Beispiel hilfreich:


                              Code:
                              <html>
                              <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/>
                              <title></title>
                              <style type="text/css">
                              
                              /* Feststehende Rahmen an allen Seiten */
                              	/* Beginn */
                              
                              body {margin:0; overflow:hidden; height:100%; max-height:100%}
                              * html body {padding:100px 0 50 0}
                              
                              #header {position:absolute; top:0; left:0; width:100%; height:100px; background:black; border:black solid 0px}
                              #footer {position:absolute; bottom:0; left:0; width:100%; height:50px; background:black; border:black solid 0px}
                              
                              #main {position:fixed; top:100px; bottom:50px; left:0; right:0; overflow:hidden;}
                              * html #main {height:100%; width:100%; }
                              
                              #lefter {position:absolute; left:0; top:0; width:100px; height:100%; background:red; border:black solid 0px; overflow:hidden}
                              #content {margin:0 50 0 100; height:100%; overflow:auto; top:0; background:gray; border:yellow 1px solid}
                              #righter {position:absolute; top:0; right:0; width:50px; height:100%; background:red; border:black solid 0px}
                              
                              #topa {left:0%; top:0%; height:100px; width:100%; background-color:blue;}
                              #bottoma {left:0; bottom:0; height:50px; width:100%; background-color:green; }
                              #lefta {left:0; top:0; height:100%; width:100px; background-color:yellow;}
                              #righta {right:0; top:0; height:100%; width:50px; background-color:red; }
                              
                              	/* Ende */
                              /* Feststehende Rahmen an allen Seiten */
                              
                              
                              </style>
                              </head>
                              <body>
                              
                              <div id="header"></div>
                              
                              
                              <div id="main">
                              	<div id="lefter"></div>
                              	<div id="content">
                              		
                              
                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                              		
                              
                              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                              	</div>
                              	<div id="righter"></div>
                              </div>
                              
                              <div id="footer"></div>
                              
                              
                              </body>
                              </html>

                              Im übrigen teile ich die Ansicht, dass Menus mit Listen zu erstellen sind.


                              Gruß
                              Dirk

                              Kommentar

                              Lädt...
                              X