3Bilder verbinden

Stell die frage neu

Habe 3 Bilder!

Kopf:
http://www.pic-upload.de/05.11.08/hu5xsa.gif

Mitte:
http://www.pic-upload.de/05.11.08/4txtw.gif

Fuß:
http://www.pic-upload.de/05.11.08/9r1gbu.gif

Soll eine Content Box werden die Höhe der Box soll Variable sein !

Später soll sie so ausehen !
http://www.pic-upload.de/05.11.08/esxukz.gif

Jetzt is wichtig das die inahlt box alle 3 Bilder umfast und nicht ne Kopf div ne Mitte Div oder ne Fus div es mus eine sein !
hoffe jemand kan das !

Wieso muss das so sein?
So würde es doch einfach und schnell gehen.

das mus halt so sein dauert jetzt zulange zu erklären aber es mus so sein ganz deutschland hat keine gute antwort man html.de is jetzt meine letzte changse

Das geht mit nur einem Element nicht, da die Grafiken als Hintergrundbild eingebunden werden müssen und ein Container kann halt nur ein Hintergrundbild haben.

doch wen man divs verschachtelt

Du wolltest doch alles in einem Element haben, das bedeutet für mich ein div, p, li, hx …, wenn du was verschachteltes hast, sind es ja wieder mehrere Elemente, dann ist das auch kein Problem.

will nur meinen inhalt über alle 3 boxen haben und das padding sich dan allen aüseren bild kanten ausrichten list haben hoffe bekommst das hin !

und das padding sich dan allen aüseren bild kanten ausrichten list haben hoffe bekommst das hin !
Also ich verstehe jetzt gar nichts.

Gruß thuemmy

Du musst die obere uns untere Grafik einfach mit dem <img tag einbinden.
Die andere Grafik musst du als background von nem div einbinden, welches zwischen den zwei Grafiken ist. Dabei musst darauf achten, dass du die richtige Breite von diesem div angibst. die Höhe kann st du auf height: auto; stellen und in diesem Div dann deinen Text einfügen.

Ich hoffe du hast das soweit verstanden, ansonsten kannst du nochmal nachfragen, das kostet nichts.

Es würde auch mit nur einem einzigen Div-Element (ohne Verschachtelung) gehen, allerdings würde das ganze Codetechnisch etwas komisch aussehen.

Man nimmt als Div-Hintergrundbild den mittleren Teil der Box.
Dann fügt man im HTML Text zwei - Elemente ein, nämlich die Kopf- und die Fußzeile.
Kopfzeile lehnt man oben an, Fußzeile unten.

Jedoch eine (meiner Meinung nach) nicht so elegante Lösung.

Sehe ich auch so, ist eher unnötige trickserei.

träum

[code]

[/code][code]

Superbox

Hier kann ein beliebiger Text stehen.

Wie viele Absätze, sind egal.

Und noch einer

[/code]Wenn Du die Bilder noch anpasst (Transparenz weg), kannst Du damit in Firefox und Opera für den oberen Teil der Box das gewünschte Ergebnis erzielen. Wie man die beiden seitlichen Striche, die sich unten zu weit fortsetzen, wegbekommt, weiß ich nicht. Nur kennt der IE das leider nicht (getestet mit Version 6). Ich glaube, er kann sogar weder mit [I]first-child[/I] bzw [I]last-child[/I] noch mit [I]content[/I] was anfangen.

Gruß
Junny

edit:

will nur meinen inhalt über alle 3 boxen haben und das padding sich dan allen aüseren bild kanten ausrichten list haben hoffe bekommst das hin !

Das sollte mit negativen margin-Werten zu machen sein.

Wenn der IE etwas nicht kann, sollte man es auch nicht verwenden (ist schließlich - noch - der meist genutzte Browser).

Zieh halt die Höhe der Kopf- und Fußzeile vom padding ab.
Du wirst nicht über diese Bilder hinaus schreiben können, es sei denn, Du legst über (z-index) das Bild (bestehend aus drei divs) noch ein Element, in das der Inhalt kommt.

Egal in welchen forum ich frage keiner hat ne lösung omg was blos los kan keiner css macht doch alles keinen spaß ich will doch nur ne box aus bildern die rund is variable in der höhe würde schon reichen und das man einen hinhalt hat womit man sowoll auf bild kopf und auf bild inhalt und auf bild fus schreiben kan !

lg:hardschocker

Und es ist dir noch nicht in den Sinn gekommen, dass das was du vor hast, so nicht umzusetzen ist?

Einen Ansatz hat dir Efchen doch gegeben, probier es aus.

okay okay okay:-D jetzt brauch ich aber trozdem mal euere hilfe wie mach ich das den das die 3zusammen gehöhren und das kopf bist eine extra inhalt hat und die mitte einen inhalt und fuß einen so können das doch die meisten hoffe jemand kan mir da ein brower optminiertes beispiel geben

lg

Wenn Du mal etwas mehr Selbstinitiative zeigen würdest, könntest Du die Hilfsbereitschaft sicher steigern. Einfach nur rumzumeckern und auf eine fertige Lösung zum Kopieren und Einfügen zu warten stößt bei den meisten zurecht auf taube Ohren.

