| Autor |
Nachricht |
way2hot
Threadersteller
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: 
|
Verfasst Di 21.06.2005 15:13
Titel [CSS] Alpha Image Loader |
  |
|
Huhu!
Jetzt hab ich auch mal ne Frage:
Ich benutze den Alpha Image Loader, um im IE/PC eine PNG im Hintergrund eines Containers zu kacheln, allerdings skaliert der diese Kachel zum Verrecken nicht! 
Hier erstmal die Struktur der Seite:
| Code: | <body>
<div id="wrapper">
<div id="top">
<div id="topNavi"><img src="images/navi_top.gif" alt="" width="202" height="22" /></div>
<div id="topShadow"></div>
</div>
<div id="main">
<div id="head">
<div id="imgFrame"></div>
<div id="naviBox">
<div id="navi"></div>
<div class="clear"> </div>
</div>
</div>
<div id="sitebody">
<div class="clear"> </div>
<div id="content"></div>
<div id="thumbs"></div>
<div class="clear"> </div>
</div>
</div>
<div id="bottom"></div>
</div>
</body> |
Bitte nicht wundern wegen den ganzen clear-DIVs, ich habe mittlerweile einen massiven Hals und so habe ich mehrere andere Darstellungsfehler des IE gelöst. 
Als nächstes die CSS-Deklarationen der einzelnen Container, das DIV mit der PNG-Kachel hat die ID "main"
| Code: | #wrapper {
width: 650px;
margin: 0 auto;
}
#top {
width: 650px;
}
#topNavi {
height: 22px;
text-align: right;
}
#topShadow {
height: 13px;
width: 650px;
}
head:first-child+body div#topShadow {
background: url(../images/top.png) no-repeat;
}
#main {
padding: 0 15px;
}
head:first-child+body div#main {
background: url(../images/tile_main.png) repeat-y;
}
#head {
width: 620px;
height: 250px;
}
#imgFrame {
float: left;
width: 267px;
height: 250px;
background: url(../images/img_head.jpg);
}
#naviBox {
float: left;
width: 353px;
height: 250px;
background: url(../images/bg_navi.jpg);
}
#navi {}
#sitebody {
background: url(../images/bg_sitebody.jpg) no-repeat 0 0;
}
#content {
float: left;
width: 480px;
height: 300px;
}
#thumbs {
float: left;
width: 140px;
height: 300px;
}
#bottom {
width: 650px;
height: 20px;
}
head:first-child+body div#bottom {
background: url(../images/bottom.png) no-repeat; |
Eingebunden werden die verschiedenen CSS-Files im Head der Seite mit @import:
| Code: | <style type="text/css">
@import url(css/ids.css);
@import url(css/tags.css);
@import url(css/classes.css);
</style>
<!--[if IE]>
<style type="text/css">
@import url(css/iealpha.css);
</style>
<![endif]--> |
Die iealpha.css enthält den AlphaImageLoader:
| Code: | div#topShadow {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top.png');
}
div#main {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tile_main.png', sizingMethod='scale');
}
div#bottom {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom.png');
} |
Das einbinden der nicht zu skalierenden PNGs im Kopf- bzw. Fußbereich funktioniert einwandfrei (sofern ich auf sizingMethod='crop' verzichte), nur das Kacheln eben nicht... 
Seite soll (hier noch als Photoshop-Screenshot) so aussehen, im Firefox bekomme ich die Umsetzung ohne Probleme hin.
Ratschläge wie "Verzichte doch auf die PNGs" sind erstmal uninteressant. Ich bin sturr und möchte das jetzt so lösen, damit die Kachel des body nicht zerschossen aussieht.
// Edit:
// Habe außerdem auch darauf geachtet, dass die Grafik nur 1Pixel hoch ist, daran liegt es nicht.
Jemand ne Idee?!
Ich geh mal eben Kotzen... 
Zuletzt bearbeitet von way2hot am Di 21.06.2005 16:57, insgesamt 3-mal bearbeitet
|
|
| |
   |
 |
peppy
Dabei seit: 02.03.2004
Ort: Dinslaken
Alter: 46
Geschlecht:
|
Verfasst Di 21.06.2005 18:39
Titel
|
|
|
|
Kannst du vielleicht mal einen Link zu einer Html-Version posten?
|
|
| |
|
|
|
Anzeige
|
|
|
13pixelchen
Account gelöscht
Ort: -
|
Verfasst Di 21.06.2005 19:44
Titel
|
|
|
wozu braucht man da transparenzen... 
|
|
| |
|
|
way2hot
Threadersteller
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Di 21.06.2005 20:10
Titel
|
|
|
| peppy hat geschrieben: | | Kannst du vielleicht mal einen Link zu einer Html-Version posten? |
Ist noch keine HTML-Version online, poste ich morgen früh, wenn ich in der Firma bin.
| 13pixelchen hat geschrieben: | | wozu braucht man da transparenzen... |
Wegen der gerasterten Hintergrundkachel (4 Pixel breit, etwa 600 Pixel hoch, repeat-x), welche nicht "zerbrechen" soll, wenn sich die Seite (im wrapper) auf dem body "verschiebt"
|
|
| |
|
|
way2hot
Threadersteller
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
|
| |
|
|
chrikle
Dabei seit: 02.05.2002
Ort: NRW
Alter: 47
Geschlecht:
|
Verfasst Mi 22.06.2005 10:52
Titel
|
|
|
Probier doch mal als Parameter statt "scale" "crop"?
Gruß
Chris
|
|
| |
|
|
way2hot
Threadersteller
Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht:
|
Verfasst Mi 22.06.2005 11:11
Titel
|
|
|
| chrikle hat geschrieben: | Probier doch mal als Parameter statt "scale" "crop"?
Gruß
Chris |
Keine Veränderung, dem ist es offensichtlich auch scheiß egal welche und vor allem ob ich überhaupt die sizingMethod verwende.
Und wenn ich bei dem Schatten-DIV oben die sizingMethod='crop' verwende, hab ich im IE sogar noch einen mir völlig unerklärlichen Abstand (etwa 5 Pixel) zwischen Schatten um dem Head, daher hab ich da eh schon rausgelassen. Aber bei dem main-DIV ist es vollkommen egal, wasich mache, da tut sich im IE nichts und im FF bleibt es immer richtig angezeigt, selbst ohne sizingMethod. 
// Es funktioniert, wenn ich im IE dem DIV, welcher die PNG-Kachel haben soll, eine feste Größe zuweise, allerdings wäre das Schwachsinn, weil die Seite eine variable Höhe hat.
Zuletzt bearbeitet von way2hot am Mi 22.06.2005 11:40, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Matthias83
Dabei seit: 08.05.2003
Ort: Germany
Alter: 41
Geschlecht:
|
Verfasst Mi 22.06.2005 12:16
Titel
|
|
|
Ich hab sowas ähnliches bei mir auf der Seite aber wohl anders gelöst...
Kannst ja mal checken, vielleicht hilfs weiter.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Loader-Problem bei SWF
suche ein fall out Image Menu, mit 3 image ebenen
input type=image + image map
alpha-veränderung entkoppelt btn aus mc
Cinema 4D Alpha-Kanaele
[Flex] Problem mit PNG und Alpha
|
|
Willkommen auf dem Portal für Mediengestalter
