Druckversion des Themas

Geschrieben von: lain 05.05.2004 - 22:44

Hallo ,

ich habe ein Bild so ausgeschnitten , dass es einen transparenten Hintergrund hat . Aber wenn ich es als img in meine Seite einfüge , ist das weiße Rechteck wieder da !

Hoffe auf baldigen Rat..

Geschrieben von: SteffenG 06.05.2004 - 0:29

Hallo,

hast du das Bild als gif oder als png abgespeichert? Oder als jpg?
Funktioniert's nur im IE nicht, oder auch in vernünftigen Browsern?

Erfahrungsgemäß liegt das Problem eher am Bildbearbeitungsprogramm - bzw. einer falschen Verwendung ebendessen (oder an IE und alpha-Transparenz ). Was verwendest du denn für einen Bildeditor und wie gehst du beim Transparentmachen vor?


Grüße
Steffen

Geschrieben von: lain 07.05.2004 - 21:26

Hi ^^


das Bild habe ich als jpg abgespeichert .
Ich habe nur den IE installiert.
Ich hab das Bild in Photoshop ausgeschnitten und danach nochmal in Pain Shop Pro versucht.
Ich mache die Bilder mit dem Lasso transparent , ich wähle Stellen aus und schneide sie dann anschließend aus. Danach markiere ich und kopiere das neue Bild und füge es in einem neuen Fenster in dem Programm zur Probe ein . Das Bild erscheint so wie ich es haben will , mit einem transparenten Hintergrund . Du weißt ja , dieser karrierte Hintergrund. Dann speicher ich das als jpg ab , füge das in HTML ein und muss bei der Vorschau mit ansehen , wie das weiße Rechteck plötzlich wieder da ist.
Was genau meinst du mit Alpha-Transparenz ?
Ich erwähne hier lieber noch , dass ich mit der Funktion filter:alpha die Verschmelzung der Bilder mit dem Hintergrund eingestellt habe . Ich hoffe ich muss es nicht entfernen , weil das nämlich echt gut aussieht !

Geschrieben von: Apeman 07.05.2004 - 21:31

Transparenten Hintergrund kenne ich bei jpg gar nicht, nur bei GIF. Vielleicht liegt darin dein Problem. Speicher es als GIF.

Geschrieben von: lain 07.05.2004 - 21:57

Hab ich versucht . Geht nicht . Da passiert das gleiche.

Trotzdem danke ^^

Geschrieben von: amethyst 07.05.2004 - 23:24

Hallo lain,
versuch mal ein anderes grafikprogramm oder speicher es als png.

Gruß Amethyst

Geschrieben von: Conny 08.05.2004 - 8:40

Hi,
Du solltest es nicht nur 'umbenennen' , sondern als GIF im Grafikprogramm öffnen, dann die Transparenz neu bestimmen, abspeichern und dann erst sollte es gehen!
Wenn es danach immer noch nicht klappt, taugt das Grafikprogramm nicht, oder Du hast es nicht richtig konfiguriert .

cu
Conny

Geschrieben von: SteffenG 08.05.2004 - 8:46

Hallo lain,

Auf dieser http://www.webopedia.com/DidYouKnow/Internet/2002/JPG_GIF_PNG.asp wird kurz auf die Unterschiede zwischen jpg, png und gif eingegangen.

JPG unterstützt Transparenz nicht. PNG unterstützt alpha-Transparenz, was bedeutet, dass es Abstufungen in der Durchsichtigkeit erlaubt (ähnlich wie IE, wenn man den alpha-filter verwendet). GIF unterstützt nur binäre Transparenz, also entweder durchsichtig oder nicht.

Mit Photoshop kenne ich mich nicht aus. Aber ich verwende GIMP, und zumindest da ist es so, dass man einen alpha-Layer für's Bild erstellen muss, wenn man Teile davon durchsichtig machen will. Wenn man keinen solchen Layer erstellt, wird das Bild in Gimp zwar durchsichtig, aber beim Speichern geht diese Durchsichtigkeit wieder verloren. Schau also mal nach einer Option für das Bild einen solchen alpha-Layer einzurichten und mache danach dann die gewünschten Teile durchsichtig.

Wenn du mit filter:alpha die Funktion meinst, die nur der IE kann, dann würde ich meinen, dass das wieder raus muss. Ist sch..... Sachen zu verwenden, die nur ein Browser kann ist schlechter Programmierstil und heutzutage absolut uncool.

Mein Lösungsvorschlage wäre, das Bild als PNG mit alpha-Transparenz zu speichern und für den bescheuerten IE einen Hack der Form

zu verwenden.
Weil dann haben auch vernünftige Browser die Möglichkeit das Bild transparent darzustellen. Sie ignorieren den filter und zeigen das PNG direkt an.


schöne Grüße
Steffen

Geschrieben von: amethyst 08.05.2004 - 13:01

Hallo Steffen,
ich glaube, Dein Vorschlag löst ein Problem, mit dem ich mich grad rumschlage.

Kannst Du mir sagen wie und wo ich diesen "Hack" einbauen muss? Im CSS oder in der Seite bei jedem Bild oder geht das mit Platzhaltern oder geht es nur mit php?

Gruß Uschi

Geschrieben von: SteffenG 08.05.2004 - 14:37

Hallo Uschi,

das kommt ins CSS. Bei mir sieht das z.B. so aus:

Die zweite Regel wird vom IE ignoriert, weil der ja nicht mit Attribut-Selektoren umgehen kann.
In diesem Beispiel ging es konkret darum, in einer Navigationsleiste einen halbtransparenten Hintergrund zu bewerkstelligen. bt.png ist also eine weiße Fläche, die halbdurchsichtig ist. Mit der Filterregel checkt das auch der IE.


schöne Grüße
Steffen

Geschrieben von: amethyst 08.05.2004 - 14:47

