pad8626: Weiße Rändern am Seitenende + Containerproblem

Hi@all ,

ich hab mal wieder ein kleines Problem was ich grad nicht so recht verstehe.

http://www.pad8626.de/test/

Hier findet ihr das Problem indem ihr ganz nacht unten scrollt dort habe ich aus irgend nem Grund weiße Ränder die ich nicht so schön find und die ich gerne weg hätte ich hab aber mittlerweile keine idee mehr an was es liegen könnte.

Ausserdem seht ihr links und rechts vom weißen Container einen Schatten bzw Farbverlauf der nur bis zu einem bestimmten punkt geht und das obwohl ich heigt:100% gesetzt habe und der Eltern Container auch bis ganz unten geht weil ich den auf 700px festgesetzt habe. Und mit dem Farbverlauf links und rechts funktioniert es ja auch.

So hier ist der CSS Code alternativ kann man ihn sich mit FireBug angucken

  
/*BEGIN Seiteneigenschaften */  
  
*  
{  
  padding:0px;  
 margin:0px;  
}  
  
#site  
{  
 padding:0px;  
 margin:0px;  
 height:700px;  
}  
  
/*END Seiteneigenschaften */  
  
  
/*______________________________________________________________________________________*/  
  
  
/* BEGIN Farbübergänge_links_rechts */  
  
#wrapper  
{  
 height:100%;  
}  
  
#links  
{  
 float:left;  
 height:100%;  
 width:50%;  
}  
  
#links_inhalt  
{  
 margin-right:390px;  /*Abhängikeiten: margin rechter_inhalt ; margin,width container  */  
 height:100%;  
}  
  
#rechts  
{  
 float:right;  
 height:100%;  
 width:49%;  
}  
  
#rechts_inhalt  
{  
 margin-left:379px; /*Abhängikeiten: margin linker_inhalt ; margin,width container  */  
 padding:0px;  
 height:100%;  
}  
  
/* END Farbübergänge_links_rechts */  
  
  
  
/*______________________________________________________________________________________*/  
  
  
/*BEGIN Content_Container*/  
  
#shadow_left  
{  
 float:left;  
 width:10px;  
 height:100%;  
 background:#FFFFFF url(images/container_links.PNG) repeat-y;  
  
}  
  
#container  
{  
 height:100%;  
 position:absolute;  
 border:0px solid #000000;  
 left:50%;  
 width:780px;     /*Abhängikeiten: margin rechter_inhalt , linker_inhalt; margin container */  
 margin-left:-390px;  /*Abhängikeiten: margin rechter_inhalt , linker_inhalt; width container */  
}  
  
  
#header  
{  
 width:780px;  
 height:170px;  
 position:absolute;  
 top:0px;  
}  
  
#banner  
{  
 position:absolute;  
 left:10px;  
 top:10px;  
 width:760px;  
 height:130px;  
}  
  
  
#footer  
{  
 position:relative;  
 top:21px;  
 border:0px solid #999999;  
 width:738px;  
 height:20px;  
}  
  
  
#shadow_right  
{  
 float:right;  
 width:10px;  
 height:100%;  
 background:url(images/container_rechts.png);  
}  
  
/*END Content_Container*/  
  
  
  
/*______________________________________________________________________________________*/  
  
  
  
  
.back  
{  
 width:100%;  
 height:100%;  
}  
  
  
  

und der HTML Quellcode

  
  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>  
  <link href="style.css" rel="stylesheet" type="text/css" />  
  <title></title>  
 </head>  
 <body>  
  <div id="site">  
  
  
   <div id="wrapper">  
  
    <div id="links">  
     <div id="links_inhalt" style="">  
      <img class="back" src="images/verlauf_links.png" />  
     </div>  
    </div>  
  
    <div id="container">  
    <div id="shadow_left"></div>  
    <div id="header">  
     <img id="banner" src="images/banner_test_2.jpg" />  
  
    </div>  
    <div id="shadow_right"></div>  
    </div>  
  
  
    <div id="rechts">  
     <div id="rechts_inhalt">  
      <img class="back" src="images/verlauf_rechts.png" />  
     </div>  
    </div>  
   </div>  
  
  </div>  
 </body>  
 </html>  
  
  

