div liegt ueber content

Das mit dem IE7 klappt auf meinem Heimrechner problemlos, schon komisch. Aber egal.

Werde mir z-index nochmal ansehen, beim ersten Durchlesen auf Selfhtml hab ich nicht verstanden, wofuer das gut sein soll.

1.+2.: Mal machen, hab den Teil weggelassen, weil ich das erst mit Frames geloest hatte, und dafuer sind HTML-Vorlagen unhandlich ... wobei ich diese Markerwurschtelei auch nicht so toll finde ... na ja, man muss nehmen, was das Ding kann. o.O

3. Gleich mal einbauen.

4. Tabellen sind fast komplett raus. Die eine um das Menue hat sich als notwendig erwiesen - verstehen tue ich es nicht, aber sonst steht der Content - bei nicht IE-Browsern - mit im Menue (schwer zu beschreiben). Die andere dient nur dazu, das T3-Element der Startseite etwas nach unten zu schieben. 🙂

5. siehe oben
6. Nochmal in das GoLive-Dingens reinschauen. 😉

Danke

Hallo Aviator !

Auch wenns nur noch 1 oder 2 Tabellen sind,
sie werden GARANTIERT Probleme bringen.

Und sie sind ABSOLUT überflüssig.

Du kannst jedes Element pixelgenau mit DIV-tags positionieren, in allen Browsern, sogar im IE!

Versuchs bitte einfach mal so zu machen,
wie beschrieben !

schönen Abend noch
jenses

Hallo Aviator !

Vielleicht sollte ich dir die Funktionsweise des "fixed-DIVs mit IE" - Hacks nochmal anders erklären.

Also :

1. IE versteht keine fixed-Anweisungen.

2. Deshalb gibt es 2 Stylesheets, 1 für IE, 1 für die normalen Browser.

3. In dem Stylesheet für die normalen Browser positionierst du die Inhaltselemente, die nicht scrollen sollen
( z.B. Menü, Kopfzeile etc.) mit fixed-DIVs.
Der scrollbare Inhalt wird absolute positioniert und bekommt einen kleineren z-index als die anderen Elemente.
Dadurch liegt er unter dem von den anderen Elementen geschaffenen Rahmen und scrollt hinter ihnen weg.

4. Ähnlich funktioniert die Schichtung/Stapelung im Stylesheet für IE.
Nur versteht er kein fixed, also werden Menü,Kopfzeile etc. absolute positioniert.
So haben wir erstmal den Rahmen geschaffen.

Wie kriegen wir den IE jetzt dazu, innerhalb dieses Rahmens scrollbaren Inhalt anzulegen ?

Hier kommt jetzt der Trick:
BODY bekommt overflow-y: hidden zugewiesen, ist also nur noch links-rechts scrollbar (versteht nur der IE).

