Mehrteiliger Hintergrund in CSS

delle77 · 08.04.2010

Moin moin,
da ich kein Webdesign gelernt habe, mich trotzdem ständig mit Videos und Tutorials weiterbilde, habe ich trotzdem oft das Problem mit der Umsetzung eines Layouts, weil ich scheinbar zu viel umsetzen möchte.

Wie stellt ihr es mit mehrteiligen Hintergrundbildern an.

Als Beispiel fällt mir gerade ein Knastfenstergitter ein, welches oben und unten in die Mauer geht (obere und untere Grafik) und halt der Mittenteil, der erweiterbar sein soll.

Legt ihr da jetzt 3 divs an mit oben und unten Festgröße und Mitte auf auto(100%) etc..... oder wie geht man da am besten vor?

Und wie bekomme ich dann Text vor alle 3 Bereiche? Hab' mir das mit der Position in CSS jetzt zig mal durchgelesen, aber bei der Umsetzung steh ich wie vor 'ner Wand...

oxygen · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

ich kann mir das jetzt nicht so richtig vorstellen - was du als ergebnis willst hast du deine grafik (layout) fertig - und kannst es zur ansicht mal on stellen ... ne gute seite (mit css zum lernen) ist auch da

delle77 · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Selfhtml und Co. kenn ich alles, nur wird halt genau da nicht ein individuelles Problem erklärt. Ich kann mir da zwar einiges zusammenbasteln, aber dann funzt es meist nicht, weil ich iwas nicht beachtet habe, was zB bei der Kombination zweier sachen zu beachten wäre...

So, hier mal ein Beispielbild (jetzt mit dem Frankfurter Messeturm, hab kein Gitter gefunden)

Mertox · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

ich habs zwar auch nicht studiert oder sowas ich würd aber ehrich gesagt auch divs mit z-index:-1; verwenden

ackermaennchen · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Also soweit ich verstanden habe ist ja die mittlere Grafik nahtlos kachelbar oder?!

Dann baust du 3 Divs

Header
Content
Footer

um Text über die Grafik zu schreiben gibts du als atribut

#divname {background-image: url(../images/bg.gif);}

Und schon sollt es kein Problem sein.

delle77 · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

So dachte ich mir das auch.

Lila quasi auf Z-Index 0 und Rot, Blau, Grün auf Z-Index -1. Das habe ich aber nicht hinbekommen, wegen dem ganzen Positionierungskram.....

Daher meine ursprüngliche Frage, wie es generell gemacht werden würde. Wenn genau so mit dem Z-Index und der Positionierung, dann muss ich da echt nochmal paar Nächte diesen einen Absatz über Positionierung bei Selfhtml lesen, der mir jedes mal wieder den Kopf qualmen lässt...

@ackermaennchen:
Gehen wir davon aus, es ist eine Sidebar auf der rechten Seite.
D.h. ich brauche 1 div für Topteil, 1 div für Mitte, 1 div für Unterteil und noch ein Div, der alle 3 divs umschliesst, um darin einen Text plazieren zu können???
So habe ich das probiert, nur daß der die umschliessenden Div-Tag nicht vor allen 3 Grafik-Divs sitzt.

Mertox · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

wenn du den mittleren Teil vielleicht so bearbeitest, dass dus über background-repeat:repeat-y; kacheln kannst?

delle77 · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Also mein Problem ist nicht, daß ich die 3 divs mit den Hintergrundgrafiken nicht zusammengeschustert bekomme, sondern, daß ich noch ein Div-Tag über alle 3 divs bekomme, in den ich dann den Text bringe (Damit der Text quasi schon in der Turmspitze anfangen könnte und auch bis zum Turmboden geht). Mit dieser Technik habe ich es aber aufgrund von Positionierungsproblemen nicht hinbekommen.

Ob das ühaupt so richtig wäre mit den Divs wäre halt meine Frage oder ob's für sowas 'ne andere Technik gibt.

