LinkBack URL
About LinkBacks
ZitierenDas hier trifft es doch ziemlich genau, oder?
http://standards.webmasterpro.de/ind...+100%25+H%F6he
Wie auf dem angehangenen Bild zu sehen soll eine Seite erstellt werden, deren höhe immer 100% des Browserfensters einnimmt. Dabei ist darauf zu achten, das mit Hintergrundbild und transparenten Containern gearbeitet werden muss. Leider habe ich bisher keinen weg gefunden diese Ansprüche in purem CSS zu gewärleisten. Es hapert bei mir immer an DIV C dessen Höhe leider nicht genau definiert werden kann.
Das hier trifft es doch ziemlich genau, oder?
http://standards.webmasterpro.de/ind...+100%25+H%F6he
Leider nein, da DIV B und DIV D transparente hintergründe brauchen. Es ist wichtig das man hier das Hintergrundbild sehen kann. DIV C wiederum hat einen weißen Hintergrund aber keine feste Höhe.
Höhe von DIV C = Höhe des Browserfensters - (Höhe DIV A + Höhe DIV B + Höhe DIV D)
In CSS kann man aber leider nicht sagen:
height: 100%-230px;
Hmm .. für den IE gäbe es expressions, die per Javascript sowas wie 100%-230px leisten können .. aber ich glaub, in anderen Browsern funktioniert das (als expression) nicht, aber dann vermutlich mit (normalem) Javascript im HTML-Dokument.
Wie wäre es denn, wenn Du das transparente Footer-Hintergrundbild in den weißen Hintergrund für div c integrierst und EIN div daraus machst? Ich habs jetzt nicht komplett durchdacht, aber manchmal führen solche "Zusammenführungen" zum Erfolg ...
.. und heißt "transparent" _komplett_ transparent? Also ganz ohne Hintergrundbild? .. dann gibt es evtl. noch Lösungen mit margins oder paddings ..
transparent heisst ohne hintergrund genau
In den Hintergrund integrieren geht leider nicht, da DIV C später via JavaScript einklappbar sein soll (für alle jQuery-Kenner: slideToggle) dabei muss sich dann DIV D mitbewegen können. Obwohl die Seite später viel auf JavaScript/Ajax setzt, muss sie auch bei deaktiviertem JavaScript funktionieren. Aus diesem Grund versuche ich so verzweifelt eine pure CSS-Lösung zu finden.
Ich glaube diese css-expressions würden sogar Browserübergreifend funktionieren, aber in dem Moment wo javaScript deaktiviert ist, funktionieren sie eben nicht mehr. Da kann ich auch gleich auf eine javaScript-Lösung setzen ^^
Ich hoffe dass mir doch noch jemand Helfen kann, ansonsten muss sich mein Kunde bei deaktiviertem javaScript eben mit einer festen Höhe zufrieden geben müssen.
Wenn ich ein Element absolut positioniere, ihm eine höhe von 100%, ein margin-top von 180px und ein margin-bottom von 50px gebe, wird das element dann nicht 100%+230px groß? *nachdenk*
Geändert von Micha1984 (21.03.2010 um 15:17 Uhr) Grund: margins
ah, ok .. dann wirds vermutlich schwierig ..
jepp .. aber man kann evtl. IN das 100%-div ein Element mit den entsprechenden margin-werten setzen. Allerdings greift das margin-bottom dann wohl nur, wenn der Inhalt lang genug istWenn ich ein Element absolut positioniere, ihm eine höhe von 100%, ein margin-top von 180px und ein margin-bottom von 50px gebe, wird das element dann nicht 100%+230px groß? *nachdenk*
da sehnt man sich fast zu den tabellenlayouts zurück.
Layouttabelle: 100%
Zeile A: height=150
Zeile B: height=30
Zeile D: height=50
Zeile C passt sich automaisch in der Höhe an ... aber das wäre keine saubere arbeit
Kannst Du mal das dazugehörige Layout zeigen?
Red nicht – Geh los!
Leider nein, Ihr kennt das sicher, wenn man das Layout vom Kunden als Ausdruck vorgegeben kriegt ^^
Ich warte im Moment noch auf die Bilder und Texte die verwendet wurden.
Hm, suboptimal.
Ich vermute, dass sich mit einem konkreten Layout sicher eine Lösung finden lassen wird.
Sicher würde der eine oder andere Denkanstoß zur Umsetzung weiterhelfen
Red nicht – Geh los!
Joah .. Tabellen wären einfacher .. und ganz unter uns: dem Kunden wäre es vermutlich völlig egal.. ich hab letztens nach mehrstündigem Rumgekasper auch seit Ewigkeiten mal wieder eine Hilfs-Tabelle genutzt (Aufwand: 2 Minuten). Aber ich hab deswegen auch Bauchschmerzen, von daher kann ich schon verstehen, wenn Du das nicht machen möchtest
Ich kann es ja mal kurz beschreiben.
DIV A ist der Header, darin befindet sich lediglich das Logo.
DIV B ist die eine Pulldown-Navigation
DIV C ist der Content-Bereich. Zwischen dem Content und der Navi sollten ein paar Pixel Freiraum (Padding/Margin) sein.
DIV D ist der Footer. Er enthält neben dem namen der Im Hintergrund zu sehenden Referenz
Im Hintergrund soll eine kleine Animation 2er Bilder als Flash-Film laufen. Da es sich bei dem Kunden um eine Ladenbau-Firma handelt, werden hier Referenz-Bilder gezeigt. Damit der Nutzer sich die Bilder besser anschauen kann, soll der Content-Bereich zusammensliden können. Wird der Inhalt zu lang, soll am rechten Rand des Content-Bereichs eine Scroll-Leiste erscheinen mit der lediglich dieser Bereich gescrollt wird. Es wird wert daraufgelegt, dass die Seite sowohl ohne JavaScript als auch ohne Flash dennoch (mit leichten Einschränkungen) nutzbar bleibt.
Ich glaub bevor ich zu einem Tabellenlayout greife, würde ich für den NoScript-Fall lieber eine feste Höhe definieren. Das Problem ist, dass ich nicht nur für Endkunden sondern auch als Freelancer für Agenturen arbeite. Da dieses Projekt in meine Referenzen soll (die ich aus rechtlichen Gründen ohnehin schon arg beschneiden musste) werde ich hier nicht auf eine Tabelle zurückgreifen.Zitat von wildmieze
Joah .. Tabellen wären einfacher .. und ganz unter uns: dem Kunden wäre es vermutlich völlig egal
Wo Du jquery erwähntest: Ganz andere Idee:
Die Slideshow, bzw. den Film setzt du in den Content ein.
per .hide() blendest Du das Ganze aus, über .clone()
fügst Du das ganze in einen eigens dafür erzeugten Container ein,
den Du am unteren Browserrand fix positionierst (.append()).
Der Content bekommt ein entsprechendes Padding und „Browser“
wie der IE6 stellen den Film unter dem Content dar.
Das wäre dann auch der noscript-Fallback
Alles klar?
Red nicht – Geh los!
öhm danke für deine Gedanken, aber ich glaub das Positionieren des Films unter dem Content sollte nicht das problem sein.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)