Hallo Steffen, mein Tipp um dir die Quälerei mit floats, position, overflow, etc zu ersparen:
http://foundation.zurb.com/docs/grid.php Das ist ein Top CSS Framwork das auch noch eine ganze Reihe anderer Elemente als nur ein Grid mitbringt. Damit kannst du dein Layout in ca. 5 Sekunden umsetzen. Hoffe das hilft Ulrich Am 24. April 2012 15:00 schrieb Steffen Liebig <steffen.lie...@gmx.de>: > 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> </p> >> </div> >> </div> >> <div id="fusszeile"> >> Hier ist die Fuß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@lists.typo3.org >>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german >>> >> >> > > _______________________________________________ > TYPO3-german mailing list > TYPO3-german@lists.typo3.org > http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german _______________________________________________ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
