Auflösung 800x600 schluckt oberen Bereich

Status
Nicht offen für weitere Antworten.
Q

QMartini

Grünschnabel
Hallo Tüftler,
bislang habe ich mich mit HTML zufrieden gegeben. Doch langsam wird es auch für mich für das Thema CSS Zeit. Meine Erfahrungen sind also minimal....

Ich habe nun unter: http://home.arcor.de/schucker eine kleine Testseite erstellt.

Leider wird schon diese unter der oben genannten Auflösung nicht vollständig dargestellt.
Das CSS habe ich in der Datei integriert, so das der Quellcode komplett zu lesen ist.

Wer kann mir helfen?


Vielen Dank schon mal vorab :-)
 
Die Höhe deines DIV-Modells beträgt 450 Pixel, somit bleiben bei einer 800*600-Auflösung in der Vertikalen noch 150 Pixel für die Adress-, Symbol- und Statusleiste des Browsers übrig. Wenn diese nun aber mehr als 150 Pixel benötigen, wird der senkrechte Viewport des Browsers verringert und das vertikal zentrierte CSS-Layout verschiebt sich in den nicht-sichtbaren Bereich des Browsers.

Im Quelltext stecken ein paar Fehler, die ich mal korrigiert habe:

  1. Wertangaben, die ungleich null sind, müssen eine Einheit enthalten, wie z.B. padding:15px.

  2. Es fehlt ein schliessendes </div>.

HTML: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">

<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
   <title>CSS Design</title>

   <style type="text/css">
body { margin: 0px 0px 0px 0px;
       background-color: #c3bff9;
     }

#box { position: absolute;
       background-color: #c3bff9;
       border-top: 2px solid #0f0b83;
       border-bottom: 1px solid #0f0b83;
       border-left: 2px solid #0f0b83;
       border-right: 1px solid #0f0b83;
       width: 700px;
       height: 450px;
       left: 50%;
       top: 50%;
       margin-left: -350px;
       margin-top: -225px;
       z-index: 1;
     }

#blue { position: absolute;
        background-color: #0f0b83;
        width: 100px;
        height: 448px;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -224px;
        z-index: 1;
      }

#iframe { position: absolute;
          background-color: #c3bff9;
          border: 0px solid #0f0b83;
          padding: 15px;
          width: 500px;
          height: 250px;
          left: 50%;
          top: 50%;
          margin-left: 60px;
          margin-top: -170px;
          overflow: auto;
          scrollbar-face-color: #c3bff9;
          scrollbar-track-color: #cdcaf8;
          scrollbar-3dlight-color: #0f0b83;
          scrollbar-arrow-color: #0f0b83;
          z-index: 1;
     }

p { font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 12px;
    color: #0f0b83;
    text-align:justify
  }

.italic { font-style: italic; }

.big:first-letter { font-size: 16; }

h1 { position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -180px;
     margin-top: -210px;
     font-family: arial;
     font-size: 16px;
     color: #0f0b83;
     width: 400px;
     border-bottom: 1px solid #0f0b83;
     border-left: 3px solid #0f0b83;
     padding: 5px;
     z-index: 1;
   }

#about { position: absolute;
         font-family: Arial, Helvetica, Verdana, sans-serif;
         font-weight: bold;
         font-size: 12px;
         padding: 2px;
         border: 1px solid #c3bff9;
         color: #c3bff9;
         left: 27px;
         top: 1px;
       }
</style>

</head>
<body>

  <div id="box">

    <h1>Herzlich Willkommen...</h1>

    <div id="blue">
    <div id="iframe">
     <p class="big">
      Das ist jetzt Content zum testen...
     </p>

   </div><!-- END #iframe -->
  </div><!-- END #blue -->

  </div><!-- END #box -->

 </body>
</html>
 
Hallo michaelsinterface;
vielen Dank für deine schnelle Hilfe. Das diese Höhe bei dieser Auflösung nicht hinhaut war mir eigentlich schon klar. Nur, wird ja auch der untere Teil der Seite scrollbar. Was kann ich nun tun, das ich auch bei 800x600 den oberen Teil erreichen kann? Sprich, Es darf ruhig gescrollt werden, aber es sollte alles zu sehen sein...

Gruß QMartini
 
Vielleicht solltest du in diesem Fall von der vertikalen Zentrierung Abstand nehmen und das Layout am oberen Browserfensterrand ausrichten, wie z.B.:

Code: 
#box { position: absolute;
       background-color: #c3bff9;
       border-top: 2px solid #0f0b83;
       border-bottom: 1px solid #0f0b83;
       border-left: 2px solid #0f0b83;
       border-right: 1px solid #0f0b83;
       width: 700px;
       height: 450px;
       left: 50%;
       top: 10px;
       margin-left: -350px;
       z-index: 1;
     }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück