[TYPO3-german] Problem mit Template - Browser zeigt was Anderes an als die Code-Analyse (Firefox)

[Steffen Liebig]

Hi Peter,

hey das ist genau das, was ich gesucht habe. Deine Posts habe ich schon 
vor einigen Jahren als Praktikant gelesen, das war mehr als einmal 
erhellend. Heute bin ich Ehrenamtler, arbeite aber immer noch gern mit 
Typo3. Nur selbst erstellt habe ich noch keine Seite, ich komme eher aus 
der Redaktionsecke (Weiterbearbeitung bestehender Seiten) mit 
"ausbildungsbedingtem Wissen zu HTML/CSS".

Die Installation läuft nur auf meinem Rechner, das wäre also allenfalls 
per Teamviewer oder so anschaubar. Für mich kein Problem, sag mir 
einfach Bescheid wenn da Bereitschaft besteht. Ich bin Di/Mi so ab 15 
Uhr daheim, Do Vorstellungsgespräch und Fr noch unklar. Grundsätzlicher 
Stichtag für die Seitenstruktur ist Monatsende, wobei ich mein Problem 
berichtet habe. ElCheffe wartet also erstmal, Ahnung vom Thema hat er 
selber keine (dafür gibts nen Arbeitskreis Internet mit mir als 
Webmaster, nur dass bei meiner Einsetzung von ner neuen Seite noch keine 
Rede war) ;-).

Einige Deiner Tipps kann ich schon beantworten bzw muss mich präziser 
ausdrücken:

Das mit dem margin habe ich irgendwo gelesen und ausprobiert...es hatte 
keine Wirkung (mit left: xy und right: xy gings schon eher). Könnte das 
an anderen inkorrekten Details gelegen haben ?

Bei dem Kram zur Fußzeile meinte ich mit der absoluten Positionierung 
nicht diese selbst, sondern die anderen Container. Wenn ich DIE absolut 
setze, vagabundiert der Footer durchs Bild. Zuletzt hat er ganz oben 
gesessen, als "spaßeshalber" alles auf absolut stand.

Im Ergebnis kann ich die Mittelspalte eigentlich gar nicht absolut 
setzen, denn dann orientiert sich der Footer nicht mehr an deren Länge 
(sie ist derzeit auf der Testseite die längste). Am Inhaltscontainer hat 
er sich eh noch nie orientiert.

Verrückt, gell ? Aber wenn ich Deine Zusammenfassung richtig verstehe, 
soll ich mir die absoluten/relativen Positionierungen eh komplett 
verkneifen ?!  [Mich deucht, ich hatte schon überall relativ stehen, 
wonach sich die Mittelspalte nicht mehr flexibel ausdehnte *grübel*].

Hmmm...der äußere Container soll sich eigentlich ans Fenster anpassen. 
Es wird eine flexible Seite mit Orientierung an der Fensterbreite 
gewünscht - dazu kam der Vorschlag "Fensterbreite = 100%", das geht 
glaub nur mit width im äußersten div. Insofern d'accord, aber mit fester 
Breite ist es doch in jedem Fenster gleich groß ?
Body und HTML stehen schon bei 100%, werden aber von Typo3 außen rum 
gesetzt. Wobei ich an "außen rum" mit Blick auf die Analyse im Browser 
so meine Zweifel habe.

Vermutlich hab ich da nen Denkfehler drin...

Ein Clearer war von Anfang an dabei - sass vorm Footer. Denke, ich hab 
ihn auch übernommen und wenn nicht, kommt er gleich wieder rein.

Sehr interessant finde ich, dass eine absolute Position dazu da ist, 
etwas doch wieder relativ (nur zu etwas Anderem) auszurichten. Klingt 
verwirrend *g*, macht auf eine gewisse Art aber wieder Sinn.



