mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 23:03 Benutzername: Passwort: Auto-Login

Thema: [CSS] Alpha Image Loader vom 21.06.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Alpha Image Loader
Seite: 1, 2  Weiter
Autor Nachricht
way2hot
Threadersteller

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Di 21.06.2005 14:13
Titel

[CSS] Alpha Image Loader

Antworten mit Zitat Zum Seitenanfang

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! * grmbl *

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">&nbsp;</div>
         </div>
      </div>
      <div id="sitebody">
         <div class="clear">&nbsp;</div>
         <div id="content"></div>
         <div id="thumbs"></div>
         <div class="clear">&nbsp;</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. * Ich geb auf... *

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... *hu hu huu*

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... * Ich muß mich mal kurz übergeben... *


Zuletzt bearbeitet von way2hot am Di 21.06.2005 15:57, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
peppy

Dabei seit: 02.03.2004
Ort: Dinslaken
Alter: 39
Geschlecht: Männlich
Verfasst Di 21.06.2005 17:39
Titel

Antworten mit Zitat Zum Seitenanfang

Kannst du vielleicht mal einen Link zu einer Html-Version posten?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
13pixelchen
Account gelöscht


Ort: -

Verfasst Di 21.06.2005 18:44
Titel

Antworten mit Zitat Zum Seitenanfang

wozu braucht man da transparenzen... *zwinker*
 
way2hot
Threadersteller

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Di 21.06.2005 19:10
Titel

Antworten mit Zitat Zum Seitenanfang

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... *zwinker*


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"
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
way2hot
Threadersteller

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Mi 22.06.2005 08:16
Titel

Antworten mit Zitat Zum Seitenanfang

HTML-Version online
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
chrikle

Dabei seit: 02.05.2002
Ort: NRW
Alter: 40
Geschlecht: Männlich
Verfasst Mi 22.06.2005 09:52
Titel

Antworten mit Zitat Zum Seitenanfang

Probier doch mal als Parameter statt "scale" "crop"?

Gruß
Chris
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
way2hot
Threadersteller

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 34
Geschlecht: Männlich
Verfasst Mi 22.06.2005 10:11
Titel

Antworten mit Zitat Zum Seitenanfang

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. * grmbl * * Mal bisschen die Nase pudern... *


// 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. * Ich muß mich mal kurz übergeben... *


Zuletzt bearbeitet von way2hot am Mi 22.06.2005 10:40, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Matthias83

Dabei seit: 08.05.2003
Ort: Germany
Alter: 33
Geschlecht: Männlich
Verfasst Mi 22.06.2005 11:16
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hab sowas ähnliches bei mir auf der Seite aber wohl anders gelöst...
Kannst ja mal checken, vielleicht hilfs weiter.
  View user's profile Private Nachricht senden
 
Ähnliche Themen .swf datei und css filter:alpha problem. flash liegt darüber
Loader-Problem bei SWF
CSS background-image
CSS background-image mit em ?
css und image frage
Image Ready Ausgabe in CSS
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.