ugrás a tartalomhoz

"Bütykölt" transparent PNG pozícionálás (IE 6 alatti bug)

unregistered · 2007. Már. 22. (Cs), 20.15
Nos IE6 alatti megspécizett átlátszó PNG-t hogyan lehet pozícionálni? FF-ben gyönyörűen működik.
Itt a kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

  <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<link rel="stylesheet" type="text/css" href="css/pages.css" />

<!--[if gte IE 5]>
<style type="text/css">
<!--
.hatter {
  BACKGROUND: none transparent scroll repeat 0% 0% !important;
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/front.png', sizingMethod='') !important;
}
-->
</style>
<![endif]-->

</head>

  <body>

	<div id="center">
	  <div class="hatter">
	  </div>
	</div>

  </body>
</html>
CSS:
body
  {
  background-color: #f1e2a3;
  }

	#center
	  {
	  width: 800px; 
	  height: 800px;
	  margin:0 auto 0 auto;
	  background-color:red;
	  }

	.hatter
	  {
	  width: 790px;
	  height: 790px;
	  background-image:url('../img/front.png');	  
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-color:green;
	  }
Már kipróbáltam amúgy JS-el is a debug-ot de úgysem jó a pozícionálás:( Előre is köszönöm!
 
1

Sehogy

vbence · 2007. Már. 23. (P), 11.12
A kérdés, hogy az alphaimageloader tud-e pozícionálni. A válasz pedig: nem. Ahogy nem ismeri a repeat-et sem.
2

:(

unregistered · 2007. Már. 23. (P), 12.37
Hát ez nem jó hír :( Én kis naívan azt hittem hogy ez csak egy cseles paraméter... Akkor mi a megoldás rá? Mert sajnos JS-el meg a .htc-vel sem működik a pozícionálás :( Marad a div pozícionálása vagy az img padding meg margin trükkök? Az alphaimageloadernél nincs még mindig jobb trükk (márha ez a legjobb trükk egyáltalán)? THX
3

ez van..

vbence · 2007. Már. 23. (P), 12.45
Ezzel kell gazdálkodni.. de ha nem vagyok indiszkrét, milyen dizájnhoz kell ilyen extra cucc?
4

szigorúan titokos ;)

unregistered · 2007. Már. 23. (P), 14.00
Nem nem vagy indiszkrét egyáltalán... Pusztán egyszerűségből (legalábbis nekem egyszerűbbnek tűnik de ha tudsz valamit akkor ne habozz megosztani :D ) szeretném ezt a megoldást mert egy divnek adnék egy hátteret és akkor nem kell img-vel "szórakozni" vagy pedig több divvel ügyködni meg z-index-elni. Amúgy ez nem extra szerintem, max azért tűnik extrának mert az IE nem támogatja a png-ket ugye... viszont nekem meg szükségem van a transparency-re... csakhát a franc gondolta hogy nem támogatja ez a cselezés a pozícionálást :(
6

ezt, így nem fogadom el...

vbence · 2007. Már. 23. (P), 16.50
Fejtsd ki bővebben, vagy egy kulcsmondattal, pl "ismétlődő minta + ismeretlen magasságú div + árnyék" vagy bármit, mert így, hogy fix szélességet meg magasságot adsz a diveknek miért kell középre rendezni benne a png-t? Én nem értem :)
7

no akkor :)

unregistered · 2007. Már. 26. (H), 11.00
Szóval lenne egy belépő oldal aminek van egy háttere (ami ismétlődik majd de egyenlőre mégcsak a #f1e2a3 színt kapta) ezen középen van egy div mert úgy az elegáncos ugyebár ;) ennek a divnek van egy háttere ami egy png és átlátszó, ezen a div-en lenne egy kép amire kattintva belépünk az oldalra...

Ááá és most jövök rá miért nem értjük egymást... mert nekem nagyobb div kell mint amekkora a háttér mérete... mert az úgy tényelg szép és jó ha akkora divem van mint amekkora a hátterem:D
najó akkor másképp fogalmazok :D

Van egy 500*500-as középre igazított divem ennek szeretnék adni egy 300*300-as középre igazított hátteret és ezen a diven el szeretnék helyezni egy 400*400-as képet ami szintén középen van... az összes kép png és átlátszó...
Igen nem csodálom hogy furcsán néztél rám emiatt mert nem írtam le korábban tökéletesen hogy miért kell nékem ilyen... Persze ezek mind egyszerű és szép dolgok ha nem png-vel játszanék, dehát ugye a dízájn az kell :D
8

Kompozitálás?

vbence · 2007. Már. 26. (H), 11.07
Gondolom a 400x400as képnek lenne egy hover (aktív) állása, különben miért választanád szét őket (nem hiszem, hogy az oldal más részén még felhazsnálnád ezeket a képeket). - Ez szintén feltételezés, mert nem írtad le. :)

Vajon miért 500x500 a div, ha a legnagyobb tartalom benne 400x400? No de ez sem baj. Mi lenne, ha kompozitálád a két képet, és úgy lenne egy over és egy out állás, ennek a képnek a mérete pedig 500x500 lenne?
10

akkor marad :(

unregistered · 2007. Már. 26. (H), 12.07
Nah az 500-at csak a példa kedvéért írtam mert ha megnézed a legelső forráskódot, ott sem 500 van ;) Azért vannak szétvállasztva mert a a háttér az egy csicsás háttér grafika az img meg egy "gomb".
Arra gondolsz hogy mergeljem egybe a két képet? Erre már énis gondoltam de akkor az egész nagy képet kell betölteni a böngészőnek és amikor fölé viszi az egeret, akkor egy lassabb kapcsolatnál (és itt kifejezetten kérték hogy sok vidéki látogatja majd - ami 56k-s kapcsolatok tömegét jelentheti) nemtom mennyire szereti majd az over kép töltését ami egy ekkora képnél 142KB optimalizálva viszont az img képe meg csak 40KB. Ráadásul miért szivassam magam hogy még a kattintható területet is kicsilabizáljam mert nem éppen elegáns ha még a belépés gomb közelében sem jár az egér de máris kattintható ;) Amúgy nem gond mert marad úgy hogy két réteg van, csak reméltem hogy valaki már kitalálta hogy png-nél hogy s mint vannak ezek...
11

Flash?

vbence · 2007. Már. 26. (H), 12.12
A "belépés" oldal úgy is ellenjavallott dolog. Ha ezt meglépted, akkor nyugodtan lehet flashben, és levan a gond.
12

igaz! a flash jó lenne.

unregistered · 2007. Már. 26. (H), 12.43
Flash a felhasználók miatt nem lett, de énis örültem volna ha lehet... amúgy rendeltek egy oldalt saját design-al, a kissebb, kötelező változtatásokba beleszólhattam de amúgy nem... most mit csináljak mondjam vissza? :)) Maradt az ügyeskedés... :( Kiborító de ez van miért nem mentem orvosnak vagy ügyvédnek ;) Mindenesetre köszönöm az ötleteket meg a kitartást :)
5

