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

Tue Apr 24 15:00:28 CEST 2012

Jup kann man mal ausprobieren.

Firma dankt :-).

Am 24.04.2012 10:07, schrieb Geoch Clasbrummel:
> Tach Steffen,
>
> wenn's eben geht, würde ich auf "position: absolute" und "position:
> relative" bei DIVs verzichten. Meist ist es gar nicht notwendig, vor
> allem bei variabler Länge des Inhalts.
>
> Deinem dreispaltigen Aufbau der Seiten mit Breite der mittleren Spalte,
> die von der Fenstergröße abhängt, kommt vielleicht das folgende Gerüst
> nahe. Sowas nehme ich als Trockenübung, um zu gucken, ob das sichtbare
> Ergebnis meinen Vorstellungen nahe kommt.
>
> Viele Grüße, Geoch
>
> <html>
> <head>
> <style type="text/css">
> body {
> margin: 0;
> padding: 0;
> background: white;
> color: black;
> font: 13px/1.3 Verdana, Arial, sans-serif;
> }
>
> #links {
> float: left;
> width: 200px;
> border: 1px solid red;
> }
> #rechts {
> float: right;
> width: 200px;
> border: 1px solid red;
> }
> #mitte {
> margin: 0 210px;
> border: 1px solid green;
> }
>
> #inlinks {
> float: left;
> width: 100px;
> margin-left: 50px;
> border: 1px solid magenta;
> }
> #inrechts {
> float: right;
> width: 100px;
> margin-right: 50px;
> border: 1px solid magenta;
> }
> #inmitte {
> margin: 0 160px;
> border: 1px solid blue;
> }
>
> #fusszeile {
> clear: both;
> margin: 20px 20px 50px;
> border: 1px solid black;
> }
> </style>
> </head>
>
> <body>
> <div id="links">
> <p>Lorem</p>
> </div>
> <div id="rechts">
> <p>Lorem ipsum.</p>
> </div>
> <div id="mitte">
> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </p>
>
> <div id="inlinks">
> <p>Lorem</p>
> </div>
> <div id="inrechts">
> <p>Lorem ipsum.</p>
> </div>
> <div id="inmitte">
> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </p>
> <p>&nbsp;</p>
> </div>
> </div>
> <div id="fusszeile">
> Hier ist die Fu&szlig;zeile.
> </div>
> </body>
> </html>
>
>
>
> Am 23.04.2012 16:23, schrieb Steffen Liebig:
>> Hallo zusammen,
>>
>> ich sitze derzeit daran, eine neue Webseite zu erstellen. Nachdem ein
>> professionelles Template sich nicht so umgestalten ließ, wie ich das
>> wollte, habe ich es selbst versucht.
>>
>> Folgendes Aussehen ist das Ziel:
>>
>> 1) Header, evtl Top-Navigation (wichtige Oberseiten), 3 Spalten
>> (Navigation, Inhalt, Logos/Bannerwerbung), Fußzeile (z. B.
>> Copyright-Hinweis)
>>
>> 2) flexible Positionierung der Spalten (div's, floating)
>>
>> 3) Orientierung zumindest der Mittelspalte an der Fenstergröße
>>
>> 4) linke und rechte Spalte am sinnvollsten mit fixer Breite
>>
>> bisherige Ideen zum Aufbau des Templates:
>>
>> - Gesamt-div ("page-content")
>> -> enthalten sind Header, Topnavi, Inhalts-div und Footer
>>
>> - Inhalts-div
>> -> enthält 3 Spalten (Navigation = left: feste Breite, floating links;
>> middle: floating rechts; right: feste Breite, floating rechts)
>>
>> - 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%)
>>
>> Im Wesentlichen funktioniert das bereits, allerdings haben sich einige
>> Probleme ergeben:
>>
>> 1) die Fußzeile macht nicht, was sie soll
>> -> setze ich statt relativer eine absolute Positionierung (position:
>> absolute), 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
>> -> 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", 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: hat
>> Auswirkungen auf den div eine Ebene höher und schiebt ab einem
>> gewissen Punkt (ca. 60% der Gesamtbreite) bei Platzauffüllung von
>> rechts her (ist das normal ?!) und kleiner Fensterbreite die
>> Navigationsspalte aus dem Bild. Passe ich in dieser Richtung an, ist
>> in einem größeren Fenster viel Platz zwischen den Spalten.
>>
>> Sinnvolle automatische Platznutzung sieht m. E. anders aus.
>>
>> Mir ist klar, dass die Problempunkte 1 und 2 zusammen einen
>> Erklärungsansatz zu liefern scheinen (wenn in den div's nicht alles
>> drin ist, was drin sein soll, hält sich der Footer an Gott weiß was,
>> z. B. an den letzten relativ positionerten div ?!). Wäre logisch, ich
>> kapiere aber den Grund nicht - der Code stimmt ja laut Analyse und
>> trotzdem macht die Bildschirmanzeige was komplett Anderes.
>>
>> Hat jemand eine Ahnung, was da los sein könnte ? Ich bin für jede
>> Hilfe dankbar. Code-Dateien etc kann ich bei Bedarf aber erst heute
>> nachmittag schicken - ich sitze am Arbeitsplatz, meine
>> Typo3-Installation liegt daheim auf meinem Privatrechner.
>>
>> Bis bald, Steffen
>> _______________________________________________
>> TYPO3-german mailing list
>> TYPO3-german at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
>>
>
>