Am 23.04.2012 17:22, schrieb Peter Linzenkirchner:
> Hallo Steffen
>
> ohne die Installation zu sehen, kann man da allenfalls raten. Allerdings kann man aus dem Text schon ein paar Fehler ableiten.
>>
>> - Inhalts-div
>> ->  enthält 3 Spalten (Navigation = left: feste Breite, floating links; middle: floating rechts; right: feste Breite, floating rechts)
>
> das riecht nach einem Problem. Wenn du alle drei floaten lässt, brauchen auch alle drei feste Breiten. Wenn die mittlere Spalte eine flexible Breite haben soll, darf sie nicht floaten.
>>
>> - je Spalte ein separater div für den eigentlichen Inhalt (Ziel: separate Größendefinitionen und Vervielfältigungsmöglichkeit innerhalb der Spalte)
>> ->  jeweils per CSS "width=100%;
>>
>> - Footer: floating rechts, width: 100%; separater div für Inhalt (width: 100%)
>
> Spätestens jetzt muss es auseinanderbrechen. Der Footer darf nicht floaten und muss ausserdem die Floats der Inhaltsspalten beenden. Er braucht also entweder ein clear:both oder du musst auf andere Art clearen. Schau dir mal das Clearing von floats genauer an.
>
>>
>> Im Wesentlichen funktioniert das bereits, allerdings haben sich einige Probleme ergeben:
>
> Klar ... Diese Probleme sind aber grundlegender Art.
>>
>> 1) die Fußzeile macht nicht, was sie soll
>> ->  setze ich statt relativer eine absolute Positionierung (position: absolute),
>
> das position:absolute nimmt den Container komplett aus dem Seitenfluss - das Ergebnis kann ich mir vostellen ... vagabundieren passt wahrscheinlich ganz gut. Das geht nicht.
>
>> vagabundiert der Footer quer durchs Bild - je nachdem, was alles absolut steht, sitzt er mal oben und mal mittendrin - hält sich also nicht an seine Position nach dem Inhalts-div, sondern scheint sich eher an der letzten relativ positionierten Spalte zu orientieren
>>
>> 2) in der Analyse mit Firefox steht laut Code alles an der richtigen Stelle, aber der Bildschirm zeigt was Anderes an
>
> Logisch, weil das CSS die Position bestimmt und nicht das HTML.
>
>> ->  die hellen Stellen in der Anzeige ergeben, dass weder der page-content noch der Inhalts-div all das beinhalten, was drin sein sollte...aber wieso stimmt dann im Code alles ?! *confused*
>
>> 3) gebe ich Allem ein "position: relative",
>
> Das ist wieder für was anderes gedacht, man kann damit Container innerhalb des Seitenflusses relativ verschieben und es dazu benutzen, enthaltende Container mit position:absolute relativ zum übergeordneten Container und nicht reltiv zum Fenster zu positionieren. Es ist damit nicht möglich, kaputte floats zu korrigieren.
>
> - Floats müssen Breiten bekommen sonst fallen sie auf die Breite des Inhalts zusammen. Oder auf 0, wenn nichts drin ist.
> - Floats müssen beendet werden sonst wirken sie ad infinitum. Das passiert über das sog. Clearing.
> - nicht floatende Container breiten sich immer auf 100% aus, brauchen also nur eine Breite, wenn sie kleiner sein sollen.
> - Container, die Floats enthalten, fallen auf eine Höhe von 0 zusammen und die Floats ragen unten raus. Man kann das umgehen, indem man dem Container z. B. ein overflow:hidden geben (nicht ganz optimal, leider) oder ihn anders clearen.
>
>> passt es optisch, aber die Mittelspalte nutzt nicht den vollen Platz bzw tut dies nur bei 800*600er-Auflösung (zufällig die richtige Gesamtbreite dafür *lach*)
>> ->  Prozentangaben für die Breite des Mittelspalten-div's:
>
> kann nicht gehen. Entweder alle drei Spalten haben Prozentwerte, die sich insgesamt zu 100% ergänzen, oder die flexible Spalte darf nicht floaten.
>
> äusserer Container: feste Breite in Pixel, margin: 0 auto;
> - innerer container für die Floats: overflow:hidden (= einfachstes Clearing der Floats)
> - - linke Spalte: float left; feste Breite
> - - rechte Spalte: float: right, feste Breite
> - - mittlere Spalte: kein float; keine Breite: margin-left: Breite der linken Spalte; margin-right: Breite der rechten Spalte
>       (mittlere Spalte = letzte Spalte im HTML, sonst gehts nicht)
> - ende innerer Container
> - Footer: kein Float. Damit auch keine Breitenangabe.
> Ende äusserer Container.
>
> =>  das ist keine optimale Anordnung, aber eine, die erst mal funktioniert. Mehr und eleganter: siehe YAML und vor allem die Doku dazu. Oder andere Quellen zu CSS und Floats.
>
> Gruß
> Peter
>
>
> --
> Xing: http://www.xing.com/profile/Peter_Linzenkirchner
> Web: http://www.typo3-lisardo.de
> Facebook: http://tinyurl.com/lisardo-multimedia
>