Wir schaffen dann eine DIV-Box hinter Menü etc., Positionierung relativ ( in meinem Styesheet ".container" bezeichnet).
Diese Box ist seitenfüllend (width: 100%; height: 100%;overflow: auto😉 und hat den niedrigsten z-index,
liegt also hinter allen anderen Elementen.

Innerhalb dieses DIVs wird nun unser Inhalt mit einer DIV-Box absolut positioniert, und zwar genau passend in den Rahmen.
Der z-index muß der zweit-niedrigste sein.
So erreichen wir, das unser Inhalt auch im IE innerhalb unseres "Rahmens" scrollt.

5. Und genau da steckt dein Fehler, du positionierst deinen Inhalt mit einem Tabellen-Konstrukt ,
verkleinert man das Browser-Fenster, verrutscht der Inhalt hinter das Menü.
Das kann so nicht funktionieren !

in der Hoffnung, dir geholfen zu haben
viele Grüße
jenses

So, nun laeuft es - noch immer ohne HTML-Vorlage 😉 - mit divs und scrollbar bei festem Menue! *freu* *huepf*

Vielen herzlichen Dank fuer Deine Hilfe!!! 😃

(War ein paar Tage ausser Haus, daher jetzt erst die Reaktion. Hat mich gestern mit viel Rumfluchen und Ausprobieren den ganzen Tag gekostet, bis es lief. Wollte es dann heute auf Marker und externe HTML-Vorlage umstellen, aber es tut ja nun auch so und komplett ohne Tabellen zur Formatierung 😃 )

Na siehste, geht doch prima !
Habs mir mit Opera, IE & Firefox angeguckt, funzt überall.
Ich würde jetz noch auf die linke Seite hinter das Menü,
aber über den Content,
eine DIV-Box mit 100% Höhe legen, mit der Hintergrundfarbe deiner Seite.
Wenn man das Fenster verkleinert und die Seite waagerecht scrollt, sieht das einfach blöd aus, wie es jetzt ist.
Aber das ist Geschmackssache !
Warum steht in deiner ie-style.css bei .container :
top: 10px; left: 14em; ?
Welche Bedeutung hat das ?

viele Grüße
jenses

Die waere dann aber nur fuer nicht-IE-Browser, oder? Der IE rendert die Seite beim Verkleinern eh sofort neu, waehrend Opera das nur beim Erneuern tut.
Das top: 10px; left: 14em; hab ich rausgenommen, war nicht (mehr) noetig, der Abstand steht ja schon in #content.

Hallo Aviator !

Ich glaub, wir reden von verschiedenen Sachen ??

Das, was ich meine, läuft mit allen Browsern.
Probiers einfach mal aus.

In die normale CSS

.navi-bg {
         position: fixed;
         Z-INDEX: 1;
        top: 0px;
        left: 0px;
        height: 600px;
        width: 12em;
        background-color: #e0e0e0;;
}

In die IE-CSS

.navi-bg {
         position: absolute;
         Z-INDEX: 2;
        top: 0px;
        left: 0px;
        height: 600px;
        width: 12em;
        background-color: #e0e0e0;;
}

Da du keine HTML-Vorlage hast, müßtest du folgendes

<div class="navi-bg"></div>

in dein Template einbauen, direkt vor deine Navigation.

Und jetzt taucht dein Content im verkleinerten Fenster beim Scrollen nicht mehr "links-hinter " dem Menü auf.

Was man noch ändern müßte, damits auch im Mozilla/Firefox vernünftig aussieht, wäre deine padding-Angaben durch entsprechende Margins zu ersetzen und die Breite der Navi anzupassen.
Weil, was im IE & Opera mit padding klappt, funzt nicht im Mozilla.
Da bin ich aber noch selber am probieren.

viele Grüße
jenses

Hab Deinen Vorschlag mal umgesetzt. Dabei sieht man dann auch wieder, wie unterschiedlich die verschiedenen Browser das Mass em interpretieren ... *seufz*

Ja, die Breite der Navigation stoert mich auch noch ... irgendwas, besser gesagt, einer der Browser mochte width: auto; nicht, das sah noch am besten aus. Selbst wenn ich die Schriftgroesse - Schriftart will ich nicht festlegen eigentlich - vorgebe, weiss ich ja nicht, wie breit die Box letztlich sein muss, damit alles reinpasst.

Mal nochmal bei SelfHTML nachsehen, was die zu padding/margin schreiben. War padding nicht aeusserer Abstand und margin innerer? *gruebel*

Ja, ist schon nicht einfach, wenn man eine Seite basteln will,
die auf der Mehrzahl der Browser in etwa gleich aussieht.

Zum Thema CSS gibts eine wunderbare Seite mit vielen feinen Lösungen :
http://www.wpdfd.com/

Schau da mal in diese Abteilung :
http://www.wpdfd.com/editorial/basics/cssbasics7.html
(Padding/Margin mit normalen Browsern und IE).

Da wir aber sowieso schon zwei Stylesheets benutzen,
kann man das ja für den IE anpassen.
Und für Leute, die noch Netscape4 benutzen, kann man eh nichts machen,
außer ihnen zu empfehlen, sich 'nen richtigen Browser zu besorgen.

viele Grüße
jenses

Ah, ja, auf der Seite hab ich gefunden, wie ich das mit den verschiedenen Linkfarben hinbekomme. Gleich mal weiterschauen.