achtergrond over achtergrond

PHP Newbie schreef op 07.12.2006 20:05

Post even je oplossing, dan hebben anderen er nog weer aan ;-)

Ken je dat doen:D alsjeblieft

Ik heb dit geprobeerd maar het werkt niet!!

In de head:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="includes/pngfix.js"></script>
<![endif]-->

En het script ziet er als volgt uit:
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}



maar het werkt niet!

Ik zie het probleem al! Ik sla de afbeelding op als PNG-24 maar dat kan niet! Als ik PNG-8 maak doet ie het wel maar dan krijg je weer zo'n foei lelijke afbeelding!!

Iemand tips om deze mooi op te slaan in Photoshop?

Het probleem is nu bijna opgelost!

ik heb nu:
#stralen {
width: 100%;
height: 100%;
position: relative;
background: url('images/stralen.png');
background-repeat: no-repeat;
background-position: top center;
behavior: url(includes/iepngfix.htc) top center;

En iepngfix.htc ziet er als volgt uit:
<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/


// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}

doFix();

</script>
</public:component>

Nou zit ik alleen met het volgende probleem:
In FF staat de het nog gewoon in het midden maar in IE niet!

IEmand een idee hoe ik dat kan herstellen?

ik weet waar het aan ligt maar ik ken javascript niet goed genoeg om het op te lossen.

de fout zit namelijk in de javascript die overschrijft je originele css met de door hem gemaakte dus ergens in je css moet je even aangeven dat hij het plaatje moet centeren.
[quote]
de helpfunctie die bij het script gaf nog een tip, maak een passende div en gebruik die voor alle overige css funties.
[/qoute]

In mijn div staat de afbeelding al gecentreerd!

Gebruik GEEN PNG, GEEN javascript en alles komt goed. Javascript om browser anomalies te bepalen... BAH
Desnoods kan je css hacks gebruiken, maar ook dat moet niet nodig zijn.
"transparent" is in elke browser een valid "background" value! GIF met transparency werkt in elke browser.
Dus waarom niet dat?

[edit]Heb je trouwens de site niet ergens online? Dan kunnen we zien wat je hebt gedaan. Ik neem aan dat ie ooit online komt, dus jatten kunnen we toch wel (zou dat een reden zijn om het niet online te zetten).[/edit]

@tommy, zucht. Het is het werk van designers en programeurs die buiten de box durven denken en risicos durven nenen die zorgen vooruitgang.

@jurgen lees anders zelf even de help misschien heb je nog wat aan de andere hinds of gebruik http://nvmac.nl/new/js/ie.js als png fix hier kan ik de css wel in aanpassen voor je

Bij deze de CSS:

html,body {
	margin: 0px;
	padding: 0px;
	color: #000000;
 	text-align: center;
	font-family: verdana;
	font-size: 0.85em;
	background: url('images/bg.jpg') center;
	background-repeat: repeat-y repeat-x;
	background-position: center center;	
}

#stralen {
 	width: 100%;
 	height: 100%;
	position: relative;
	background: url('images/stralen.png');
	background-repeat: no-repeat;
	behavior: url(includes/iepngfix.htc); 
	background-position: top center;
}

#container {
	width: 700px;
	margin: 0 auto;
	position: relative;
	text-align: justify;
 	font-family: verdana
  	border: 10px solid orange;
}

#container #header {
	background: url('images/header.jpg') right;
	width: 700px; 
	height: 198px; 
	background-repeat:no-repeat
}

#container #menu {
	width: 700px;
	height: 48px;
}

En hier de HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>

<div id="stralen">
<div id="container"><br><br><br><br>
<div id="header"></div>
<div id="menu"><img src="images/01.png">&nbsp;&nbsp; Home &nbsp;&nbsp;<img src="images/02.png">&nbsp;&nbsp; Fotos</div>
</div>

</div>



</body>
</html>

Probleem is opgelost!!

Zoals hierboven:

html,body {
	margin: 0px;
	padding: 0px;
	color: #000000;
 	text-align: center;
	font-family: verdana;
	font-size: 0.85em;
	background: url('images/bg.jpg') center;
	background-repeat: repeat-y repeat-x;
	background-position: center center;	
}

#stralen {
 	width: 100%;
 	height: 500px;
	position: relative;
	background-color: transparant;
	background: url('images/stralen.png');
	background-repeat: no-repeat;
	background-position: top center;
}

#container {
	width: 700px;
	margin: 0 auto;
	position: relative;
	text-align: justify;
 	font-family: verdana
  	border: 10px solid orange;
}

#container #header {
	background: url('images/header.jpg') right;
	width: 700px; 
	height: 198px; 
	background-repeat:no-repeat
}

#container #menu {
	width: 700px;
	height: 48px;
}

background-color: transparant; is dus de oplossing