Janilein2 · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Ich verstehe jetzt dein Problem nicht, ackermaennchen hat dir doch im prinzip die lösung gegeben.
Du machst 3 div's und passt das ganze (CSS) enstsprechend an.
zb. .header{background-image: url(../images/bg.gif); background-position: center; background-repeat: no-repeat; background-color:#fff; height:100px;}
für den content bei background-repeat: repeat-y; und ohne height-angabe
und den footer dann so wie den header.

Mertox · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Also mir würde da keine andere Technik für einfallen. Wenn du die Grafik im als Hintergrund einbindest, brauchst du doch garkein div mehr drüber legen, in den du den Text packst.
Wenn du doch unbedingt willst musst du halt den Divs mit den Bildern
position:absolute;
z-index:-1;
geben. Das müsste funktionieren

ackermaennchen · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

delle77 schrieb:
@ackermaennchen:
Gehen wir davon aus, es ist eine Sidebar auf der rechten Seite.
D.h. ich brauche 1 div für Topteil, 1 div für Mitte, 1 div für Unterteil und noch ein Div, der alle 3 divs umschliesst, um darin einen Text plazieren zu können???
So habe ich das probiert, nur daß der die umschliessenden Div-Tag nicht vor allen 3 Grafik-Divs sitzt.

Du sollst ja nich in dem umschließenden schreiben sondern in dem wo es rein gehört. Deswegen ist ja die Grafik als Hintergrundgrafik drin und nich als Inhaltselement.

heißt im Header kannst du problemlos ne Navi einsetzen.
Mit der Sidebar, die könntest du dann mit float einarbeiten.

Also 5 Divs insgesamt

Umschließend, darin dann Header,content,sidebar,footer.
die sidebar würde ich dann nur auf größe des contents anlegen mit atribut float left.

delle77 · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Ich drück mich scheinbar falsch oder nicht gut genug aus.

Geht mal bitte nicht von so 'nem Standard Header, Footer, Sidebar Layout aus....
Das steht schon...

Das Problem ist nach wie vor folgendes;

Der Text soll schon in der Turmspitzen anfangen können, über die Mitte hinaus in den Bodenbereich des Turmens laufen.

So wie ihr das beschreibt funktioniert das nicht, da spitze und Boden in ganz anderen Divs
sind.

Ich möchte quasi die "Grenzen" der Divs umgehen, indem ich ein alle 3 umschliessendes Div erstelle, in den dann der Text reinkommt und sich natürlich mitskaliert.
Dazu müsste diese alle umschliessende Div-Tag ausserhalb der 3 anderen Divs sein, damit die Höhenskalierung funktioniert.
Das wiederum heisst aber, daß der Text "hinter" den Hintergrundbildern der 3 Divs wäre und somit nicht sichtbar....

Ich hoffe ihr verstehts jetztz besser..

[EDIT]: So sollte der Text in der spitze schon anfangen können über die Mittengrafik bis in den Fuß gehen gehen (natürlich oben in der Spitze nicht exakt, war halt jetzt einfach ne Maske).

sokie · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

das kannst du machen indem du drei divs erstellst
in den ersten legst du das durchgehende gekachelte hintergrundbild.
da hinein das zweite div (mit der selben Breite) die bekommt das untere Hintergrundbild -diesmal mit no-repeat left bottom.
da hinein als letztes dein Div mit den Inhalten - das Hintergrundbild wird hier left top angeordnet.

HTML:

<div id="durchgehenderBG">
  <div id="bottomBG">
    <div id="inhalte">inhalte</div>
 </div>
</div>

PS: das äussere und innere div muss natürlich mindesten so hoch sein, wie der jeweilige teil hintergrundbild.

delle77 · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Ahaaaaaaaaaaa....
das hört sich doch schon mal genau nach so 'nem tricky-supderduper-trick an, den ich suche...

Ab in's Testlabor !

Danke schonmal...

[EDIT]:
Sodele, funzt. Allerdinds kann ich jetzt kein Padding mehr verwenden. Dafür muss das dann doch anders gelöst werden...

sokie · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

allerdings eignet sich dein Bild wegen der perspektive nicht zum Kacheln des Mittelteils

delle77 · 08.04.2010

AW: Mehrteiliger Hintergrund in CSS

Das war auch nur ein Beispiel was mir gerade noch einfiel. Es geht generell um etwas kompliziertere Hintergründe, die natürlich auch nicht so 'nen hohen Kontrats haben - kann ja sonst keiner was lesen....

Aber daß man kein Padding verwenden kann ist unvorteilhaft. Text Oberkante-Unterlippe am Rahmen finde ich immer sehr alá "Willkommen im Schwimmbad von Tokyo"!

sokie · 09.04.2010

AW: Mehrteiliger Hintergrund in CSS

warum kannst du kein padding verwenden?
der einzige Container, der ein padding gebrauchen könnte, wäre der inhaltscontainer. das kann man doch machen?!
(code?)

delle77 · 09.04.2010

AW: Mehrteiliger Hintergrund in CSS

Warum auch immer funzt es natürlich heute - gestern hat er den Hintergrund des Inhaltcontainers mitverschoben....

Für alle, die es auch iwann mal brauchen können - hier der Code....

Code:

<style type="text/css" id="turm_top">
#durchgehenderBG {
	background-image: url(turm_middle.jpg);
	background-repeat: repeat-y;
	width: 200px;
}
#bottomBG {
	background-image: url(turm_bottom.jpg);
	background-repeat: no-repeat;
	width: 200px;
	background-position: left bottom;
}
#inhalte {
	background-image: url(turm_top.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	width: 160px;
	text-align: center;
	font-size: 9px;
	color: #000;
	padding: 20px;
}
</style></head>

<div id="durchgehenderBG">
  <div id="bottomBG">
    <div id="inhalte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. Donec quam  felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla  consequat massa quis enim. Donec pede justo, fringilla vel, aliquet  nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,  venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.  Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean  vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat  vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,  feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.  Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.  Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.  Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper  libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit  vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante  tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.  Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.  Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis  magna. Sed consequat, leo eget bibendum sodales, augue velit cursus  nunc,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. Donec quam  felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla  consequat massa quis enim. Donec pede libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit  vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante  tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.  Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.  Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis  magna. Sed consequat, leo eget bibendum sodales, augue velit cursus  nunc,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean  commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus  et magnis dis parturient montes, nascetur ridiculus mus. Donec quam  felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla  consequat massa quis enim. Donec pede justo, fringilla vel, aliquet  nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,  venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.  Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean  vulputate eleifend tellus. Aenean ljusto, fringilla vel, aliquet  nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,  venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.  Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean  vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat  vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,  feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.  Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.  Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.  Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper  libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit  vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante  tincidunt tempus. Donec vitae sapien ut liber</div>
 </div>
</div>

sokie · 09.04.2010

AW: Mehrteiliger Hintergrund in CSS

wenn du dir den Stress mit "Verschieben durch padding" sparen willst: ein div nimmt immer die gesamte Breite des umschliessenden elements ein, also kannst du die width für alle inneren divs weglassen, nur der äussere bekommt die width: 200px.

delle77 · 09.04.2010

AW: Mehrteiliger Hintergrund in CSS

Danke Dir...

funzt bestens !!!

Code:

#durchgehenderBG {
	background-image: url(turm_middle.jpg);
	background-repeat: repeat-y;
	width: 200px;
}
#bottomBG {
	background-image: url(turm_bottom.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#inhalte {
	background-image: url(turm_top.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	text-align: center;
	font-size: 9px;
	color: #9F0;
	padding: 20px;
}