Nicht scrollbarer Bereich mit CSS - Problem!

[Petra1979]

Hallo,
nach langer Suche ist mir endlich eine Lösung untergekommen, wie man ohne Frames auskommt und die Navigation trotzdem fixiert ist.


Ich habe ein BEISPIEL hochgeladen zu dem ich einige Frage hätte.


1) Im FF scheint oberhalb die body-Hintergrundfarbe durch (PINK)!
Im IE sieht man nur die Navigationsleiste - so will ich es haben.

2) In beiden browsern ist der 'down-arrow' zum scrollen außerhalb des sichtbaren Bereiches - ein Teil vom Text ebenso. Der findige user weiß sich zu helfen und markiert den Text und zieht dabei die Maus nach unten... Jetzt ist die Navileiste aber weg und man muß aktualisieren.


Könnt Ihr mir bitte bei der Lösung der Probleme helfen - ich sehe schon vor lauter Wald die Bäume nicht mehr .

Danke,
Pezi


im css steht:

PHP-Code:

html, body
{
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    color:#000000;
    background-color: #FF00FF;
}

div.nscr
{
    height:80px;
    width:100%;
    padding-left:3px;
    color:#000000;
    background-color: #CCCCCC;
}


div.inhalt
{
    margin-left:0px;
    padding-left:3px;
    height:100%;
    overflow:auto;
    color:#000000;
    background-color: #FFFFCC;
} 


[hero-master]

Hallo Pezi

Zitat von Petra1979

1) Im FF scheint oberhalb die body-Hintergrundfarbe durch (PINK)!
Im IE sieht man nur die Navigationsleiste - so will ich es haben.

Das liegt an dem vordefinierten Außenabstand des p-Tags, daurch verschiebt sich das Ganze nach unten

Zitat von Petra1979

2) In beiden browsern ist der 'down-arrow' zum scrollen außerhalb des sichtbaren Bereiches - ein Teil vom Text ebenso.

80px + 100% = gesamte Höhe
Somite liegt der Scrollbalken 80px weiter unten, als gedacht
Das wird imho so wohl auch nicht gut gehen, dass du %-Angaben mit px-Angaben vermischt.

[Petra1979]

Danke das ging schnell, das 1. Problemchen ist mir jetzt klar .


Beim 2. habe ich so meine Schwierigkeiten weil ich folgendes vor habe:
Sorry jetzt muß ich weit ausholen :
=>
Die Navileiste und der Contentbereich 'teilen' sich 'ein' Hintergrundfoto.
Dieses wird in 2 Teile gesplittet 1x für Navi und 1x um 80px gecuttet für den Content-Bereich.

Im Content-Bereich kommt dann eine Tabelle die in einigen Spalten gezielt das Hintergrundfoto absoftet (mittels nachbearbeiteten Fotos) damit man den darüberliegenden Text besser lesen kann.

Um das genaue 'drüberlegen' zu ermöglichen brauche ich von links einen festen Abstand. Die Breite vom Content-Bereich ist in % angegeben weil viele Daten dargestellt werden müssen und ich bei kleineren Auflösungen keine horiz. Scroll-Leiste erzwingen will.


Scheint doch nicht so einfach zu sein wie ich es mir vorgestellt habe ...
Ich schaffe es ja nicht einmal, dass die Darstellung im IE und Firefox identisch ist (CSS im Quelltext).
Im FF erscheint eine 'aktive', horiz. Scroll-Leiste und im IE eine 'passive' vertikale.
Die vertikale wird später nicht überall nötig sein und die horizontale Leiste ist unerwünscht, weil die Content-Breite ja prozentuell nicht über 100 ist bzw. gehen kann !?

Hoffe ich habe nicht zu viel auf einmal gefragt ...

[hero-master]

Mir fällt da leider keine Technik ein, wie man das so machen könnte.
Das Problem ist einfach der scrollbare Bereich und die Tatsache, dass der Container bis zum Browserrand geht.
Man muss ja dem Container eine Höhe zuweisen. Wenn man eine feste Breite zuweisen würde, dann würde es nicht immer bis zum Browserrand gehen.
Bei iener relativen Höhe hat man wieder den Konflikt mit der absoluten Höhe des Headers...
Ist denn der scrollende Bereich unbedingt notwendig?
Meiner Minung nach stört ein Scrollbalken im Layout und sieht nicht sonderlich gut aus

Zu deinem Link mit der Darstellung:
Der body-Tag hat eine vordefinierte Breite von 100%, wie jedes Blockelement.
Und hier spielt wieder das Boxmodell eine Rolle: 100% + margin-Wert = Breite

Der IE versteht das für den body-Tag aber wohl nicht so ganz...

[Petra1979]

Danke Nico,
das ist schade - habe mich schon so gefreut ohne Frames arbeiten zu müssen. Die fixe Höhe des Headers verdirbt mir leider das Vergnügen.

Ist denn der scrollende Bereich unbedingt notwendig?
Ja, es sind lange Listen, über deren Inhalt sich der User einen Überblick verschaffen will. Es mach in meinem Fall keinen Sinn die Listen soweit zu splitten, dass man nicht mehr scrollen müßte. PHP beherrsche ich nicht, daher kann ich auch keinen Filter 'programmieren'.

Auch wenn ich hier jetzt gepeinigt werde - ich werde Frames verwenden - ganz einfach weil ich nicht will, dass die Navigation 'verschwindet'. Habe eh nur wenig Einzelseiten und daher stört es nicht für jede Seite eine zusätzliche Seite zu erstellen die alles enthält um direkt angesprochen werden zu können.


LG Petra

[hero-master]

Eine weitere Möglichkeit wäre noch mit position:fixed zu arbeiten. Ein Workaorund für den IE müsste es dazu auch geben.
Dann ist der Scrollbalken zwar "im body" aber, die Navigation bleibt oben stehen.

btw: Ist es überhaupt mit Frames möglich einerseits das so zu erstellen? Also auch mit den 80px Höhe und den restlichen Platz bis zum Browserrand das andere Frame?
Und die 100% müssen auch eingehalten werden, also du könntest nicht jetzt mit absoluten Angaben in der Höhe arbeiten?

[Petra1979]

80px Höhe kann ich als Höhe festlegen, ja.
Der Rest sollte sich verwirklichen lassen, werde mich in den kommenden Nächten damit befassen.

Feine Tuts hast Du da auf Deiner site ;-)