div liegt ueber content

Mein Template besteht ausser einem Stylesheet lediglich aus TS-Code. Links sitzt ein TMENU, dem per div folgende styles zugewiesen sind:

.navigation {
  background-color:#848484;
  position:fixed; top:10px; left:10px;
  width:11em; height:100%;
  white-space:nowrap;
  float:left;
  border-width:middle;
  border-color:#ff6600;
  border-style:double;
  padding:5px;
}

Rechts daneben soll dann der Content liegen.
Teilweise klappt das auch schon recht gut, nur machen die verschiedenen Browser mal wieder Aerger.
IE kann das mit dem height:100% nicht - damit kann ich leben, sieht aber halt nicht so gut aus.
Opera/Konqueror blenden das Menue samt Hintergrund *ueber* den Content. Und das ist Murks. 🙁
Mit position:fixed; kann IE auch nichts anfangen, das wiederum klappt bei den anderen beiden.

Zum 1. Punkt haette ich die Idee, was daneben/mit rein zu packen, das 100% der Seite benutzt, mal sehen, ob das hilft.
Beim 3. gibt es wohl keine Abhilfe, oder gibt es fuer diesen Zweck etwas, das der IE kann?
Der 2. Punkt ... tja. Ich hab versucht, ein span drumrumzumachen. Oder nur ein span. Jetzt ist es eine Tabelle mit span und div, aber es bleibt druebergeblendet. Ideen? Vorschlaege?

(Das width:11em; ist so entstanden, weil IE mir bei width:auto; sonst den Menueeintrag mit Leerzeichen umbricht, wenn der Content breit genug ist ... auch da hab ich erstmal keine bessere Idee ...)

Hallo Aviator !

Zu deinem Punkt 3, "fixed" mit IE, schau mal auf folgende Seite :
http://www.fabrice-pascal.de/artikel/posfixedie6/
Die dort beschriebene Variante mit separatem Stylesheet , overflow-y: hidden
und Browserweiche habe ich bei mir eingebaut.
Sie funktioniert exzellent.
Die Variante "Dean Edwards IE7" ist für mich neu,
müßte man mal ausprobieren.

Ansonsten verstehe ich deine Fehlerbeschreibung nicht so richtig.
Meine Seite funktioniert mit HTML-Template, CSS-Stylesheet und Autoparser.
Menü, Content-Main, Content-Right und diverse andere Elemente werden über DIVs positioniert,
das funktioniert mit IE5.5, 6 und Opera hervorragend.

Vielleicht verlinkts du mal deine Seite hier, damit man sich das Problem anschauen kann.

Grüße aus Schweden,
jenses

Der IE7-Hack tut schonmal nicht, jedenfalls nicht bei den IE6 unter Win2K, die hier verfuegbar sind. Die andere Anleitung ist etwas sehr wirr geschrieben, mal sehen, ob ich da durchsteige.

Ansehen kann man sich das Projekt unter http://193.25.26.35 - den ie7 hab ich mal unter http://193.25.26.35/ie7 gelassen, um es mir von daheim aus mal anzusehen, wie der IE6 unter XP das darstellt.

Hallo Aviator !

Den IE7-Hack habe ich jetzt ausprobiert.
Lokal funktionierts ganz gut, bei durch Typo3 generierte
Seiten überhaupt nicht.
Außerdem meckert die Firewall von WinXP SP2 immer.
Also nichts, was man dem User zumuten sollte.

Zu deiner Seite :

Warum arbeitest du mit Frames ?
Ich vermute mal, das Frames zusammen mit fixed-positionierten DIVs nicht so funktionieren, wie du dir das vorstellst.
Da der IE das fixed nicht versteht, wird es ignoriert.
Würde er fixed verstehen, wäre auch hier das DIV über deinem Content platziert !
Das Problem sind nicht die anderen Browser, sondern der IE.
Also, laß mal die Frames weg und positioniere nur mit DIVs.

Schau dir mal die Seite an, an der ich gerade arbeite :
http://www.albanfaust.com/de/wer_ist_alban/index.html .
Keine Frames, alles nur mit <div>-positionierungen im Stylesheet.

Der Content, der scrollbar sein soll,
wird in <div class="container"></div> eingepackt.

