CSS-Experten-Hilfe benötigt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
auto
chronologisch vorgehen
code
container
effekt
element
fenster
grafik
hintergrund
hintergrundbild
http
image
inhalt
problem
tip
tomate
url
verzweiflung
zeile
-
Hallo,
ich bin gerade dabei, mir mit Joomla eine Website für Hintergrundinfos zu einem Schreibprojekt von mir einzurichten.
Leider bringt mich die Anpassung des gewünschten Templates ziemlich zur Verzweiflung.
Es geht um eine Hintergrundgrafik , die per CSS in einen Container eingebunden ist und mit dem wachsenden Inhalt entsprechend oft wieder holt werden soll.
Da das externe Stylesheet schon reichlich lang und unübersichtlich ist, zitiere ich hier mal nur die beiden Stileangaben, die das Problem veranschaulichen (bzw. verursachen...).
Es gibt als äußeren Rahmen einen DIV-Container mit der ID "bg" und innerhalb dieses Containers den betreffenden Container mit der ID "content". Die beiden Stylangeben für diese beiden Container lauten wie folgt:
und:#bg{ width: 1129px; margin: 0 auto; height: 100%; background: url(../images/content_bg.png) repeat; }
Die content_bg.png ist die besagte Grafik die eben gekachelt, bzw. beliebig oft wiederholt werden soll.#content{ width: 1000px; margin: 0 auto; min-height: 500px; height: 100%; }
Zu begutachten ist das Problem hier: http://karola.lima-city.de/zeitgenossen/index.php/hintergruende/reale-ereignisse
Der Inhalt ragt über die besagte Hintergrundgrafik hinaus, weil diese eben nicht wiederholt wird.
Nun habe ich schon festgestellt, dass das Problem offenbar mit der min-height-Angabe für den content-Container zusammenhängt.
- Entferne ich diese Angabe, wird die Grafik gar nicht wiederholt.
- Setze ich einen größeren Wert für diese Angabe ein (z.B. 1000 px), dann wird der Container natürlich auf jeder Seite auf diese Länge gestreckt - auch wenn der Inhalt kürzer ist.
- Setze ich einen prozentualen Wert für diese Angabe ein, wird die Angabe ignoriert.
- Und belasse ich es so bei den 500px, dann wird bei längerem Inhalt diese Grafik eben nicht oft genug wiederholt.
Vielleicht habe ich ja auch einfach nur Tomaten auf den Augen und habe daher irgendetwas Offensichtliches übersehen.
Zumindest bin ich mit meinem Latein ziemlich am Ende und daher für jeden konstruktiven Rat dankbar.
Viele Grüsse,
Karola -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
ich glaube das problem lieg daran, dass du ledeglich den Inhalt innerhalb von "bg" mit der Grafik füllst. suche mal die Zeile, wo
steht und füge dort dein hintergrundbild mit dem übrigens richtigen code ein. Anschließend musst du nurnoch das oben überdecken (owbwohl ich mir sicher bin, dass alles klappen wird, wenn du einfach nur den hintergrund von body{} änderst)body { background: url(../images/content_bg.png) repeat-y center top; }
Achja, und schöne Webseite
-
@limabone
Leider Falsch body ist ja nicht zentriert und das Hintergrundbild sind diese "Blauen Wolken".
@Karole
Füge nach dem div id="right",
folgendes hinzu:
<div style="clear: both;"></div>
Grund:
Dadurch das Du loat:left in left/Main/right benutzt umschließt "content" nicht mehr diese Elemente. -
Dein Problem ist ganz einfach aus der Welt zu schaffen,
Es handelt sich dabei um diese elendigen Höhenangaben, denn diese sind immer absolut (px, em, cm, …) oder orientieren sich am Elternelement (%) daraus folgt, dass sich ein div, welches direkt unterhalb von body befindet (in CSS so zu identifizieren: body>div) auf die höhe des fensters bezieht, weil der body (und das html-Element) sich halt auf das Fenster bezieht.
Wie löst man nun diese Abhängigkeiten auf? Ganz einfach man lässt sie weg, sprich in deinem Fall sähen die relevanten Regeln im CSS so aus:#bg { background:url("../images/content_bg.png"); margin:0 auto; width:1129px; }
Das ist aber nur der erste Schritt, da du im inneren des #bg die Elemente floatest werden diese aus dem Dokumentenfluss gehoben, wodurch sich deren Layout nicht mehr auf das von #bg auswirkt, so wird #bg dann dargestellt, als wenn es leer wäre, das kann man umgehen, indem man einen overflow-Wert hinzufügt, der ungleich visible ist. Beschrieben ist dieses Verhalten auf http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Gängie Praxis um diesen Effekt zu erzielen ist übrigens den Wert "hidden" zu verwenden, da "auto" oft einfach nur einen Scrollbalken drumherum erzeugt, wie es auch "scroll" tut, also sähe die Regel nun wie folgt aus (mehrere Zeilen für die Übersicht):#bg { background:url("../images/content_bg.png"); margin:0 auto; width:1129px; overflow:hidden; }
Damit der Hintergrund nun aber so wie von dir wahrscheinlich erhofft auch bei kurzen Inhalten über die komplette Seitenhöhe wiederhohlt wird würde ich dafür sorgen, dass die Elemente "html" und "body" über die komplette Höhe gehen und dann dem body das selbe Hintergrundbild geben wie #bg, da das andere eh schon vom html-Element gehalten wird, sprich deine Regeln zu html und body sähen bei mir so aus:#html, body { background:url("../images/bg.png") repeat-x; margin:0 auto; padding:0; height:100%; } body { background:url("../images/content_bg.png"); width:1129px; }
Wie du siehst ist es gar nicht so viel…
Mit freundlichen Grüßen -
Erstmal Euch allen ganz herzlichen Dank für Eure Unterstützung!
@limabone: simuliertes hat leider Recht.
@simuliertes: Habe Deinen Tipp ausprobiert und es hat wie gewünscht funktioniert! Danke schön!
@nemoinho: Da ich chronologisch vorgehen wollte und der Tipp von simuliertes bereits den gewünschten Effekt hatte, habe ich Deinen Tipp dann nicht mehr umgesetzt, aber ihn mir für alle Fälle abgespeichert. Darum siehe es bitte nicht so, dass ich Deine Mühen weniger honorieren würde, denn Du hast mir ja auch sehr ausführlich geantwortet.
Geholfen habt Ihr mir auf jeden Fall alle!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
