Schräge Sache

[fyp]

Liebe Blockfreunde,

Habe perfekt funktionierende scrollbare DIVs und bin ganz happy damit.
Nun würde ich mir wünschen dass sie unten und oben nicht ganz horizontal verschwinden, sondern in einer Schräge.
Kann ich irgendwie ein solches DIV mit vier Punkten definieren?
Also zb. dass die obere rechte Ecke bei 10px vom oberen Rand und die linke obere Ecke bei 20px vom oberen Rand liegt. Know what I mean?

Sonst kann ich gerne eine Bilddatei herstellen die auf den Hintergrund passt, die cachiert, aber wie ich die einbinde ist mir grad nicht klar.

Danke für Ratschläge und Grüße schön,
fyp

EDIT:
Gut, mit Grafiken habe ich relativ problemlos etwas brauchbares erreicht. Doch leider cachiert die Grafik nicht die Scrollleiste... Hässlich.
Ich kann wohl nicht erzwingen, dass diese kleiner ist als das Textfeld hoch ist, also auf der Suche nach Alternative.
Hab so ein abgefreaktes Codewunder gefunden das mit DHTML und Js scrollleisten simuliert, sogar mit Mausradfunktionabilität, doch leider überfordert mich das Einbinden völlig.
http://dhtml.dieneuerepublik.de/scrollbar/index.html
Hat jemand wass einfacheres zufällig zur Hand? Wär cool.
Danke,
fyp

[Maekkez]

Wär ganz schön zu wissen was dich genau überfordert? ansonsten kannst du es mit einem overflow und normalem Balken design realisieren... problem daran ist nur das es im mozilla z.b nicht läuft

[fyp]

Also mein Problem beim Einbinden dieses 20 A4 Seiten Codes ist die irre Menge an Variablen und meine Unintelligenz darin den Überblick zu behalten, geschweige denn genau zu verstehen was all diese Variablen bestimmen.
Das Problem mit dem overflow, ist dass der Scrollbalken sich nicht von Bildern verstecken lässt.
Kannst ja anschauen wie das aussieht: www.filmkraft.net/yannis/spielkindweiss

Danke für die Unterstützung,
fyp

EDIT: Und die Balken wenn man nicht mit dem IE rumschwuchteln will und kann (Mac & Firefox) einfach schwer in ein laufendes Design einzubinden sind.

[Maekkez]

Kurze erklaerungen falls dir die schonmal helfen wenn nicht... ich bin in ca 70min zuhause dann kann ich es mal genau ausprobieren

<div id="container">
			<div id="scrollinhalt">
				<p>Dies ist der Inhalt der ersten BOX hab ihn nur gekürzt</p>		
			</div>

			<div id="scrollbarbox">
				<img src="grafiken/v_pfeil_a.png" id="scrollpfeiloben" alt="" width="10" height="10"/>
				<div id="scrolltrack">
					<img src="grafiken/v_greifer.png" id="scrollgreifer" alt="" width="10" height="20"/>
				</div>
				<img src="grafiken/v_pfeil_b.png" id="scrollpfeilunten" alt="" width="10" height="10"/>
				<img src="grafiken/v_top_jump.png" id="springpfeil" alt="" width="10" height="10"/>
			</div>
		</div>

So kommt der code ja auch in dem Beispiel vor kurze erklärungen:
<div id="container"> = Fasst den ganzen kram ein also den Inhalt und die Scrollbar.

<div id="scrollinhalt"> = ist einfach nur der Inhalt
<div id="scrollbarbox"> = Umschliesst die elemente der Scrollbar
<div id="scrolltrack"> = definiert die scrollbar...

Ich glaube das einfachste für dich ist dir das ganze ohne javascript vorzustellen... dann solltest du damit kein problem haben... wie gesagt von zuhause kann ich dir besser helfen falls was ist

...


Im folgenden werden die CSS Klassen in das Javascript gebunden oder so ähnlich :P (Du musst wissen bin selber absoluter anfänger verstehe wir es funzt aber kann dir nicht genau Theoretisch beschreiben wie)

