nicht angemeldet
"Flexiebler" Hintergrund in Tabellen
Hi!
Ich hab ne Tabelle, in die ich Text und bilder packen will (siehe URL). Die Hintergrund-Grafik is allerdings so lang, dass sie uch für längere Texte groß genug ist. Damit sie bei kürzeren Texten aber nicht abgeschnitten wird, müsste sie sich quasie so strecken bzw. zusammendrücken, wie eben das Tabellenfenster groß ist.
Aber wie bring is das in einen HTML Quelltext???
THX schonmal,
mark
-
Ein Ähnliches Problem habe ich selber grade bei einer meiner Arbeiten, die einfachste Lösung, die ich bisher gefunden habe sieht wie folgt aus:
Du verwendest statt einer Tablle mit allem Inhalt eine Tabelle mit 3 Zeilen und 3 Spalten. Dabei kommt der Inhalt nur in die mittlere Zelle, der gesamte Rahmen wird mit Bildern von Ecken oder Kanten deines Pergamentes (siehe deine Beispielseite) als Hintergrund gefüllt:
+-------+----------------------+---------+
| Ecke | Kante | Ecke |
| | | |
+-------+----------------------+---------+
| | | |
| Kante | Inhalt | Kante |
| | | |
| | | |
+-------+----------------------+---------+
| | | |
| Ecke | Kante | Ecke |
+-------+----------------------+---------+Das einzige Problem: an den Grenzen zwischen den Zellen können unschöne Verschiebungen zwischen den Grafiken auftreten, wenn nicht immer die vorgesehenen Bild-Bereiche aufeinander treffen (je nach Ausdehnung der Tabelle).
Vielleicht findest du da ja eine Lösung, das ist mir nämlich bisher noch nicht gelungen, da kannst du mir also noch weiter helfen!
Mit freundlichen Grüßen, Lucas
-
Ja soweit war ich auch schon...^^ hab ich bis jetzt auch immer so gemacht, dass das dann eben hintergründe mit geraden kanten waren, aber das is bei nem Pergament blöde!
Danke aber für die schnelle Antwort!!!Vielleicht hat ja noch wer ne Idee...
-
hab ich bis jetzt auch immer so gemacht, dass das dann eben hintergründe mit geraden kanten waren, aber das is bei nem Pergament blöde!
*gg* genau das ist nämlich bei mir auch das Problem (wenn wir schon mal beim Thema sind): ich gestalte zur Zeit eine Seite, deren Hintergrund genau wie bei dir Pergament sein soll, in Form eines Blattes, was auf einem Untergrund liegt und auf dem der Inhalt geschrieben steht!
Also wenn du da in näherer Zukunft zufällig eine gute Lösung für findest, dann wäre es sehr nett, wenn du dich kurz bei mir melden würdes (Mail)!
Vielen Dank und mit freundlichen Grüßen, Lucas
-
Hallo Lucas, hallo Mark
hab ich bis jetzt auch immer so gemacht, dass das dann eben hintergründe mit geraden kanten waren, aber das is bei nem Pergament blöde!
Schaut euch mal Runde und andere Ecken für skalierbare Boxen ganz genau an.
Dort steht zwar "Ecken", es ist aber nicht auf die Ecken begrenzt. Genauso gut
kann es ein passend geteiltes Hintegrundbild sein, dessen Teile sich
überlagern. Die Kanten müssen dabei nicht gerade sein, sie können auch einen
durchsichtigen Randbereich haben.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hm... also wenn ich das jetzt richtig verstehe, bringt mir das für das Pergament doch garnichts, oder? Entweder ich steh grad auf´m Schlauch, oder es giebt daéin Missverständnis...
Vielleicht kannst du ja einfach mal mein Pergament nehmen und mit Paintshop einzeichnen, wie du das aufteilen würdest (oder sogar mal eben ne CSS-Page erstellen und hochladen). Das wär echt Spitze!
Momentan bin ich nämlich der Meinung, dass es doch dann an den Übergangsstellen immernoch diese unschönen Überlappungen giebt:-----------____________
Danke auf jeden Fall für die Idee und bitte erklär das nochmal für den dummen Mark ;)
-
Wenn du Text auf die Grafik (in Papieroptik) haben möchtest dann mach das am einfachsten so:
Du machst dir 2 Layer (div).
Den einen So groß wie die grafik und grafik als Hintergrund definieren, dann hast du das so wie jetzt.
Den 2. Layer legst du einfach über die Grafik und da kommt der text rein. Dieser layer muß etwas schmaler als der erste sein (logisch, da sonst der text nicht mehr "auf das papier" passt)Dann kannst du den text beliebig auf dem "Papier" verschieben.
mfg
-
Den 2. Layer legst du einfach über die Grafik und da kommt der text rein. Dieser layer muß etwas schmaler als der erste sein (logisch, da sonst der text nicht mehr "auf das papier" passt)
Dann kannst du den text beliebig auf dem "Papier" verschieben.
Tumo, danke für deine Beteidigung, aber somit wäre der Hintergrund ja gar nicht mehr skalierbar. Gut, dann hätten wir zwar auch kein Problem mehr mit Verschiebungen an den Kanten, aber es ging uns ja grade um die Skalierbarkeit. Deshalb hilft uns das nicht unbedingt weiter. Trotzdem Danke!
-
Sorry hab mal wieder nich alles gelesen bevor ich gepostet hab ;)
Aber ich schließe mich auf jeden Fall Lucas an und danke allen die sich beteiligt haben!
Aber bitte! Wir BRAUCHEN mehr Ideen! Das muss doch irgentwie gehen!!!
Java is ne Idee, aer das kann ich nich... und wer´s deakt. hat hat ja dann auch verschissen...Naja, weil ich heute ´n Grunddesign für die Seite vorlegen soll, nehm ich vorrübergehend was anderes als hintergrund, aber wir bleiben an der Sache dran!
-
-
Ja klar. Nur ändert sich das Papier nicht dementsprechend. Das kriegen wir nur so hin, dass die Übergänge dannn icht stimmen...
Und genau DAS ist unser Porbelm ^^trotzdem danke...
-
-
Mark, so gut es Detlef G. auch gemeint hat (Danke an dieser Stelle noch mal), ich sehe unser Problem auch nicht gelöst, denn es bleiben an den Übergängen die Sprünge:
Momentan bin ich nämlich der Meinung, dass es doch dann an den Übergangsstellen immernoch diese unschönen Überlappungen giebt:
-----------____________
Die Anzahl an Sprungstellen ist auch nicht geringer geworden, es bleiben genau 4, jedoch haben wir mit dieser neuen Methode einen Nachteil: man braucht eine riesige Hintergrundgrafik für eine der Ecken.
Mit dem Tabellen-System war es zumindest möglich, den Inhalts-Teil gekachelt mit einer (relativ) kleinen Grafik zu versehen.Was wir also letztendlich brauchen, ist vermutlich ohne JavaScript nicht umzusetzen: Die Maße der Box dürfen sich nur sprunghaft ändern, also jeweils bei Überschreiten einer bestimmten Breite oder Höhe wird diese um eine Kachelbreite oder -höhe erweitert, sodass an den Übergängen immer passende Teile zusammenstoßen.
Allerdings habe ich keine Ahnung, wie das umzusetzen ist...
Und falls wirklich JavaScript verwendet wird, dann wäre es sinnvoll, auch eine Lösung für die armen Schweine anzubieten, die das deaktiviert haben...Ich glaube, wir werden noch eine Weile weiter basteln!
Wer auch immer Ideen und Anregungen hat, bitte melden!Auch im Namen von Mark schon mal vielen Dank im voraus,
mit freundlichen Grüßen, Lucas
-
Hallo Mark
Hm... also wenn ich das jetzt richtig verstehe, bringt mir das für das Pergament doch garnichts, oder? Entweder ich steh grad auf´m Schlauch, oder es giebt daéin Missverständnis...
Dein Pergament lässt sich nicht so einfach dazu umsetzen.
Ich hatte eher die Vorstellung von zerknittertem und am Rand eingerissenem
Papier. Da würde sich das relativ leicht umsetzen lassen, indem jeweils einem
Knitter folgend getrennt werden könnte.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hallo Mark
Vielleicht kannst du ja einfach mal mein Pergament nehmen und mit Paintshop einzeichnen, wie du das aufteilen würdest (oder sogar mal eben ne CSS-Page erstellen und hochladen). Das wär echt Spitze!
http://d-graff.de/demos/selfhtml/papier.html
Es ist zwar nicht absolut 100% dein Papyrus.
Du must allerdings dafür sorgen, dass es nie zu groß wird,
dann zerfällt es.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
WOW! Ok ich denke so hilft das doch weiter...
Vielen Dank! Ich werd mir das mal ansehen.
MfG,
mark-
Ok, Hab ´n Problem gefunden:
Wenn ich so ein Pergament jetzt auf meinen Hintergrund( Parkettboden) lege, hab ich natürlich den weißen Rand, den ich ja nich transperent machen kann, weil dann die sache mit dem Parkett nichmehr funtzt. Wenn ich aber das weiß bei der "papier_u_l.gif" bzw. papier_o_r.gif" durch parkett ersetze, habe ich wieder falsche Übergänge zwischen diesem und dem Parkett auf meinem Hintergrund :(
Kann man nich irgentwie die Tabelle als Objekt definieren und dort die Farbe weiß als Transperent einstufen? Dann würde das klappen.
Is aber auf jeden Fall ´n klasse Ansatz! Danke dafür!!!
-
Hallo Mark
Wenn ich so ein Pergament jetzt auf meinen Hintergrund( Parkettboden) lege, ...
Das ist klar, hattest du bisher nicht erwähnt, und deine Beispielseite hatte
ich mir nicht angesehen.Kann man nich irgentwie die Tabelle als Objekt definieren und dort die Farbe weiß als Transperent einstufen? Dann würde das klappen.
Das dürfte wohl nicht gehen.
Wie klein und wie groß müsste dein Pergament werden können?
Muss es nur in der Höhe oder auch in der Breite flexibel sein?Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Also inn der höhe reicht bei mir. Für andere Zwecke vielleciht eher nich, aber bei meinem jetztigen Projekt schon...
cu
-
Hallo,
Also inn der höhe reicht bei mir. Für andere Zwecke vielleciht eher nich, aber bei meinem jetztigen Projekt schon...
Ganz meine Meinung bzw. meine Bedürfnisse, jedoch wenn es nicht wesentlich mehr Mehraufwandt bedeutet, fände ich eine allgemeine Lösung sinnvoller, man weiss ja schliesslich nie, was noch kommen mag!
Bei mir liegt ebenfalls das Problem betr. Hintergrund vor, und bisher sind alle Weiterentwicklungen von Detlef's Lösung zumindest so ausgegangen, dass noch einige Teile einen weissen Hintergrund hatten.
Ich glaube, wir haben hier ein echt kompliziertes Problem aufgetan, mal sehen, wie es weiter gehen wird!
Mit freundlichen Grüßen, Lucas
--
selfcode: sh:( fo:| ch:? rl:° br:& n4:° ie:| va:| de:< zu:) fl:| ss:) ls:< js:|-
Hallo Lucas
Ganz meine Meinung bzw. meine Bedürfnisse, jedoch wenn es nicht wesentlich mehr Mehraufwandt bedeutet, fände ich eine allgemeine Lösung sinnvoller, man weiss ja schliesslich nie, was noch kommen mag!
Eine allgemeine Lösung würde entweder riesige Grafiken oder wesentlich
mehr Grafiken und HTML-Elemente erfordern. Außerdem ist nicht jede Lösung
für jeden Hintergrund geeignet. Auch sollte die Hintergrundgrafik gleich
für eine derartige Verwendung erstellt werden.
Vieles wäre dabei einfacher umzusetzen, wenn der IE Alphatransparenz
vernünftig unterstützen würde.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Sorry, dass ich mich so lang nich gemeldet hab! Bin an ner Grippe erkrankt :(
Naja also Detlefs Lösung gefällt mir auf jeden aöö sehr gut und ich denke das hilft doch weiter! Werd´s nochmal probieren, aber scheoint ja zu gehen *freu!*
Also VIELEN DANK!!! So haben wir sogar auf dieses Problem eine Lösung gefunden!
Bis dann,
Mark
-
-
Hallo Lucas
Ganz meine Meinung bzw. meine Bedürfnisse, jedoch wenn es nicht wesentlich mehr Mehraufwandt bedeutet, fände ich eine allgemeine Lösung sinnvoller, man weiss ja schliesslich nie, was noch kommen mag!
Bei mir liegt ebenfalls das Problem betr. Hintergrund vor, und bisher sind alle Weiterentwicklungen von Detlef's Lösung zumindest so ausgegangen, dass noch einige Teile einen weissen Hintergrund hatten.
Zwar keine wirklich allgemeine Lösung, aber eine Möglichkeit ohne Größenbeschränkung,
die auch ein Hintergrundbild erlaubt: http://d-graff.de/demos/selfhtml/papier1.htmlAuf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
Zwar keine wirklich allgemeine Lösung, aber eine Möglichkeit ohne Größenbeschränkung,
die auch ein Hintergrundbild erlaubt: http://d-graff.de/demos/selfhtml/papier1.htmlwenns die beiden die es bestellt haben schon nicht tun, dann sage ich das jetzt:
Klasse!
Ich hatte vorgestern selbst begonnen, etwas zu basteln mit sich überlagernden im Uhrzeigersinn positionierten teiltransparenten Randkacheln und ihren punktsymmetrisch gespiegelten Kopien, (gegen den Uhrzeigersinn positioniert). Deine Lösung ist aber viel eleganter und so habe ich diese jetzt übernommen.
http://www.sprachlernspiele.de/selftests/pinnwand
Gruß Gernot
-
-
-
-
-
-
-
-
-
-
-
-