én is

HSLaszlo · 2007. Már. 23. (P), 14.19
Én is belefutottam ebbe a problémába, átlátszó hátterű png-t pozicionálva egy div háttereként szerettem volna beilleszteni, még nem találtam rá megoldást. Egyenlőre kénytelen voltam gif-el megoldani, szerencsére sikerült viszonylag korrektül összeraknom a képet gif-ben. De nem adtam fel...
9

csúnya

unregistered · 2007. Már. 26. (H), 11.11
Énis már próbáltam gif-el de nagyon nem szép a transparent széle... sőt 128-as png-vel is próbáltam de az (majdnem) olyan mint a gif :( Te hogy optimailzáltad a gif-et?
13

gif optimalizálás

HSLaszlo · 2007. Már. 26. (H), 13.15
PS-el csináltam, szimpla mentés webre opcióval, a lényeg, hogy a az "egybefűzött" opció be legyen jelölve.
Feltettem egy minta képet és egy képernyőfotót: http://www.bluedesign.hu/png.html Gondolom nagyobb PS guruk több tippet tudnak adni, és természetesen sok múlik a képen is, minél kevesebb a szín, annál jobb lesz a kép, hiszen a gif 256 színt használ.
Ennek ellenére továbbra is nyomozok az áttetsző hátterű, IE hackelt png pozicionálásán. Hirtelen jutott eszembe, de ha beletennénk egy fix méretű div-be, és azt tennénk pozícióba? Ki fogom próbálni...
14

az úgy jó :)

unregistered · 2007. Már. 26. (H), 13.30
Az úgy jó ha fix a div méretei és azt rakod középre, azt már vbencével kiveséztük :) Az nem jó ha nagyobb a div mint a háttér kép... :(
15

bocs

HSLaszlo · 2007. Már. 26. (H), 14.16
Igaz, és elnézést, de nem olvastam végig újra az előzményeket, és írás közben ugrott be az ötlet. Természetesen a fix méretű div-en a háttérképpel megegyező méretet értettem, bár ez így valóban nem egyértelmű. Nálam egyébként nem középre, hanem egy jobboldali pozícióba kell tenni a képet, de úgy tűnik, a gif is jó megoldás.