Danke Steffen,

das hilft, was mich aber irritiert sind die Hochkommas beim scr=

Deswegen noch mal die Frage, sind die Hochkommas relevant oder gehen da auch normale Anführungszeichen?

Uschi

Geschrieben von: lain 08.05.2004 - 20:55

Hallo Steffen ,


Ich verstehe ehrlichgesagt noch nicht ganz , wo ich diesen "Hack" genau einbauen muss in CSS . Über Body {} oder wo sonst ? Ich kenne mich mit solchen Codes gar nicht aus.

Was soll an dem Style so uncool sein ? Das sieht doch total gut aus . Was genau meinst du mit uncool ? Das ist schon sch**sse etwas zu verwenden , welches nur ein einziger Explorer anzeigen kann , aber mir geht es um das Design.

Geschrieben von: Conny 08.05.2004 - 21:30

Hi Lain,
es ist uncool wenn Du in Deiner Seite irgendwelcher Gimmicks packst, die nur vom IE gezeigt werden können, User die mit anderen Browser unterwegs sind, haben eben nichts davon, sowas ist nicht nett, also uncool...
(ein Beispiel wäre gefärbte Scrollbars oder überblendungen beim Seitenwechsel)

Der Code-einbau sollte in einer CSS-Datei erfolgen, also eine Datei mit Endung *.CSS und nicht *.HTM .

Klar, man kann es natürlich auch auf der HTM-Seite unterbringen, dann aber im HEAD-Bereich zwischen <STYLE TYPE="text/css"> <!--und--> </STYLE>.

cu
Conny

Geschrieben von: Apeman 08.05.2004 - 22:53

Sehr schlechtes Beispiel. Warum soll man die Scrollbars nicht entsprechend der Farbgebung der Website einfärben, wenn immerhin noch weit über 90% der User im WWW den MSIE nutzen? Nur weil 10% dann davon nichts haben?

Da sag ich nur, ihr Problem. Ich favorisiere auch den Firefox der das nicht anzeigt, habs aber dennoch drin.

Alle MSIE-User könnens genießen. Was ist dagegen zu sagen?

Bitte, kommt von eurem hohen "Ross" herunter auf den Boden der Tatsachen.

Geschrieben von: Terry 09.05.2004 - 0:24

Sowohl Photoshop als auch PaintShopPro machen problemlos gifs mit transparenten Hintergründen. In PS einfach so: bei Datei - für Web speichern kommst Du in einen ganz neuen Dialog. Dort rechts kannst Du so allerlei einstellen. Halt gif auswählen und darunter transparenter Hintergrund anklicken. Dann bekommt das Bild auch einen transparenten Hintergrund.

Aber der Nachteil von gif ist halt: nur maximal 256 Farben, kein Halbtransparenz möglich. Für Fotos, Bilder mit Verläufen etc. also nicht geeignet. Da ist es besser, den Webhintergrund (Farbe, Muster) gleich als Hintergrundebene einzubauen und dann das Bild samt Hintergrund als jpg zu speichern, weil in dem Fall die Qualität und die Komprimierung einfach besser wird. Und so kannst Du auch weiche Übergänge erreichen z.B.

Bei PSP geht es ähnlich, hatte mir da mal aus Neugierde die Probeversion geladen. Dort über Datei-Export-gif,jpg oder png-Optimierung auswählen. PNG geht mit Steffens Trick natürlich auch - ansonsten zeigt es der IE eben nicht richtig an, sondern baut einen weißen Hintergrund ein.

Zu den Browser-Effekten: solange man weiß, was man da macht, und darauf achtet, dass es in jedem Browser vernünftig aussieht (nicht zwingend gleich) - kann man auch Spezialeffekte einbauen (überlege gerade, ob ich beim Relaunch meiner anderen HP mal Special-Effects für Mozilla&Co einbaue - natürlich so, dass die Page auch mit dem IE gut anzugucken ist). Sowas finde ich persönlich legitim.

Grüße, Terry

Geschrieben von: SteffenG 09.05.2004 - 8:38

Hallo Uschi,

für die Hockommas dürfte es egal sein, welche du nimmst. Kannst du ja auch einfach ausprobieren... Ich vermute, es ist wie in anderem CSS auch, wo es egal ist, welche man verwendet, sie müssen nur korrekt geschachtelt sein.


@lain: In meinem Beispiel habe ich das Bild als Hintergrund für ein li-Element verwendet. Ich weiss nicht, was du machen willst, aber schätzungsweise musst du den Code im CSS für ein img-Element einbauen.

Alles, was nicht standardkonform, also proprietär ist, ist uncool. Wenn etwas standardkonform ist, aber von einigen Browsern nicht unterstützt wird, habe ich meistens kein Problem damit, es trotzdem zu verwenden, wenn das Ergebnis auf diesen anderen Browsern trotzdem gut aussieht. Aber Zeugs zu verwenden, dass nur wenige Browser können (oder nur ein Browser), weil sie sich auf was geeinigt haben (oder der Marktdruck recht groß war), was nicht dem Standard entspricht, das ist uncool.
Meine Seiten schauen auf allen Browsern (sehr) ähnlich aus und ich verwende nix, das nicht jeder Browser können kann. Das filter-Ding ist das erste und bisher einzige Mal, dass ich sowas überhaupt einbaue. War auch eher aus technischem Interesse.
Meiner Meinung nach sollte man nicht zu sehr auf den IE eingehen, weil er schlicht schlecht ist. Naja, ok, lassen wird das...

BTW es ist mir gerade mal sch.... egal, welche Farbe meine Scrollbalken haben.



schöne Grüße
Steffen

Geschrieben von: i.b.g 09.05.2004 - 10:05

Hallo,

Darum geht es gar nicht.



