Problem mit Webseite, Höhenangaben, Scrolbars

[kirchel]

Hallo!

Ich habe ein kleines Problem, habe die seite http://www.1ffc-ratingen.de erstellt.
Die seite ist auch soweit fertig, auf meinem rechner siehts auch ganz gut aus, alles fehlerfrei!

Leider ist das auf Rechnern mit kleineren Monitorauflösungen nicht der fall. Dort wird immer der untere Teil der seite abgeschnitten, und scrollen ist dort auch nicht möglich.

Habe das Layout größtenteils in CSS umgesetzt. Ich möchte das die Seite immer die volle Bildschirmgöße einnimmt, und bei bedarf, wenn der Inhalt mehr wird scrolbar wird.

Am besten ist ihr schaut es euch einfach mal an, vielleich ist es ja nur ein kleiner fehler.

Bin ein ziemlicher neuling im bereich CSS, darum bitte ich euch wenn ihr den fehler gefunden habt, mir diesen narrensicher zu beschrieben!

Habt viellen dank das ihr euch die zeit dazu nehmt!

 

[Maik]

Zunächst einmal solltest Du den Scrollbalken für das Dokument "zulassen", damit die Seite bei kleineren Auflösungen überhaupt gescrollt werden kann

body {
overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
height: 100%;
background-color: #FFEB00;
}

Daß der Scrollbalken derzeit dennoch angezeigt wird, liegt lediglich an den drei Punkten vor dem body-Selektor, die da nichts zu suchen haben:

/* CSS Document */

...

body {
overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
height: 100%;
background-color: #FFEB00;
}

Als zweites wirst Du in den folgenden Selektoren eine Unterscheidung zwischen den "nicht-IE-Browser" und dem IE bzgl. der 100%-Höhe vornehmen müssen:

#layout {
                          position: relative;
                          align: center;
                          bottom: 0;
                          width: 824px;
                          min-height: 100%; /* Für nicht-IE-Browser */
                          height: auto !important; /* Für nicht-IE-Browser */
                          height: 100%; /* Für IE */
                          padding: 0;
                      }


#links {
              position: absolute;
              top: 156px;        /* Abstand zum oberen Fensterrand */
              left: 0px;        /* Abstand zum linken Fensterrand */
              bottom: 0;        /* Abstand zum unteren Fensterrand */
              width: 13px;        /* Blockbreite */
              min-height: 100%;
              height: auto !important;
              height: 100%;
              padding: 0;        /* Interpretation Boxmodell! */
              overflow: hidden;
          }


#inhalt_co {
                            position: absolute;
                            padding-left: 15px;
                            padding-right: 50px;
                            bottom: 0;        /* Abstand zum unteren Fensterrand */
                            min-height: 100%;
                            height: auto !important;
                            height: 100%;
                }

#inhalt_fo {
                            position: absolute;
                            padding-left: 15px;
                            padding-right: 5px;
                            bottom: 0;        /* Abstand zum unteren Fensterrand */
                            min-height: 100%;
                            height: auto !important;
                            height: 100%;
                  }

#spalte {
              position: absolute;
              top: 155px;        /* Abstand zum oberen Fensterrand */
              left: 13px;        /* Abstand zum linken Fensterrand */
              bottom: 0;        /* Abstand zum unteren Fensterrand */
              width: 102px;        /* Blockbreite */
              min-height: 100%;
              height: auto !important;
              height: 100%;
              padding: 0;        /* Interpretation Boxmodell! */
              background-color: #FFFFFF;
              border-left: 1px solid #E6000F;
              border-right: 1px solid #E6000F;
              z-index: 10;
          }

#rechts {
              position: absolute;
              top: 155px;
              left: 792px;        /* Abstand zum oberen Fensterrand */
              bottom: 0;        /* Abstand zum unteren Fensterrand */
              min-height: 100%;
              height: auto !important;
              height: 100%;
              width: 32px;        /* Blockbreite */
              padding: 0;        /* Interpretation Boxmodell! */
              overflow: hidden;
          }

In den Selektoren #inhalt_co, #inhalt_fo und #typo_conten fehlt zudem in Deinem Stylesheet das "e" bei dem position-Wert absolute, was ebenfalls zu Fehldarstellungen führt.

Vielleicht helfen Dir diese Tipps weiter?