feste Positionierung und scrollbalken

[Torsten Müller]

Hallo,
ich bastele gerade an einer Internetseite rum.
Folgendes Problem habe ich. Verschiedene Sachen sollen fest stehen bleiben. Also habe ich zwei CSS Dateien gemacht. eine für den IE und eine für den Rest. Das funktioniert ja auch, aber wenn das Browserfenster kleiner gemacht wird, sollten bei den Dingern dann Scrollbalken erscheinen. Die kommen nur, wenn der Inhalt des Containers zu gross für diesen ist, aber nicht wenn der Browser zu klein ist. Gibt es da einen Weg, OHNE Java?

hier die Testdatei für IE:
html, body {
   position: absolute;
   font: 12pt/14pt Verdana, Arial, Helvetica, sans-serif;
   height: 100%;
   width:300px;;
   margin: 0;
   padding: 0;
   background: #C0E2FB;
   overflow: hidden;
}
div.logo {
   font: 12pt/14pt Verdana, Arial, Helvetica, sans-serif;
   height: 120px;
   position: absolute;
   left: 250px;
   top: 0px;
   width: 700px;
   background: #C0E2FB;
   overflow: scroll;
}

und die für die anderen Browser:
body {
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 0px;
   PADDING-BOTTOM: 0px;
   PADDING-TOP: 0px;
   font: 12pt Verdana, Arial, Helvetica, sans-serif;
   height: 100%;
   margin: 0px;
   padding: 0px;
   background: #C0E2FB;
   overflow: hidden;
}
div.logo {
   font: 12pt Verdana, Arial, Helvetica, sans-serif;
   height: 120px;
   position: fixed;
   left: 250px;
   top: 0px;
   width: 700px;
   background: #C0E2FB;
   overflow: auto;
}

Bitte helft mir mal.
Mfg
Torsten

[steckl]

hi,

Gibt es da einen Weg, OHNE Java?

du meinst wohl ohne javascript?

Das funktioniert ja auch, aber wenn das Browserfenster kleiner gemacht wird, sollten bei den Dingern dann Scrollbalken erscheinen. Die kommen nur, wenn der Inhalt des Containers zu gross für diesen ist, aber nicht wenn der Browser zu klein ist.

Du hast momentan bei html und body overflow:hidden. Wenn du overflow:auto verwendest sollten eigentlich immer Scrollbalken kommen, wenn der Inhalt zu groß ist.

mfG,
steckl

[Ingo Turski]

Hi,

Also habe ich zwei CSS Dateien gemacht. eine für den IE und eine für den Rest.

Dir ist noch nicht bekannt, dass der IE7 position:fixed inzwischen kennt?

aber wenn das Browserfenster kleiner gemacht wird, sollten bei den Dingern dann Scrollbalken erscheinen.

Du solltest wirklich nur Elemente fixieren, die mich höchster Wahrscheinlichkeit ins Fenster passen.

html, body {
   position: absolute;
   font: 12pt/14pt Verdana, Arial, Helvetica, sans-serif;
   height: 100%;
   width:300px;;
   margin: 0;
   padding: 0;
   background: #C0E2FB;
   overflow: hidden;
}

position:absolute ist hier unnötig und pt eine ungeeignete Einheit für die Bildschirmdarstellung. Außerdem würde ich selbst für den IE die Breite nicht limitieren.

und die für die anderen Browser:
body {
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 0px;
   PADDING-BOTTOM: 0px;
   PADDING-TOP: 0px;
   font: 12pt Verdana, Arial, Helvetica, sans-serif;
   height: 100%;
   margin: 0px;
   padding: 0px;
   background: #C0E2FB;
   overflow: hidden;
}

wozu diese ganzen "PADDING-"-Angaben, zumal du anschließend sowieso padding: 0px angibst?
Die Höhenangabe ist im standardkompatiblen Modus so unwirksam und overflow:hidden ist hier äußerst ungünstig.

Mein Tip: vergiss den IE6 und overflow:hidden und fixiere Dein Logo ganz einfach - für ältere IEs gibst Du dann position:absolute an.
Außerdem würde ich auf die Angaben left: 250px und width: 700px verzichten, wenn Du das Logo zentrieren willst. Gebe einfach width:100% an und gib dem DIV ein zentriertes Hintergrundbild.

freundliche Grüße
Ingo