Ich meine auch das, dass der springende Punkt ist. Wozu gibt es Standards? Nur weil sich ein Marktführer, der die Standards ebenfalls anerkannt hat, aufschwingt den Standard zu erweitern obwohl er diesen noch nicht einmal vollständig umgesetzt hat, muss man diese Erweiterungen ja nicht unbedingt nutzen. Und wenn man es denn einsetzt, dann bitte so, das die "Kleinen" trotzdem eine vernünftig nutzbare Webseite vorfinden. Sicher, man kann dann bisweilen - so wie von Steffen gezeigt - auch Workarounds einsetzen. Manchmal muss es sogar sein, um überhaupt einen Standard zu realisieren, und dann nutzt man Bugs aus, damit es wenigstens wie der Standard aussieht.

Doch wenn es anders wäre, dann wäre es ja langweilig.

Geschrieben von: Conny 09.05.2004 - 11:18

Hi Apeman,

DAS halte ich für ausgesprochen uncool, ich meine wo liegt denn da -für Dich- die Grenze?
Es surfen beispielsweise auch viele Sehbehinderte im Netz, viele Seiten werden sie nicht 'sehen' bzw. lesen können, schlicht wegen der schlechte machart!
Auch 'ihr problem?'

So eine Einstellung halte ich persönlich für , sagen wir mal: 'wenig sozial'.

Sicher, ist meiner Meinung nicht das Maß aller Dinge, aber Du hast vielleicht mal eine Minute Zeit darüber nachzudenken...

Nachtrag: mit 'hohen Rößern' hat das nun wirklich nichts zu tun, mir scheint, Du bist manchmal etwas voreilig, oder hast nicht ganz begriffen worum es geht...

cu
Conny

Geschrieben von: amethyst 09.05.2004 - 12:45

Hallo Ihr Lieben,
es ging hier um transparente Bilder, nur noch mal zur Erinnerung ;-)) Die Tipps waren klasse und es wäre schade, wenn die jetzt überlesen würde, weil mal wieder jemand meinte, seinen Frust auf Gott und die Welt hier ablassen zu müssen.

Die leidige Browser-Diskussion (wir alle kämpfen mit den verschiedenen Zickigkeiten der Browser) gehört m.e. in Talktime und da können wir uns dann gerne gegenseitig die "Köpfe einschlagen" ;-).

Achja Apeman, das höchste Glück dieser Erde liegt auf dem Rücken der Pferde, soll mal ein ganz Großer gesagt haben ;-))

Gruß Uschi

Geschrieben von: Apeman 09.05.2004 - 19:26

Nun, ohne dir nahe treten zu wollen ist es völlig irrelevant für mich was andere als uncool finden. Deine Frage nach der Grenze ist ganz leicht zu beantworten und wurde von i.b.g schon beantwortet:

Das sehe ich genauso. Nichts spricht dagegen solange Sehbehinderte damit keine Probleme haben und andere Browser (ich nutze Firefox) das keine Probleme bereitet, was es definitiv nicht macht. Warum sollte ich die über 90% von Usern also nicht bedienen?

Wie schon erwähnt, weicht aber vom Thema ab.

Uschi schrieb:


Nur weil es so ist, muss ich damit nicht einverstanden sein, oder?

Geschrieben von: Netizen 10.05.2004 - 17:09

Nein, sondern weil Scrollbars nicht mehr zur Webseite gehören. Sie sind Teil der Benutzeroberfläche des Besuchers und von solchen sollte man tunlichst die Finger lassen. Dazu zählen insbesondere auch Statusleisten, Menüleisten und Kontextmenüs, da hat der Webautor nix dran zu drehen. Es sei denn, er will seine Besucher verunsichern. Otto-Normalsurfer erwartet seine Benutzeroberfläche in gewohnter Form und Farbe, Manipulationen daran (in aktuellen Browsern ohnehin nicht mehr wirklich machbar) beeinträchtigen die Benutzbarkeit der Seite.

Abgesehen davon sind gefärbte Scrollbars nur mit nichtstandardisierten, M$-spezifischen Erweiterungen zu realisieren. Mit CSS hat das nichts mehr zu tun.


Ich reite nicht, ich gehe zu Fuß oder nutze den ÖPNV.

Gruß
n!

Geschrieben von: Apeman 10.05.2004 - 22:09

Ich akzeptiere deine Meinung, teile sie aber nur zum Teil. Es wurde gefragt wieweit man geht. Für mich ist die akzeptable Grenze genau die Scrollbars. Ich stimme mit dir überein von Menüleisten, Satusbar die Finger zu lassen. Nicht aber bei den Scrollbars.

Wenn jemand ins Internet geht, hat er einfach nicht mehr seinen gewohnten Desktop vor sich. Es überfallen ihn hunderte verschiedener Designs, die nichts mit seinen Desktopeinstellungen mehr gemein haben. Wenn ich also eine Webseite, sagen wir in Pechschwarz hätte, spricht aus meiner Sicht nichts dagegen, wenn ich die Scrollbars entsprechend dunkel gestalte, so das sie zum Gesamterscheinungsbild passen. Solange die Seite dabei ganz normal benutzbar bleibt, finde ich das okay.

Insofern sind sie ein Teil der Webseite.

Geschrieben von: Netizen 10.05.2004 - 23:07

Akzeptiert.


Gerade darum halte ich es für fatal, dem Benutzer auch noch das letzte Fünkchen Vertrautheit zu nehmen. Jede Seite hat ein eigenes Navigationskonzept etc., der Besucher muß sich jedesmal neu orientieren. Wenn er dann auch noch suchen muß, wo die Scrollbalken geblieben sind ...

Für mich als Autor endet die Webseite und somit mein Einflußbereich im Viewport des Browsers, alles drumherum geht mich nichts mehr an.

Noch schlimmer sind allerdings die Leutz, die browserinterne Funktionen mit Javascript oder Flash nachbauen wollen: JS-Scrollbars, JS-Back-Button etc.