Nachdem ich gelesen habe, dass Du Text auch über den Bildern von Kopf und Fuß haben willst, habe ich mir nochmal Gedanken gemacht und mit etwas Hilfe eine ganz gute Lösung gefunden. Dein Glück ist, dass ich mich persönlich für dieses Thema interessiere, da ich solche Boxen selber gerne mal einsetzen möchte.

Hier die Herangehensweise:
1. Zuerst brauchst Du eine leere Seite mit Doctype, head, title, body und allem was dazugehört.
2. Dann kannst Du Deinen Inhalt schreiben und mit html auszeichnen. Der Inhalt, der später in die Box soll, wird mit einem div gruppiert. Das sieht erstmal so aus:
[php]

Superbox

Hier kann ein beliebiger Text stehen.

Wie viele Absätze, sind egal.

Bilder gingen auch.

Und noch einer

[/php][B]3.[/B] Jetzt formatierst Du das Aussehen Deiner Seite (insbesondere der Box) mithilfe von CSS. Im Idealfall muss der Inhalt ([I]html[/I]-Code) dafür gar nicht mehr verändert werden. [B]a)[/B] Die Box [B]div.superbox[/B] braucht nach Deinen Vorstellungen eine [B]feste Breite in px[/B] sowie ein [B]Hintergrundbild[/B], das in [B]y-Richtung wiederholt[/B] wird und eine [B]Hintergrundfarbe[/B] sowie eine [B]Textfarbe[/B], um die Lesbarkeit von Texten zu garantieren. [B]b)[/B] Außerdem möchtest Du, dass ganz oben in der Box ein Hintergrundbild den Text unterlegt. Da die Box bereits ein Hintergrundbild hat, musst Du das Hintergrundbild für oben dem [B]ersten beliebigen Kindelement von div.superbox[/B] zuweisen. Der CSS-Selektor dafür lautet [code]div.superbox *:first-child[/code]. Nach dem Selektieren weist Du diesem das [B]Hintergrundbild[/B] zu, welches [B]nicht wiederholt[/B] wird und [B]oben[/B] positioniert werden soll. Hier ergibt sich übrigens eine kleine Einschränkung für den Inhalt: Das erste Kindelement der Box darf z.B. kein Bild sein. Bei Nicht-Blockelementen gäbe es noch das Problem, dass sie nicht über die gesamte Breite gehen und das Hintergrundbild abgeschnitten würde. Letzteres ließe sich allerdings mit CSS beheben. [B]c)[/B] Etwas Ähnliches machst Du jetzt noch für das [B]letzte beliebige Kindelement von div.superbox[/B]. Mit etwas Englischkenntnis kannst Du Dir den Selektor selber herleiten. Dass dieses ein ebenfalls [B]nicht wiederholtes[/B] [B]Hintergrundbild[/B] braucht, das [B]unten[/B] positioniert wird, kannst Du Dir sicher auch schon denken.

Soweit die Theorie. Nun schauen wir, ob das Ergebnis in einem Browser unseren Erwartungen entspricht.

d) Beim Betrachten (z.B. mit Firefox) sieht es schon ganz gut aus.
Nur dass die Ränder links und rechts nicht von den Kopf- und Fußbildern verdeckt werden, stört. Das liegt daran, dass Du Deinen *.gif-Dateien einen transparenten Hintergrund gegeben hast. Wenn man das noch fix ändert, passts.

Jetzt kommt der meist nervenaufreibendste Teil: Das Beheben von Fehlern im Internet Explorer.

e) Da der IE :first-child und :****-child nicht kennt, siehst Du nur Deine Box mit dem einen Hintergrundbild (Rahmen links und rechts). Ernüchterung. Abhilfe schaffen hier sogenannte Conditional Comments zusammen mit IE-spezifischen expression(…)-Werten für CSS-Eigenschaften. Damit die funktionieren, muss Javascript eingeschaltet sein. Ein Nutzer des Internet Explorers, der kein Javascript aktiviert hat, sieht auch mit diesem Workaround nur den Rahmen rechts und links. Da die Kombination IE ohne Javascript recht selten vorkommt und vor allem die Nutzbarkeit der Seite in keinster Weise eingeschränkt wird, ist das nicht tragisch.
Der Code für diesen Fix lautet

[code]<!–-[if IE]>

div.superbox * { background: expression((this.previousSibling==null)?"hier Wert(e) für [I]background[/I] beim [B]ersten[/B] Kindelement von div.superbox eintragen":((this.nextSibling==null)?"hier Wert(e) für Background beim [B]letzten[/B] Kindelement von div.superbox eintragen":"none")); }

<![endif]-–>[/code]Ich hoffe, ich konnte Dir einen guten Leitfaden geben, anhand dessen Du Dein Ziel erreichen kannst. Noch mehr Code werde ich Dir ohne sichtbaren Einsatz Deinerseits nicht liefern. Wenn Du aber noch konkrete Fragen hast, dann stell sie einfach.

Viel Erfolg und Gruß
Junny