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

Tue Apr 24 10:07:58 CEST 2012

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
>

-- 
Clasbrummel IT-Koordination
Am Wellenholz 8
D 33818 Leopoldshöhe

t +49 (0) 5202 884684
f +49 (0) 5202 884430

UStID DE170042505