Gruß
n!

Geschrieben von: Apeman 10.05.2004 - 23:20

Ja, und da sind wir uns wieder einig. Das liegt natürlich in der Verantwortlichkeit des Betreibers einer Website, wie er welche Farben verwendet. Leider wird die zu oft falsch (weil gar nicht) verstanden und es wird alles machbare geändert. Da wär es besser gar nichts daran zu ändern.

Aber, mal nebenbei, die Scrollbalken sind immer rechts, oder?

Geschrieben von: Netizen 10.05.2004 - 23:42

Geh mal mit IE auf http://www.microsoft.com/israel/

Gruß
n!

Geschrieben von: Apeman 11.05.2004 - 12:47

Versteh, zwar keine eingefärbten Scrollbars, aber eben links.

Wußte gar nicht, dass das auch geht. Das ist ein gutes Beispiel. Aber wer sagt dir, das ein Windows für diesen Sprachraum nicht alles anders herum hat? Wenn ein Windows für Israel genauso falsch von vornherein ist, dann würde ich das auch wieder als gelungenes Beispiel bezeichnen. Denn ich gehe davon aus, weil die Seite nicht in Englisch gestaltet wurde, soll sie auch nur die Gewohnheiten vor Ort befriedigen.

Geschrieben von: lain 12.05.2004 - 22:27

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='bild.png');

Ok diesen COde hab ich jetzt als CSS abgespeichert. Aber nur mit diesem Inhalt . Und wie baue ich das jetzt da rein ? Bildname ist natürlich geändert..wenn ich mehrere Bilder in diesem Code einbringen will , trenne ich sie durch ein Komma ?


hoffe auf Hilfe...(kenn mich in dem Bereich halt , wie gesagt , gar nicht aus.)

Geschrieben von: Auge 13.05.2004 - 1:05

Hallo

Lies mal http://selfhtml.teamone.de/css/formate/einbinden.htm. Da werden die verschiedenen Möglichkeiten,
CSS-Formate in eine HTML-Seite einzubinden, erklärt.

Tschö, Auge

PS: Dein Format ist aber eigentlich kein CSS-Format (wegen MSIE-only).

Geschrieben von: lain 13.05.2004 - 14:16

@Auge

Danke aber ich hab da nicht das gefunden wonach ich suche.. Mein Ziel ist es momentan einfach , dass die Funktion von filter:alpha für Bilder auch im Netscape genau so wie im IE angezeigt werden kann.´

Kann mir jemand diesen "Hack" genauer erklären ? Reicht auch 'ne grobe Erklärung..

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='bild.png');

Als ich das mal in die HTML Datei eingebunden habe , war die filter:alpha Funktion plötzlich auch im IE blockiert . Es kommt also wohl drauf an wo ich diese neue CSS Datei einbaue.

Geschrieben von: amethyst 13.05.2004 - 14:25

Hallo Lain,
ich will ja nicht meckern, aber die Antwort zu Deiner Frage steht in genau diesem Thread auf Seite 1, da hat Steffen, weil ich nachgefragt habe, den Einbau ins CSS an einem Beispiel erklärt.

Das eigene Thema gründlich zu lesen, sollte man voraussetzen können. Sorry ;-))

Gruß Uschi

Geschrieben von: SteffenG 13.05.2004 - 14:53

Hallo lain,

vielleicht solltest du dich erstmal auf Sachen beschränken, die du verstehst und korrekt anwenden kannst.
Verwende also ein binärtransparentes gif, oder diesen Javascript-Pfusch, lade die Seite in deinen InternetExplorer und ärgere dich, für was für einen besch####### Browser du deine Seiten entwickelst.

Vielleicht solltest du dich auch ein bisschen über HTML und CSS informieren. Außerhalb dieses Forums. Google ist dein Freund.
Aber du brauchst dich natürlich nicht zu informieren. Gibt genügend Leute da draußen, die Seiten ins Netz gestellt haben, ohne zu wissen, was sie da tun.


Grüße
Steffen

Geschrieben von: Auge 13.05.2004 - 15:48

Ich zitiere mich mal selbst:



Was meinst du, was das, insbesondere der Teil zwischen den Klammern, aussagt?
Warum steht da wohl mitten in deiner Zeile das Wort Microsoft?

Der Weg, den du beschreiten willst, führt nicht zum gewünschten Ziel. Ergoogle dir,
wie man in einem Gif eine Farbe transparent schaltet, das funktioniert in allen
graphischen Browsern.

Tschö, Auge

Geschrieben von: Dakar 18.05.2004 - 13:03

Ich dreh langsam am Rad !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Kann mir bitte, bitte mal jemand Schritt für Schritt erklären, wie ich in einem .gif im IrfanView den Hintergrund transparent kriege.............Aaaaaaaah Argh!

Ich werd bekloppt! Treck blöder!

Geschrieben von: Terry 18.05.2004 - 13:10

Im IrfanView?

Gar nicht, soviel ich weiß...

Ist ein super Bildbetrachter, der auch wirklich viel kann - aber trotz allem ist es kein vollwertiges Grafikprogramm - für manche Sachen braucht man dann eben doch ein "echtes" Grafikprogramm... (z.B. Gimp, wenns kostenlos sein soll...)

Geschrieben von: Apeman 18.05.2004 - 13:29

Mit IrfanView kenne ich auch keine Möglichkeit. Ich nutze dazu das kleine Freewaretool Ulead Gif-Animator. Such mal über Google danach. Alternativ kannst du mir auch deine Emailadresse zukommen lassen, dann schicke ich es dir (2 MB ungepackt). Würde es noch zippen.

Geschrieben von: Dakar 18.05.2004 - 22:00

Danke Apeman!

Geschrieben von: Dakar 20.05.2004 - 0:34

