nicht angemeldet
hallo leute!
also.. ich hab da ein (hoffentlich kleines) problem was hintergrundbilder und css betrifft - ich bekomm mein vorhaben nicht so ganz auf die reihe. ich denke aber dass das für den ein oder anderen hier kein problem darstellt, vielleicht hilft mir ja jemand auf die sprünge. es scheitert schon an der vorgehensweise, der logik, dem verstehen - dabei bräuchte ich quasi hilfe.
situation:
der hintergrund einer webseite soll durch grafiken aufgewertet werden. es handelt sich dabei um ein div, in dem sich später mal verschiedene inhalte befinden sollen, zb. gefloatete weitere divs, das ganze zwei-oder dreispaltig und vielleicht noch mehr kram.
das hintergrundbild soll für den gesamten bereich gelten. und: das hintergrundbild ist dreiteilig. und genau da liegt das problem.
man kann sich das vielleicht schlecht vorstellen, allerdings hab ich gerade nichts online, was ich vorzeigen könnte, ich geb mir mal mühe beim erklären:
-> der erste teil des hintergrundbilds ist der obere randabschluss. ein gif mit transparenten bereichen.
-> der zweite teil der grafik ist der mittelteil, der sich je nach content-menge nach unten wiederholen soll, (repeat-y).
-> der dritte teil des bildes ist der untere randabschnitt, ebenfalls wieder mit transparenz.
mein problem:
wie bekomme ich es hin das der obere und untere rand ohne repeat angezeigt werden, während der mittelteil genau bündig mit dem oberen randstück nach unten hin, bis zum unteren rand, das div füllt?
das ginge an sich schon, aber ich wollte das eigentlich irgendwie mit der folgenden bedingung erfüllen:
die angewandte methode soll ein zerstückeln der webseite in drei divs untereinander vermeiden, da der nachfolgende content sich über alle drei bereiche der hintergrundgrafik erstrecken soll - was sonst nur umständlich zu realisieren wäre.
meine gedanken dazu:
der einfachste weg wäre natürlich dieser:
<div id="oberer_rand">
...
</div>
<div id="mittelteil">
...
</div>
<div id="unterer_rand">
...
</div>
allerdings hab ich dann richtig viel damit zu tun weitere inhalte und grafiken zu zerstückeln, da diese wie erwähnt über alle drei bereiche verteilt sein sollen. die randabschnitte sind mit über 100px höhe relativ groß, wenn ich meinen content auf das mittlere div beschränke bleiben da sehr häßliche - und viel zu große - leerstellen...
zuletzt hab ich das so versucht:
<div id="mittelteil">
<div id="oberer_rand">
<div id="unterer_rand">
...
</div>
</div>
</div>
damit (und der entsprechenden css-definition) hab ich meine ränder genau da wo ich sie haben will. allerdings liefert mir dann mein "mittelteil"-div unschöne ergebnisse.
wie erwähnt sind meine rand-grafiken transparent - was natürlich schlecht aussieht wenn dann der sich wiederholende mittelteil zum vorschein kommt, anstatt des normalen seitenhintergrunds darunter.
normalerweise könnte ich die hintergrund-position für den mittelteil so wählen dass nach oben hin abstand gelassen wird, und zwar exakt die höhe meines oberen randstücks. allerdings hat das bei meinen versuchen nicht funktioniert, ich hab mich noch nicht schlaugemacht ob das nun am repeat-y oder einem anderen fehler meinerseits liegt.
doch selbst wenn das so klappt - es würde auf jeden fall hinter dem unteren randstück zu sehen sein.
ziemlich vertrackt das ganze - ich hoffe ja sehr darauf dass ich da nur ne denkblokade hab. geht mein vorhaben überhaupt? ist das irgendwie vernünftig umsetzbar?
danke schonmal fürs lesen dieses doch etwas längeren posts - und auch danke im vorraus für alle hoffentlich folgenden und klärenden antworten :)
grüße & ein schönes wochenende,
sph