|
Faux Columns - keine Lösung?
Es ist mir bekannt, dass es nicht möglich ist ein Tochter-Element mit min-height:100% auszustatten wenn das Parent height: auto hat.
Mein Layout: Wrapper (min-height:100%;height:auto), beinhaltet Header, darunter horizontale Navi, darunter der Content. Wie erschaffe ich also ein Content bereich der bis ans Ende der Seite eine sich wiederholende Grafik anzeigt? Nach dem selben Prinzip der Faux Columns, auch wenn es hier keine Spalten gibt. Der Wrapper hat die Hintergrundgrafik. Nun zu meinem Problem: Der Content soll eine Hintergrundgrafik besitzen, die sich in x-Richtung wiederholt (Verlauf von oben nach unten). Zusätzlich, soll am Rand des Wrappers, eine Grafik in y-Richtung laufen z.b. ein dicker grafischer Border. Das Ganze soll sich bis zum unteren Rand des Fenster wiederholen. Wie löse ich das Problem? Setze ich um den Wrapper umzu noch ein div mit der repeat-y Grafik, wird der Wrapper nicht mehr auf 100% laufen. Ich wüsste zwar wie man das mit Tabellen löst, aber die Teile hab ich schon ewig nicht mehr benutzt, und auch dafür kennt hier sicher jemand ne Lösung ;) Grüße, Marcel |
Ich hab noch eine Idee, man könnte ein riesiges Image verwenden, was beide Backgrounds beinhaltet, aber ist das zumutbar?
|
Weiß denn niemand eine Antwort??? :(
Es ist kein Problem für mich wenn ihr mir sagt, dass es keine optimale Lösung gibt ^^ |
ich kann dich nicht wirklich verstehen...
Du hast nen Wrapper mit einer Hintergrundgrafik (repeat-y), in dem wrapper untereinander Header, Nav und Content. Content soll jetzt auch noch ne Hintergrundgrafik (repeat-y) bekommen. wo liegt das problem? ???? Fixed oder Liquid Width? Was soll denn alles min-height haben? soll der content auch bis zum ende gehen, wenn nicht genug inhalt da ist? |
Ich dachte ich hätte das Ganze nicht ganz so schwammig formuliert, naja.
Also der Content soll zumindest zu aussehen, als würde er bis nach unten laufen, zumindest soll es die Hintergrundgrafik. Es wäre ja auch kein Problem, wenn beide Hintergründe repeat-y wären, jedoch ist der Hintergrund im Content repeat-x (und auch repeat-y). Um es dir etwas bildlicher zu gestalten, hier die Seite: Epic WebMedia - Only the epic solution is the best solution Der Haupthintergrund ist ein Bild mit den Maßen: 1x768 (repeat-x, und repeat-y). Jetzt will ich das Design um einen eine grafischen Border erweitern, jenseits des Wrappers. Also am Rand des Wrappers soll eine Grafik entlanglaufen, die ca. 30-50px Breit sein soll, von oben nach unten (repeat-y). Die soll natürlich auch min-height:100% haben. Wenn also ein <div id="grafischerborder"> um den wrapper erstelle, kann dieser nicht mehr die 100% höhe von body erben. Falls es noch zu unverständlich ist, ich kanns auch noch genauer erläutern oder in html darstellen ^^ Beste Grüße, Marcel |
Hallo D3mOn,
den <div id="grafischerborder"> brauchst Du nicht. Du kannst dafür den <body> - Tag benutzen, Grüße: Emil P.S.: Sory, hab gerade gesehen, dass Du in schon benutzest. Unter Umständen geht das aber auch mit dem <html> - Tag. |
Die Elemente html und body lassen sich in älteren Browser nur sehr begrenzt formatieren.
|
also wenn es im firefox, opera, safari und ab IE 6 geht bin ich zufrieden ^^
- aber wie soll ich ein backgroundimage von body/html so positionieren, dass es sich am wrapper ausrichtet und bei scroll der browserbreite mitbewegt? mit background-position:50% ?? |
Hallo D3mOn,
ich kann mir immer noch nicht Dein Wunsch-Ergebnis vorstellen. Du könntest es erstmal versuchen und hoch laden. Wenn man die Grafiken sieht, ist es leichter zu verstehen was wohin Du positionieren willst. Grüße: Emil |
Also ich hab jetzt mal einen grafischen Border mit y-repeat zum Test gemacht und auf die Seite gepackt.
Hier das Ergebnis: Epic WebMedia - Only the epic solution is the best solution Wie ihr sehen könnt, kann der Content keine 100% bei min-height erben. Wüsste nicht wie man das lösen könnte... Beste Grüße, Marcel |
| Alle Zeitangaben in WEZ +2. Es ist jetzt 05:38 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023