Hey Apeman,

jetzt weiss ich, was mir die ganze Zeit gefehlt hat!

Conny wird es dir auch danken...

Super!

Geschrieben von: Conny 20.05.2004 - 11:56

Hallo,
das war jetzt ein 'insider', dazu muß man wissen, daß ich ihm bis dahin seine Bilder 'durchsichtig' gemacht habe

Conny

Geschrieben von: Dakar 20.05.2004 - 13:23

Tja... äh...

Geschrieben von: Apeman 20.05.2004 - 22:03

Hatte nicht damit gerechnet mit nur einer Hilfe zwei Leute zufrieden stellen zu können.
Deinem Hinweis entnehme ich, das du mit dem kleinen Tool klar kommst, Klasse.

Geschrieben von: Bjoern_Z 15.06.2004 - 14:49

Hallo alle,

muss das denn unbedingt CSS sein oder kann das auch HTML sein?

Ich hatte auf einer Seite etwas gefunden aber es funktioniert leider nicht ...

<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)" src="bildname.png">

oder hab ich was falsch gemacht?

Geschrieben von: Bjoern_Z 17.06.2004 - 8:11

Bekommt man hier doch so viele Antworten ...

Geschrieben von: Andreas 17.06.2004 - 8:42

Du hast nicht zufällig schlecht geschlafen? Es gibt hier kein Recht auf Antworten. Vielleicht weiß einfach niemand was zu Deiner Fragestellung. Im übrigen ist das was Du da gepostet hast, auch CSS und kein HTML ...

Mann, Mann, Mann ... :-(

Geschrieben von: heinzelhund 17.06.2004 - 10:52

Hallo,

entschuldige, dass ich mich erst jetzt melde, aber ich hatte bis gerade eben auch noch ein Leben.
Was du da meinst, dürfte MS-spezifischer Tant und somit ein absolutes 'Bäh' sein. Ob die Syntax stimmt, kann ich dir nicht sagen, da ich mich mit den MS-Filtern nicht beschäftige.

Ciao
Heinzelhund

Geschrieben von: Bjoern_Z 17.06.2004 - 12:52

Hey, hey, hey ...

Ich hab auch keinen gezwungen zu antworten sondern nur eine Frage mit etwas ironie gestellt. Aber wenn das CSS währe wüsste ich warum es nicht funktioniert.

Danke für die Hilfe!

Geschrieben von: Andreas 17.06.2004 - 13:09

[x] Ich erkenne Ironie, wenn ich sie sehe.
[ ] Dein Beitrag war ironisch.

Geschrieben von: Bjoern_Z 18.06.2004 - 10:26

Wenn du das sagst muss das ja so sein! :-)

Geschrieben von: amethyst 18.06.2004 - 15:22

Sorry, dass ich mich einmisch.

Wie wäre es, wenn Du den Thread von Anfang an lesen würdest, Deine Frage scheint Steffen schon längst beantwortet zu haben.

Dass er nicht gewillt ist, das noch mal zu tun, kann ich irgendwie nachvollziehen zumal es ja hier nicht einmal was mit richtig Suchen zu tun hat. Einfach mal einen Thread komplett lesen und dann vielleicht eine Zusatzfrage stellen, wenn was nicht klar ist, dann kommen auch Antworten.

Gruß Amethyst

Geschrieben von: markusm 18.06.2004 - 15:56

dazu fällt mir http://www.karzauninkat.com/Goldhtml/goldhtml.htm#1 und#2
ein ist zwar schon alt aber immer noch aktuell
mm

Geschrieben von: Chrisi 20.06.2004 - 11:24

Kennst du Ulead Photo Impackt, Ulead Photo Express oder Infran View ?
Das sind ziemlich gute Bildbearbeitungsprogramme.

Geschrieben von: X-buZZ 22.06.2004 - 15:37

Ersteinmal ein freundliches Hallo!

Bin neu hier und habe diesen Thread sorgfältig verfolgt, aber leider konnte ich für MEIN PNG-Problem noch keine Lösung realisieren.

Also, ich habe eine gerasterte Grafik als Hintergrund.
Darauf arbeite ich mit Tabellen, in denen jede Zelle eine eigene Hintergrundgrafik mit Transparenz (Schatten) enthält.

Das sieht dann in der HTML-Datei für solch eine Zelle folgender maßenaus:

Weiterhin benutze ich CSS, um die Grafiken zu definieren (damit ich sie in Zukunft einfach & bequem das Design anpassen kan).

In der CSS-Datei sieht das dann für die Zelle oben so aus:



Nun zu der Frage:

Wie implementiere ich den nachstehenden Code für meinen Fall im Stylesheet?



Wäre euch wirklich sehr dankbar für Hilfe, da mich diese Sache nun schon mehrere Tage aufhält

Geschrieben von: SteffenG 22.06.2004 - 16:10

Hallo,

ähm, wie wär's mit:

und



Jetzt eine Frage von mir: Wo genau war das Problem bei dieser kleinen 'Übertragungsarbeit'?


Grüße
Steffen

Geschrieben von: X-buZZ 22.06.2004 - 16:31

SteffenG, Du bist mein Held, funktioniert einwandfrei! Vielen lieben Dank!

Darfst nicht so streng mit mir sein, hab grad erst mit CSS angefangen und bin von daher noch recht frisch in der Substanz.

Geschrieben von: Bjoern_Z 11.08.2004 - 16:11

Hallo Leute und Sorry, dass ich dieses Thema nochmal aufrufe aber aus irgend einem Grund funktioniert das ganze nicht bei mir hab alles versucht was hier drin stand aber ich hab es in CSS nicht geschafft ein Transparentes Bild hin zu bekommen! In JavaScript hat es gleich beim ersten mal geklappt aber in CSS (welches eigentlich noch einfacher ist) nicht!