Dann benötigst du 2 verschiedene Stylesheets,
eins für den IE, eins für die anderen Browser.

Die Auswahl erfolgt im HEAD :

<!--[if gte IE 5]>
     <LINK href="fileadmin/html_vorlage/styles_alban_ie5.css" rel="stylesheet" type="text/css">	
<![endif]-->

(natürlich angepaßt an deine Stylesheets).

Schau dir mal meine beiden CSS-Dateien an
und vergleiche sie, dann sollte eigentlich alles klar sein :

http://www.albanfaust.com/fileadmin/html_vorlage/styles_alban_ie5.css
http://www.albanfaust.com/fileadmin/html_vorlage/styles_alban.css

viele Grüße
jenses

Frames? Ich hab doch gar keine Frames mehr auf der Seite. 🙂

Wenn ich Typo3 jetzt noch dazu bekomme, ein paar zusaetzliche Zeilen - naemlich den von Dir zitierten Code - im Header unterzubringen ... ich hab halt keine HTML-Vorlage, in der ich das eintragen koennte, laeuft alles ueber TypoScript.

das geht über conditions

Oh ... stimmt ja, hab ich auch schon benutzt, nur noch nicht fuer Browsertypen ... 😉
Gleich mal machen. Im Moment nagelt der IE zwar die ganze Seite fest, aber evtl bekomme ich den Zwischenzustand auch noch hin ... 😃

:o Oh, entschuldige bitte ! :o

Ich meinte natürlich die ganze Zeit Tabellen !
Also ersetze mal bitte in meinem Posting jedes Vorkommen des Wortes Frame/-s mit Table/-s .
Also fixed-DIVs innerhalb von Tabellen bringen dir deine Tabelle durcheinander.
Da der IE kein fixed kennt, kann er auch nix durcheinander bringen !
( Innerhalb von fixed-DIVs funktionieren natürlich Tabellen!)

viele Grüße
jenses

Hallo Aviator !

So, wie du es jetzt gelöst hast, gibt es ein Problem.
Wenn ich Opera sage, das es sich als IE ausgeben soll
(was man oft machen muß, da sonst viele Seiten nicht laufen),
wird auch wirklich das IE-Stylesheet geladen und damit
liegt die Navigation wieder über dem nach links gerückten Content.
Ich vermute mal, daß das in anderen Browsern auch so ist.
Mit conditions ist es wohl nicht die Lösung.
Versuch mal so, wie ich es dir empfohlen habe.
Die Browserweiche kriegst du folgendermaßen ind den Seitenkopf :

page.config.headerComment = [if gte IE 5]>
     <LINK href="fileadmin/template/style/ie-style.css" rel="stylesheet" type="text/css">	
<![endif]--> <!--

viele Grüße
jenses

Hi Jenses,

headerComment eignet sich fuer diesen Zweck leider nicht, da so die nur vom IE interpretierte Browserweiche vor dem anderen Stylesheet steht.
Ich hatte es mit page.headerData versucht gehabt, dabei aber entweder was falsch gemacht oder es im Source ueberlesen, so tut es jetzt:

page.headerData.1 = HTML
page.headerData.1.value = <!--[if gte IE 5]> <LINK href="fileadmin/template/style/ie-style.css" rel="stylesheet" type="text/css"> <![endif] -->

Nur: Wie man an der nur im Nicht-IE-CSS enthaltenen Border sehen kann, fuehrt der IE *beide* aus ...
Irgendwas hakt da ...

Damit die Stylesheets mal einfacher zu finden sind:
IE: http://193.25.26.35/fileadmin/template/style/ie-style.css Andere: http://193.25.26.35/fileadmin/template/style/style.css
http://193.25.26.35/constants.txt und http://193.25.26.35/setup.txt sind dann der Rest. 😉

PS: Die Tabelle aussenrum hab ich mal entfernt.

Hallo Aviator !

Irgendwie sind wir jetzt in einer Sackgasse gelandet !

headerComment eignet sich fuer diesen Zweck leider nicht, da so die nur vom IE interpretierte Browserweiche vor dem anderen Stylesheet steht.

Ja, leider. Hab ich nicht drauf geachtet.