Mfg der Pad

  1. Hi,

    dein CSS für #site ist auch nur 700px hoch...

    Grüße

    Chris

    1. Echt?? Ne?? Klar is der 700px hab ich ja auch geschrieben und der mittlere Container ist es ja eben nicht trotz height gleich 100% .

      1. Hi

        Echt?? Ne?? Klar is der 700px hab ich ja auch geschrieben und der mittlere Container ist es ja eben nicht trotz height gleich 100% .

        Ähm wo gibt's Bananen? Schau, ich habe eine recht große Auflösung, ich habe da unten nicht einen kleinen weißen Rand, sondern einen mächtig großen weißen Rand. Der Hauptcontainer ist nur 700px hoch, alles andere mit 100% passt sich doch den 700px an...

        Auch versteh ich dein Problem mit dem links und rechts nicht...

        Jetzt seh ich auch, dass du den #container mit position: absolute versehen hast, warum das denn? Das ist total überflüssiger Code...

        1. Ich denk mal der Fehler ist auch das position:absolute weil dadurch der mittlere Container an das Fenster mit 100% festgetakkert wird und nicht an den #site Container.

          Das Position:absolute hab ich gesetzt wegen zentrieren des Containers.

          Was kann ich als alternative nehmen um den Container zu zentrieren??

          Klar ich hab nur ne 1024er auflösung da sieht das natürlich ganz anders aus ich habs ebend mal auf 300px runter geschraubt und das sahs dann so aus wie bei dir denk ich mal.

          1. hi

            Was kann ich als alternative nehmen um den Container zu zentrieren??

            Ganz einfache Lösung:

            Ein Aussencontainer  z.B. #site

            #site { margin: 0 auto; text-align: left; width: 750px; }
            Gegebenfalls die Breite anpassen.

            Damit der IE das auch noch rafft, dann noch im body ergänzen:

            body { text-align: center; }

            Dann zentriert er den Hauptcontainer schon mal ganz easy ;)

            1. Deine Lösung ist ja schön und gut aber hilft mir nicht wirklich weil dann der ganze rest nicht mehr funktioniert. Naja muss ich halt irgnedwie ne andere Lösung finden.

              1. Hier der aktuelle Code

                  
                  
                /*BEGIN Seiteneigenschaften */  
                  
                *  
                {  
                   padding:0;  
                 margin:0;  
                }  
                  
                html  
                {  
                 height:100%;  
                 background:#2b65bc;  
                }  
                  
                body  
                {  
                 height:100%;  
                }  
                  
                  
                  
                  
                /*END Seiteneigenschaften */  
                  
                  
                /*______________________________________________________________________________________*/  
                  
                  
                /* BEGIN Farbübergänge_links_rechts */  
                  
                #background  
                {  
                 height:100%;  
                 top:0px;  
                 position:static;  
                 z-index:20;  
                }  
                  
                #links  
                {  
                 float:left;  
                 height:100%;  
                 width:50%;  
                }  
                  
                #links_inhalt  
                {  
                 margin-right:390px;  
                 height:100%;  
                }  
                  
                #rechts  
                {  
                 float:right;  
                 height:100%;  
                 width:49%;  
                }  
                  
                #rechts_inhalt  
                {  
                 margin-left:379px;  
                 padding:0px;  
                 height:100%;  
                }  
                  
                /* END Farbübergänge_links_rechts */  
                  
                  
                  
                /*______________________________________________________________________________________*/  
                  
                  
                /*BEGIN Content_Container*/  
                  
                #site  
                {  
                 margin:0px auto;  
                 width:780px;  
                 height:550px;  
                 position:absolute;  
                 top:0px;  
                 left:50%;  
                 margin-left:-390px;  
                 z-index:50;  
                }  
                  
                #top_shadow  
                {  
                 width:780px;  
                 height:10px;  
                 position:relative;  
                 top:5px;  
                 background:url(images/top.png)  
                }  
                  
                  
                #container  
                {  
                  height:100%;  
                  width:100%;  
                  background:url(images/back.PNG);  
                }  
                  
                  
                #banner  
                {  
                  position:absolute;  
                  left:10px;  
                  top:10px;  
                  width:760px;  
                  height:130px;  
                }  
                  
                #bottom_shadow  
                {  
                 width:780px;  
                 height:10px;  
                 position:relative;  
                 top:0px;  
                 background:url(images/bottom.png)  
                }  
                  
                  
                /*END Content_Container*/  
                  
                  
                  
                /*______________________________________________________________________________________*/  
                  
                  
                  
                  
                .back  
                {  
                 width:100%;  
                 height:100%;  
                }  
                  
                  
                
                

                Ich hab jetz das Problem das unten wieder ein kleiner 5px großer Rand ist und ich den nicht wegbekomme :-(

                HTML Code kann man sich ja so angucken

                MFG

                1. Ich habe ein overflow:hidden gesetzt im Hintergrund und seit dem geht es :-) .