http://home.arcor.de/b-z/test/lmenue.html


Wie schaut es eigentlich aus, wenn man das ganze nicht so wie hier beschriebn mit dem src befehl mach sondern ohne und z.B. wie hier:

Dann müsste man doch wenn man die Bilder mit den class="topleft" in den tds mit dem Filter belegen können, ohne das man für jedes Bild einen eigenen Filter definieren muss oder verstehe ich da etwas falsch?

Geschrieben von: SteffenG 11.08.2004 - 18:05

Hallo Björn,

tja, scheinbar ist mit JavaScript einiges einfacher.

Ich denke, der Sinn und Zweck der Übung wurde missverstanden. Es geht darum ein Hintergrundbild zu setzen.

Was sollte in dem Zusammenhang etwas wie

bringen?

Anmerkungen: die geschweiften Klammern sind im style-Attribut fehl am Platze.
Und das src kannst du nicht einfach weglassen.

Jetzt zum coolen Teil dieser Antwort:
Was du machen möchtest, kann man ziemlich bandbreitenschonend und ästhetisch ansprechend umsetzen:

Du erstellst einen solchen Button ohne Text(!). Und setzt ihn, wie im Thread beschrieben, als Hintergrund. Den Text, der auf den Button soll, gibst du als Text in die jeweilige Tabellenzelle ein. (Ausrichtung des Texts per CSS)

Dann kannst du für jede Tabellenzelle, für jeden Button, denselben Filter verwenden - weil ja dasselbe Bild geladen wird. Das Laden der Seite geht somit schneller, weil nur ein Bild und ein bisschen Text geladen werden muss anstelle von lauter Bildern.

Et voila.


schöne Grüße
Steffen

Geschrieben von: Bjoern_Z 12.08.2004 - 5:57

Das soll heißen das ich zwei hintergrundbilder setze und das vordere Transparent mache?

Das hört sich ja alles besser an als ich mir das vorgestellt habe!

Danke Steffen


Gruß Björn Z.

Geschrieben von: SteffenG 12.08.2004 - 7:27

Nein, das soll heissen, dass du ein Hintergrundbild setzt aber auf zwei verschiedene Arten:
Die eine Art für den Internetexplorer per Filter.
Die andere Art für alle vernünftigen Browser, mit dem Attributselektor ( das ist das [class] hinter dem Elementselektor). Die beiden Methoden werden oben im Thread beschrieben.

Jetzt hast du also ein in praktisch allen Browsern transparenten 'Roh-'Button. D.h. deinen Button ohne Beschriftung. Nur das blaue Dings also. Nichts weisses darin.

Den Text kriegst du rein, indem du ihn vor den Hintergrund schreibst. Das Markup sieht dann bei dir ungefähr so aus:

Das zugehörende CSS findest du oben. Ersetze einfach 'topleft' mit 'button'.

Und da diese Navigationsleiste semantisch gesehen keine tabellarischen Daten darstellt, kannst du gleich eine Liste draus machen:
Ein bisschen weniger Markup, ein bisschen mehr Semantik.

Am besten, du plazierst dieses Navigationszeugs dann auch nicht am Anfang deiner Seite im Quelltext, sondern am Ende. Dann braucht die Suchmaschine nicht nach dem wirklichen Inhalt zu Suchen (daher kommt nämlich nicht das 'Suchen' in 'Suchmaschine' ), sondern findet ihn direkt (und besser) am Anfang des Quelltextes. So denke ich mir das zumindest.


schöne Grüße
Steffen

Geschrieben von: Bjoern_Z 12.08.2004 - 8:10

Hilfe, es funktioniert immer noch nicht ...

Ich dachte ich hätte es jetzt verstanden nach der guten Erklärung vom Steffen aber aus irgend einem Grund wird das PNG nicht so angezeigt wie es soll, denn es ist nicht Transparent!

http://home.arcor.de/b-z/test/lmenue.html

Schon mal im voraus danke für die Hilfe!


Gruß Björn Z.

Geschrieben von: Auge 12.08.2004 - 13:50

Hallo

Ich weiß echt nicht, was so schwer am kopieren von Quelltext sein soll.

Dein Stylesheet:


Mit der Anweisung td.button {background-image:url('bilder/button.png');}
überschreibst du die Anweisung für den MSIE. Oben wurde aber mit der Anweisung
td.button[class] gearbeitet, um nur den Browsern, die mit diesem Selektor
umgehen können, als da wären: Mozilla incl. Derivaten und Opera, das Bild mit der
Alphatransparenz zugänglich zu machen.

Geschrieben von: Bjoern_Z 12.08.2004 - 14:09

Super, danke für die Hilfe!

Ich dachte er wollte mit dem [class] nur darauf hinweisen, dass es ein class befehl ist. Aber das andere Browser (die angeblich 1000 mal besser sein sollen als der IE) diesen Befehl interprtieren und der IE ihn ignoriert hätte ich nicht gedacht, aber jetzt habe ich ja mein Ziel ereicht und meine Ladezeit hat sich nochmal minimiert!


Viele Grüße

Björn Z.

Geschrieben von: Bjoern_Z 12.08.2004 - 14:55

Na Toll,

zu früh gefreut, denn jetzt funktionieren die Links nicht mehr!

Hat jemand eine Erklärung warum dies so ist und vieleicht auch eine Lösung wie man das ändern kann?

http://home.arcor.de/b-z/test/lmenue.html

http://home.arcor.de/b-z/test/style/style.css

Geschrieben von: SteffenG 13.08.2004 - 7:51

Warum, um Herrgotts Willen,

machst du ein verdammtes div um da rein?

