Transparente Bilder, in HTML Einstellungen

[X-buZZ]

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:

QUELLTEXT

<td height="30" class="topleft">

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:

QUELLTEXT

.topleft
{
background-image: url('../graphics/left_top.png');
}

Nun zu der Frage:

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

QUELLTEXT

ul#nav li a{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='../graphics/left_top.png');}
ul#nav[id] li a{background-image:url('../graphics/left_top.png');}

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

Der Beitrag wurde von X-buZZ bearbeitet: 22.06.2004 - 15:37

[SteffenG]

Hallo,

ähm, wie wär's mit:

QUELLTEXT

td.topleft
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='../graphics/left_top.png');
}

und

QUELLTEXT

td.topleft[class]{background-image:url('../graphics/left_top.png');}

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


Grüße
Steffen

[X-buZZ]

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.

[Bjoern_Z]

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!

- > Hier klicken um die Datei anzusehen < -


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:

td.topleft
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='../graphics/left_top.png');
}

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?

Der Beitrag wurde von Bjoern_Z bearbeitet: 11.08.2004 - 16:13

[SteffenG]

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

QUELLTEXT

<img class="test" style="{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale);}" src="bilder/wueu.png" border="0">

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

[Bjoern_Z]

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.

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.

[SteffenG]

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:

QUELLTEXT

<table>
 <tr>
   <td class="button">Beschriftung Button1</td>
   <td class="button">Beschriftung Button2</td>
 </tr>
</table>

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:

QUELLTEXT

<ul>
 <li class="button">Beschriftung Button1</li>
 <li class="button">Beschriftung Button2</li>
</ul>

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

[Bjoern_Z]

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!

-> image <-

Schon mal im voraus danke für die Hilfe!


Gruß Björn Z.

Der Beitrag wurde von Bjoern_Z bearbeitet: 12.08.2004 - 8:57

[Auge]

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!

Hallo

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

Dein Stylesheet:

QUELLTEXT

<style type="text/css">
<!--
td.button
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true sizingMethod=scale src='bilder/button.png');
}
td.button {background-image:url('bilder/button.png');}
-->
</style>

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.

[Bjoern_Z]

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.

[Google Bot]