Zentrierte Website für verschiedene Auflösungen fast fertig

[kukki]

Wer kann mir jetzt mal zur Seite stehen, denn seit über einer Woche bastel ich herum und sehe keine Fehler mehr - ich drehe mich im Kreis - zu deutsch: Betriebsblindheit.

Ich habe also eine CSS-Codierung für IE6.x und Firefox 1.5 zusammengetragen, die fast fehlerfrei funktioniert, bei jeder Bildschrimauflösung ist die Seite zentriert, in einem Rahmen von ca. 800x600 pixel untergebracht, sie zappelt nicht und ein Scrollbalken geht nur dann im mainBlock, wenn die Darstellung länger ist. Wenn man F11 drückt funktioniert es ebenfalls, arbeitet ebenso gut auch bei einer hohen Auflösung und wenn man den Browser per Hand verkleinert, zentriert sich die Website ebenfalls. Aber es gibt da noch ein paar kleine Problemchen, die ich nun nicht mehr hinkriege, weil ich nichts mehr sehe, außer Zahlen und Buchstaben.

Hier ist mein Code für die CSS:

Code: Select all

/* Rahmen der Website 
#container { 
background-color: #fff;;
padding:1;
border: 1px dashed silver;
margin: -300px 0 0 -400px;
position: absolute;
top: 50%;
left: 50%;
width: 800px;   /* Breite der gesamten Website */
height: 600px;  /* sichtbare Höhe der Website */  }

/* der komplette Bildschirmbody */
body{ 
      text-align: center;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 0.8em;
      margin: 0;
      padding: 0;
      background: darkgreen;
      overflow: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;}

/*  ---- Überschriften nach INTERNET INETRN 3-2005,S.60  ---- */
h1 { font-size=1.4em;
     font-weiht: bolder;
     color: #006400;
     padding: 4 0 2 4px;
     border-bottom: 1px solid #006400;
     border-left:  12px solid #006400; }

h2  { font-size=1.2em; 
      color: #006400;
      letter-spacing:2px;
      padding: 4 0 2 4px;
      border-bottom: 1px solid #006400;
      background: #CECECE; }

/* ------------- Banner Vordergrunddefinition ------ */
#headerBlock {
  /*height: 90px;*/
  width: 100%;    /*800px; */
  margin: auto;
  background-image: url(http://www.galabauuwekarg.de/picture/Banner800x90.jpg);
  background-repeat: no-repeat; }

/* --------------- linker Navig.-Block ------------------ */
#leftBlock { 
text-align: left;
margin: auto;
padding-top: 0px;
padding-left: 3px;
background-image: url(http://www.galabauuwekarg.de/picture/MenueLinks.jpg);
background-repeat: no-repeat;
float:left;
width:150px;
height: 455px; }

/* -------------Hauptblock -----------------------*/
#mainBlock { 
position: relative;
text-align: left;
background-color: #ffe;
max-width: 480px; /*width: 480px;*/
height: 450px;
margin-left: 0px;
margin-rigth: 0px;
padding-top:5px;
padding-left: 10px;
padding-right: 10px;
overflow: auto; }

/* -----------Rechter Block ----------------------- */
#rightBlock { 
position: relative;
text-align: left;
background-color:#ffc;
top: 1px;
padding-left: 10px;
float: right;
width:135px;
height: 450px; /*80%;*/  }

/* ---------Footerblock ---------------------*/
#footerBlock {
/*background-color: darkgreen;*/
clear:both;
padding-top: 0px;
height:20px;   }

form ... 

[/color]

Wer ist bereit das mal auszutesten: Beim Firefox überlagern main~ und rightBlock das Banner um ca 3px, beim IE dagegen liegen alle in einer Linie, aber mit 1 px Abstand vom Banner.

Diese CSS-Version kann natürlich weiterverwendet werden, ich bitte aber um einen hilfreichen Vorschlag zur Änderung (bitte vorher testen und möglichst auch mal mit einem SafariBorwser!

Danke für Eure Hilfe!
FIREFOX


IE 6.x

[flip-flop]

Hallo kukki,

im ersten schnellen Durchsehen ist mit auf der Seite im tatsächlichen CSS unter test_qtv aufgefallen das im header ein heigth: 125px; fehlt. So sollte es dann auch im FF richtig dargestellt werden. Dann fehlt es dem footer aber an Höhe. 20px sind zu wenig.
Mit IE jetzt nicht getestet.

Gruß Knut

[gtz]

Hallo kukki,

wenn ich deinen Code-Schnipsel richtig lese, willst du die Seite horizontal und vertikal zentrieren?

Für das horizontale Zentrieren finde ich folgende Lösung am einfachsten:

Code: Select all

body {
    text-align: center; /* ist für IE/Win, damit er das folgende div zentriert */
}

/* #container ist der äußerste div im body */
#container {
    width: 800px;      /* kann px, em, % sein */
    text-align: left;    /* weil im body center definiert wurde */
    margin: 0 auto;   /* hier wird die die Seite zentriert */
}

Im #container willst du wohl auch vertikal zentrieren:

#container {
...
margin: -300px 0 0 -400px; /* -300px = 1/2 height(600px) */
position: absolute;
top: 50%;
...
height: 600px;
}

Wenn du das Browserfenster in der Höhe verkleinerst (kleiner als der Viewport), müßte der Inhalt nach oben unerreichbar verschwinden.

Die Tage habe ich bei css-d eine Lösung gefunden, die ohne all zu viel MarkUp auskommt. Eine Beschreibung gibst hier, das Original habe ich leider nicht mehr:
http://www.manuelbieh.de/www/blog/2005/ ... en-mit-css

Du baust deine Seite mit "position: relative" auf, da mußt du, wie flip-flop schon sagt, mit den Höhenangabe und dem Box-Model der Browser aufpassen und der Doctype, Quirksmode ...

Gruß
Götz

[cyrano]

Hi Kukki,

bei sowas hilft mir http://www.intensivstation.ch , http://www.pixelgraphix.de und die dort weiterführenden Links sowie das Buch CSS-Praxis von Kai Laborenz aus dem Galileo-Verlag.

[kukki]

Nach einigem Probieren und Rumgoggeln habe ich eine fertige Lösung zusammengestellt, die man bestimmt noch verbessern kann, aber Sie läuft im IE und Firefox. Andere habe ich nocht nicht testen können. Besten Dank für Eure Beiträge. Falls jemand interessiert ist, hier dist die Demoseite:
http://www.galabauuwekarg.de/index.php
Den CSS Code stelle ich bei Bedarf noch einmal online.

Die horizontale und vertikale Zentrierung ging bis auf die Zusammenstellung der einzelnen Blöcke ganz gut, nur dass man irgendwann keine Fehler mehr sieht. Obendrein gibt es eine menge an Anleitungen, die leider nicht ins Detail gehen.

Übrigens sind alle Teile der Website erreichbar, von 800x600 bis hin zu allen höheren Auflösungen. Bei der niedrigsten Rate müßte ich noch ein wenig feilen, aber unerreichbare Teile der Seite gibt es nicht! Der Scrollbalken ist sofort da, wenn die Seite über den Browser hinausgeht.