Ok, in meinem Blog habe ich vor einiger Zeit beschrieben, wie man Buttons macht. Buttons, die ohne JavaScript auch in IE funktionieren: http://www.gungfu.de/facts/archives/2004/07/21/einfrallemal-css-buttons-mit-internetexplorer/.
Das lesen, den Thread nochmal lesen, beides zusammenpfrimeln. Fertig.

Übrigens sehe ich auf deiner Testseite nur den Hintergrund. Keinen Button.


schöne Grüße
Steffen

Geschrieben von: Bjoern_Z 13.08.2004 - 7:54

Welchen Explorer hast du und kannst du mal in der CSS Datei schauen warum es nicht funktionier?

Ich weiß auch nicht was du gegen das DIV hast? Das thut mit meinem Problem nichts zur Sache, das das Problem auch ohne das DIV noch vorhanden ist.


[Edit] Was ich noch sagen wollte: Die Tabelle für diese Buttons sind schon geschrieben, deshalb kann ich das auch nicht mit ULs als Liste gestalten sondern musst schon bei TDs bleiben.



Gruß

Björn Z.

Geschrieben von: SteffenG 13.08.2004 - 8:48

Ähm - Explorer?

Ich verwende den schnellsten, den besten, den schönsten, den praktischsten - sprich - den einzig wahren Browser: http://www.opera.com/.

Wegen dem Div: Ich mag markup, das genau das tut, was es soll: Auszeichnen. Das div tut nix, deshalb finde ich es nicht gut. Aber das ist zugegebenermassen Ansichtssache.



schöne Grüße
Steffen

Geschrieben von: Bjoern_Z 13.08.2004 - 9:15

Ich finde es gerade gut wenn es nichts tut, da kann ich dann bestimmen was es machen soll, mit H Elementen hat man das Problem das die Schrift obwohl man in CSS alles verändert hat trotzdem auf einer ganz anderen höhe steht oder gibt es da auch nich einen Befehl auser "line-height"?

Aber mein Problem mit den nicht funtionierenden Links und dem in deinem Browser nicht vorhandenen Button haben wir jetzt noch imme rnicht gelöst und ich häng da schon edliche Stunden dran!


PS: Den super, tollen Browser den du verwendest werde ich mal ausprobieren!


Viele grüße aus Hessen

Björn Z.

Geschrieben von: Conny 13.08.2004 - 9:51

Hi Steffen,
nun, sooo super toll finde ich ihm nun auch wieder nicht.
Denn, Werbeeinblendungen oder Zahlen ist die Devise

Wenn schnell, schlank und gut, dann wohl eher Firefox

Ja, ich weiß, ist eh alles Geschmacksache

cu
Conny

Geschrieben von: SteffenG 13.08.2004 - 10:01

Freut mich, dass ich einen Browserwar anstrengen konnte...

Ich zahle gern für gute Software (auch für phase5).

@Björn:
Man kann blocklevel-Elemente auch mit den 'margin'-Angaben verschieben.
Mittlerweile ist mir auch nicht mehr klar, warum das bei dir nicht funktioniert. Das überhaupt kein Hintergrundbild mehr angezeigt wird, ist seltsam. Kann es sein, dass das Bild woanders ist oder einen anderen Namen hat?
Width und height brauchst du auch nicht im TD-Element angeben. Kannste im CSS machen. (Trennung von Struktur und Präsentation, du weisst schon...)


schöne Grüße
Steffen

Geschrieben von: Bjoern_Z 13.08.2004 - 10:17

Nein Steffen das Bild funktioniert bei mir ja deswegen verstehe ich ja nicht warum es bei dir nicht angezeigt wird, liegt wohl am Opera *was ein glück das ich meinen I-Net-Explorer habe*.

Bei mir funktioniert zwar die Transparenz aber dafür der Link net ...


Wenn Ihr mal schauen wollt hier jetzt mal alle Dateien!


http://home.arcor.de/b-z/test/test.zip

Geschrieben von: SteffenG 13.08.2004 - 11:00

Warum die Bilder in gescheiten Browsern nicht mehr angezeigt werden, ist klar: Im CSS werden Dateien relativ zum CSS eingebunden. Nicht relativ zum html-Dokument.
Ändere also
td.button[class] {background-image:url(bilder/button.png);}
in
td.button[class] {background-image:url(../bilder/button.png);}
und es funktioniert wieder...

Warum IE mit seinem Filter-Zeugs trotzdem das Bild anzeigt? IE macht halt, was er will...

Bei Bildern in CSS gebe ich die Pfade immer absolut zum WebRoot an. Also
td.button[class] {background-image:url(/bilder/button.png);}
Das funktioniert immer - solange die Dateien auf einem Server angeschaut werden. Deshalb habe ich mir auch lokal den Apache http://www.apachefriends.org/.

Warum die a's keine Links mehr sind (im IE, in meinem Opera sind sie das noch) könnte mit dem Filter zu tun haben. Andererseits verwende ich den Filter auch und bei mir funktioniert's.
Versuch mal das Hintergrundbild nicht auf das td zu setzen, sondern auf das a.

Außerdem: Mache a zum Blocklevelelement:
display:block;
Dann reagiert der IE beim Hovern immer. Versuch's erstmal ohne - bis in deinem IE das a ein Link ist. Und dann füge das display ein um den Unterschied zu sehen. Es sollte einen geben.
Ok, ich habe eine Demonstration zusammengebaut: http://www.gungfu.de/web/proj/testcase/hover.html
Den Rest findest du in dem von mir bereits verlinkten Blog-Eintrag. Ich werde dir nicht alles vorkauen!

Jetzt probier noch ein bisschen rum. Hat sicherlich noch niemandem geschadet. Wegen dem Filter findest du bestimmt mit http://www.google.de/ was. Viel Spaß


schöne Grüße
Steffen

Geschrieben von: Bjoern_Z 13.08.2004 - 11:49

Super Steffen und dnake!

