Jeder kennt für horizontale Linien - aber wie bekommt man eine oder mehrere senkrechte Linien zur erzeugung einer Skala?
Ich möchte ein horizontales Balkendiagramm (wie z.B Microsoft Projekt) mit senkrechten Hilfslinien im Hintergrund erzeugen.
Danke für jeden Vorschlag
Martin
Hallo Martin,
es wäre natürlich „supertoll“, wenn man synonym für
einfach eingeben könnte, gelle?! (Aber zumindest
müsste man dann die Höhe der Linie einstellen können.)
So wie sich Deine Aufgabenstellung anhört, wirst Du das
nur durch eine Grafik lösen können.
Am besten gehst Du so vor, dass Du in Deiner
Präsentationssoftware (MS Project)
die Grafik so baust, wie Du sie haben willst.
Dann, und so würde ich höchstpersönlich vorgehen,
macht man davon einen Screenshot (Druck-Taste)
bei möglichst grosser Arbeitsfläche - oder Druckvorschau - und
fügt die Zwischenablage in einem Photo-/Bitmap-Editor
ein, speichert möglichst gut komprimiert als JPEG (bei
vielen Farben) oder als GIF (bei bis zu 256 Farben) ab.
Die Grösse der Datei in Bytes sollte nicht über 35 kB liegen,
besser kleiner (16 kB), zumal sicher noch andere Elemente
auf der HTML-Seite geladen werden.
Vielleicht kannst Du auch eine Export-Funktion von
MS Project verwenden. Hat aber u.U. Mircosoft-typische
Nachteile, auf die ich hier nicht näher eingehen möchte
(nur auf Nachfrage.)
Die fertige Grafik platzierst Du entweder
als Hintergrund oder besser in einem -Container,
den Du exakt positionierst.
In einen zweiten -Container, der danach erst
geladen wird, positionierst Du die Text-Inhalte usw.
Ein ganz einfaches Beispiel für einen DIV-Container
mit Hintergrundbild fällt mir auch noch ein:
Beispiel für Martin
mit Hintergrundbild im Container
Das hat links 100 Pixel und nach oben 10% Rand, der
Innenrand ist auf 4 Pixel eingestellt, dass der
Text nicht so „dran-klatscht“. Der Container muss aber
in diesem Fall exakt die Bildgrösse haben, da sonst
das Bild wiederholt wird. (Oh, Gott, wie sagt man’s
auf CSS-stylisch, dass der Hintergrund nicht wiederholt
werden soll???!!!)
Wenn der Pfad zum Hintergrundbild anders lautet, dann
setze ihn in ‚einfache Anführungszeichen‘.
... background:url('\source\hintergrundbild.gif'); ...
Dann x viel Spass beim Bauen, freut mich, x die Seite zu sehen,
wenn sie fertig ist…
(Bei Fragen bitte Mail oder Posting.)
Grüsse,
DannyFox64
[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]
Hi Martin
Du könntest natürlich auch ein gif anfertigen das z.B. 10 Pixel Breit und 1 Pixel Hoch ist. Alle Pixel Transparent oder wie auch immer und das Pixel ganz rechts in schwarz bzw. in der gewünschten Linienfarbe.
Wenn Du das nun in Deine td’s oder im body als background=„vertikale_linie.gif“ einfügst, hast Du’s längsgestreift.
CU Fr@nkie
The Truth Is Out There … ;o)
ok, das mit der Hintergrundgrafik (.gif) ist nicht realisierbar, da ich mit meiner Anwendung leider NUR EINE einzige Datei ausgeben kann.
(daran bin ich schon mal gescheitert, aber das will ich hier nicht vertiefen)
ich hab mal mit einem linken rahmen einer sektion gespielt - das könnte die Lösung sein wenn nur wieder mal Netscape und Internetexplorer6 das gleiche machen würden.
aber seht mal selbst:
Das Beispiel unten sieht nur in Netscape richtig aus - mach ich was falsch?
Die Balken sind im IE viel zu dick und die Länge bei schmalem Fenster ist auch falsch.
-------------------->>---------------------
position<!–#box1 { position:absolute; top:10px; height: 100%; background: #ffffff none repeat scroll 0% 50%;z-index:1; border-left-width:1px; border-right-width:1px; border-left-style:solid; border-right-style:solid; border-color:grey;}#box { position:absolute; height:2; background: black none repeat scroll 0% 50%; z-index:2; font-size:small}#bo { position:absolute; height:6; width: 2px; background: black none repeat scroll 0% 50%;z-index:3}–> text bla
20-30 mit Markierung bei 38.5%
30-20
40-10
10-80 Abstand links und rechts vergleichen
50%
20%
10
5
1
ich hab mal mit einem linken rahmen einer sektion
gespielt - das könnte die Lösung sein wenn nur wieder mal
Netscape und Internetexplorer6 das gleiche machen würden.aber seht mal selbst:
Das Beispiel unten sieht nur in Netscape richtig aus - mach
ich was falsch?
Die Balken sind im IE viel zu dick und die Länge bei schmalem
Fenster ist auch falsch.
Hallo Martin,
du musst die Kennungen der einzelnen DIV-Container („id=“) unterscheiden, dann sieht’s auch im IE schon ganz gut aus (neues Listing unten):
Schau x unter
...einfach ändern z.B. in **box11, box12, box13 und box21, box22 usw.,** dann kommt der IE nicht durcheinander. Solltest Du dann das Layout per Stylesheet bestimmen wollen, dann eben:
#box11, #box12, #box13... { height:20px; }
#box11 { position:absolute; top:10px; left:.... }
#box12, #box13... { left:... }
So kannst Du noch 'ne ganze Menge Quelltext einsparen...
--- Listing ---
\<!--#box1 { position:absolute; top:10px; height: 100%; background: #ffffff none repeat scroll 0% 50%;z-index:1; border-left-width:1px; border-right-width:1px; border-left-style:solid; border-right-style:solid; border-color:grey;}#box { position:absolute; height:2; background: black none repeat scroll 0% 50%; z-index:2; font-size:small}#bo { position:absolute; height:6; width: 2px; background: black none repeat scroll 0% 50%;z-index:3}--\> text bla
20-30 mit Markierung bei 38.5%
30-20
40-10
10-80 Abstand links und rechts
vergleichen
50%
20%
10
5
1