TMErstelleEvent(window,'load',function() {
var scroller1 = new TMScrollLeiste(
'container',
'scrollinhalt',
'scrollbarbox',
'scrolltrack',
'scrollgreifer',
'scrollpfeiloben',
'scrollpfeilunten',
'springpfeil',
'vertikal',
15,
5,
10,
'grafiken/v_greifer.png',
'grafiken/v_greifer_o.png',
'grafiken/v_pfeil_a.png',
'grafiken/v_pfeil_a_o.png',
'grafiken/v_pfeil_b.png',
'grafiken/v_pfeil_b_o.png',
'grafiken/v_top_jump.png',
'grafiken/v_top_jump_o.png'
);

[Boris]

Hat jemand wass einfacheres zufällig zur Hand? Wär cool.

Klar, alles sogar fix und fertig:
http://kelvinluck.com/assets/jquery/...crollPane.html

Damit kannst du deine Scrollleisten komplett und beliebig gestalten und es frisst auch jeder Browser.

[Maekkez]

So nochmal ein wenig reingeschaut
Innerhalb dieses block kannst du dir soviele Scrollbare Boxen bauen wie du willst ein beispiel mal kurz

TMErstelleEvent(window,'load',function() { 
var NeueScrollBox = new TMScrollLeiste( parameter von unten );
});

Die Pflicht Parameter kannst du ja größten teils in einer Externen CSS Erstellen
Pflicht-Parameter (in dieser Reihenfolge):
- Container-ID
- Inhalt-ID
- Scrollbar-Box-ID
- Scrolltrack-ID
- Greifer-ID
- Scrollpfeil-ID: oben / links *
- Scrollpfeil-ID: unten / rechts *
- Nach-Oben-Springpfeil-ID
- 'vertikal' / 'horizontal' *
- Scroll-Timeout **
- Scroll-Speed **
- Mausrad-Speed **

Optionale zusaetzliche Parameter (in dieser Reihenfolge):
(Werden benoetigt, falls bei Bedienung der Scrollbar-Elemente die jeweilige Grafik ausgetauscht werden soll.)
- Greifer-Grafik
- Greifer-Grafik (mousedown)
- Pfeil-Grafik: oben / links *
- Pfeil-Grafik (mousedown): oben / links *
- Pfeil-Grafik: unten / rechts *
- Pfeil-Grafik (mousedown): unten / rechts *
- Nach-Oben-Springpfeil-Grafik
- Nach-Oben-Springpfeil-Grafik (mousedown)

[fyp]

Merci Maekkez,, aber das Scrollpane ist schon übersichtlicher gestaltet. Bin zwar noch nicht weit scheitere an der Anzeige der Scrollbalken (die Tauchen ein fach nicht auf, verstehe ich nicht, noch), aber mit dem Mausrad funkt das ganz toll...
Aber weil ich schon am lamentieren bin folgende Frage:
per z-index habe ich den Fliesstext unter ein Bild verschwinden lassen. Ein Teil des Bildes ist aber Durchsichtig (gewollt) und der Text schimmert drunter perfekt, doch wenn ich drüber gehe, ist mir sowohl das Markieren als auch das Mausradscrollen unmöglich. Kann ich es irgendwie schaffen, dass der Text zwar unter dem Bild liegt, aber trotzdem steuerbar?
Danke für die Aufmerksamkeit und beste Grüße aus dem nächtlichem Süden,
fyp

[Maekkez]

Würde sagen das du das wohl nicht hinbekommst da ja nur ein objekt oben liegen kann.. könntest höchstens den text wiederum in verschiedene bereiche trennen ein teil der unter dem bild liegt und einer der drüber liegt ansonsten sehe ich da keine möglichkeit "vernünftig unter das bild zu kommen... Könntest natürlich auch den teil der durchsichtig sein soll ausschneiden und dann "Hinter" den Text einbinden so das es trotzdem aussieht wie ein bild

[fyp]

Hab da mal was bei Illustrator entdeckt - habs grad nicht vor mir, ist nur so ein Geistesblitz - da konnte man eine png oder ähnliches mit CSS Ebenen oder ähnliches exportieren. Was ist das?
Danke euch wiedermal für eure Fürsorge für einen Übermüdeten,
fyp