HeaderData funktioniert ja wohl auch nicht, wie ich am Quelltext sehe.

Ich glaube, es wäre wirklich zeitsparender und nervenschonender,
wenn du es so versuchst, wie es bei mir erfolgreich funktioniert.

1. Schaffe dir ein HTML-Template mit den entsprechenden Markern.

2. Die Stylesheet-Aufrufe und Browserweiche schreibst du gleich dort hinein.

3. Ersetze in deinem IE-Stylesheet "fixed" mit "absolute",
sonst funktioniert es nicht.

4. Positioniere mit DIV-Boxen und laß die Tables weg,
Typo baut noch genug davon ein.

5. Schau dir in an, wie ich in meinen Stylesheets mit z-index arbeite, um die Elemente zu "stapeln".

6. Im Setup werden die Marker (###navi###, ###inhalt###) mit Inhalt gefüllt :
( Ich benutze den Autoparser, aber sinngemäß funktionierts auch ohne mit temp.headTemplate = FILE usw. )

# Definition des Main TEMPLATE cObject für den Seiten-HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Speist den Inhalt des Auto-parser-PlugIns in das TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Wählt nur den Inhalt zwischen den <head>-tags aus
workOnSubpart = DOCUMENT_HEADER
}
# -------------------------------------------------------------------------------------------------

# Definition des Main TEMPLATE cObject für die Sprachauswahl
temp.sprache = PHP_SCRIPT 
temp.sprache.file = fileadmin/scripts/my_languageMenu.php
# -------------------------------------------------------------------------------------------------

# Definition des Main TEMPLATE cObject für den Seiten-BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Speist den Inhalt des Auto-parser-PlugIns in das TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Wählt nur den Inhalt zwischen den <body>-tags aus
workOnSubpart = DOCUMENT_BODY
# -------------------------------------------------------------------------------------------------

----------------------------------

# Ersetzt den ###flag-box### -Subpart mit dynamischer Sprachauswahl:
subparts.flag-box < temp.sprache
# -------------------------------------------------------------------------------------------------

# Ersetzt den ###menu-1### -Subpart mit dem dynamischen Menü:
subparts.menu-1 < temp.menu-1
# -------------------------------------------------------------------------------------------------

# Ersetzt den ###content-main### -Subpart mit dem Inhalt der NORMAL-Spalte:
subparts.content-main < styles.content.get
# -------------------------------------------------------------------------------------------------

# Ersetzt den ###content-right### -Subpart mit dem Inhalt der RECHTS-Spalte:
subparts.content-right < styles.content.getRight
# -------------------------------------------------------------------------------------------------

# Ersetzt den ###update-text-box### -Subpart mit folgendem Inhalt 
subparts.update-text-box = TEXT
subparts.update-text-box.lang.de = Letzte Änderung :
subparts.update-text-box.lang.se = Senast updaterad :
subparts.update-text-box.lang.en = Last Update :
# -------------------------------------------------------------------------------------------------

# Ersetzt den ###update-box### -Subpart mit dem Änderungs-Datum der jeweiligen Seite
subparts.update-box < styles.content.lastUpdate
# -------------------------------------------------------------------------------------------------
# !!! abschließende Klammer für "Definition des Main TEMPLATE cObject für den Seiten-BODY" !!!
}
# -------------------------------------------------------------------------------------------------

# Hier wird die Seite mit den Inhalten der Templates gefüttert:
# täuscht Suchmaschinen statische Seiten vor ohne "ID=1?&S=0"
config.simulateStaticDocuments = 1
config.simulateStaticDocuments_noTypeIfNoTitle = 1
config.simulateStaticDocuments_pEnc = md5


page = PAGE
page.typeNum = 0
# Einspeisen des Inhalts vom TEMPLATE für die <body> -Sektion:
page.10 < temp.mainTemplate
# Einspeisen des Inhalts vom TEMPLATE für die <head> -Sektion:
page.headerData.10 < temp.headTemplate

Meine Stylesheets hast du, die HTML-Vorlage gibts hier :
http://www.albanfaust.com/fileadmin/html_vorlage/vorlage_alban.html .

viel Erfolg
jenses

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