Da hätte ich versuchen können was ich wollte und hätte es nicht heraus gefunden warum es in anderen Browsern nicht geht.

Warum es im IE ging hast du ja schon anderst herum für die Anderen Browser erklärt.


Das mit dem Hintergrundbild von dem TD zum A hat auch funktioniert, meine Links werden jetzt auch im IE angezeigt!

Das mit dem "display:block;" hat bei mir leider keinerlei Wirkung gezeigt und dein Beispiel hat mich nur noch mehr verwirt.


Aber ein kleines Problem habe ich noch:

Jetzt schaffe ich es nicht den Text Vertikal auszurichten. Ich hab schon den Befehl "vertical-align:middle;" für das DIV und in valign ins TD aber es rührt sich jetzt nichts mehr. Ich habe auch schon die Befehle gewechselt in P, FONT und SPAN aber da thut sich nicht ...


PS: Was bekommst du eigentlich von mir für deine Hilfe?



Gruß

Björn Z.

Geschrieben von: Bjoern_Z 13.08.2004 - 11:56

Was ich noch vergessen hatte:

Mir hat jemand gesagt, dass der richtige Befehl für die anderen Browser: a.button[class] {background: transparent url(../bilder/button.png) no-repeat;} heißt.

Das gepostete Script von dir war aber: td.button[class] {background-image:url('bilder/button.png');}

Welches Script ist da jetzt richtig?

Die Links sind zwar geblieben aber für alle die nicht hoch scrollen wollen:
http://home.arcor.de/b-z/test/lmenue.html

http://home.arcor.de/b-z/test/style/style.css

http://home.arcor.de/b-z/test/test.zip

Geschrieben von: Auge 13.08.2004 - 14:51

Hallo

Erstmal:
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background

Die Angabe von transparent macht hier keinen Sinn, da es einfach nur
ansagt, daß dort kein Hintergrund zu sehen sein soll, das soll er ja aber.
no-repeat sagt aus, daß ein Hintergrundbild nicht gekachelt (wiederholt) werden soll.

Tschö, Auge

PS: Bei CSS handelt es sich nicht um Skripte.

Geschrieben von: Netizen 14.08.2004 - 0:34

Mit CSS kannst Du bei praktisch jedem Element bestimmen, wie es sich verhalten soll. Der Unterschied ist jedoch: Ein Hx-Element hat immer eine Bedeutung, es stellt für jeden Browser eine Überschrift dar und wird entsprechend behandelt (was sich nicht nur auf die grafische Darstellung bezieht!). Ein div-Element hingegen ist nichts als ein bedeutungsloser Container, ist nix, kann nix, wird nix. Natürlich gibts es auch dafür Anwendungsfälle, wenn aber in bestimmten Situationen bessere Elemente in HTML zur Verfügung stehen (z.B. Hx), dann ist es Unsinn bzw. schlicht falsch, diese nicht zu nutzen und sich stattdessen eine div-Krücke zu bauen.

Mal abgesehen davon, daß es weder in HTML noch in CSS "Befehle" gibt - was konkret ist das Problem? Das einzige, was eine Überschrift visuell von normalem Text unterscheidet, ist eine größere fettgedruckte Schriftart sowie etwas mehr Abstand nach oben und unten. Mehr nicht.

Siehe dazu z.B. den Vorschlag eines default-Stylesheets für HTML 4:

Appendix D. Default style sheet for HTML 4.0
http://www.w3.org/TR/CSS21/sample.html


Bei mir gehts in Opera halbwegs, in Firefox und IE hingegen überhaupt nicht. IE zeigt keinen Hintergrund, Firefox zeigt ihn nur teilweise. Obendrein ist der Quellcode ... hmm ... eigenwillig. Teste ihn mal mit dem http://validator.w3.org/ ...

Opera ist gerade auch für Entwickler sehr interessant, hat viele nützliche Features (schnelles aktivieren/deaktivieren von Bildern/CSS/Javascript per Knopfdruck, Aufrufen des W3-Validators, Small-Screen-Rendering etc.)

Aus anderem Posting:

foo[bar] ist ein Attributselektor. IE unterstützt sowas nicht.

Gruß
n!

Geschrieben von: Bjoern_Z 17.08.2004 - 20:07

Danke für eure tolle Erklärung und ganz speziell noch mal an Netizen und Steffen!

@ Netizen

Ich wusste nicht das es bei den H-Elementen eine margin gibt, daher haben diese Elemente mir nicht gefallen. Wenn man Sie ausschaltet kann man auch wunderbar damit umgehen. Naja nun kann ich anfangen alle umzuschreiben ...


Viele Grüße

Euer Björn Z.

Geschrieben von: Auge 18.08.2004 - 0:34

Hallo

Um das Verständnis für den Sinn und Zweck der verschiedenen Elemente
zu schärfen empfehle auch ich die Lektüre von http://de.selfhtml.org/. Ich weiß, daß
ich damit bei Weitem nicht der Erste bin.

Um den Umgang mit CSS zu erleichtern, sei dir besonders die http://de.selfhtml.org/html/referenz/elemente.htm
an's Herz gelegt. Alle Blockelemente kannst du per CSS mit width, height, margin
etc. belegen, um Abstände zu den Nachbarelementen zu definieren.
Außerdem klären sich bei der Lektüre auch manche Ungereimtheiten. Zum Beispiel
darf ein <p> keine anderen Blockelemente beinhalten, es ist halt nur ein Textabsatz.
Es wird aber auch desöfteren mißbraucht, was bei einigen Browsern zu nicht
gewünschten Darstellungen führt, z.B. bei "Tabelle innerhalb des Textabsatzes".
Dann heißt es wieder: "Der oder der Browser will nicht so, wie ich es will! *grein*"

Alles in Allem: eine lohnende Lektüre!

http://aktuell.de.selfhtml.org/extras/download.shtml

Tschö, Auge