✔ PNG Behavior

kevkev · 14. September 2005

Hallo,

Ich habe ein paar Divs mit Größen Angaben auf meiner Seite, die PNG´s mit Transparenz sind.
Ich habe dann das PNG Behavior von dieser Seite eingebaut:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Nur funktioniert das ganze nur mit <img, aber jedoch nicht mit div´s, wenn die transparente PNG´s im Hintergrund sind.

Wie mache Ich es möglich, dass das behavior auch da funktioniert?

Gruß Kevin

psifactory · 2. November 2006

Will eigentlich keine uralten Threads erwärmen, aber ich stehe gerade vor dem selben Problem wie oben angegeben. Aber ich finde keine Lösung...

Hoffe das macht nichts wenn ich den Thread mal aufwärme!

Maik · 2. November 2006

Kein Problem

IE PNG Alpha Fix Demonstration unterstützt auch Hintergrundbilder.

psifactory · 2. November 2006

mh.. Funktioniert nicht so wirklich. Hab das JoomlaTemplate mal hier hochgeladen.

Bist du sicher, dass auch divs unterstützt werden?

Edit: Funktioniert Doch! Aber jetzt hab ich das Problem dass mein Layout irgendwie zerschossen wird

Seite hier aufrufen: http://www.beatology.de

CSS

Code:

/*
D4 Magic Blue Template für Joomla
----------------------------------------------
Autor: Sebastian Schneider - D4media
Bei Fehlern freue ich mich über eine Rückmeldung
per Email an info@digital4.de. Danke!
-----------------------------------------------
*/


/*PNG Hack*/

img, div { behavior: url(iepngfix.htc) }

/*Allgemeine Seiten-Informationen*/

body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size:11px;
	background-image:url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #000000;
	color:#CCCCCC;
}

td {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size:11px;
}
th {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size:11px;
}

a:link {
	text-decoration: underline;
	color: #CCCCCC;
}
a:visited {
	text-decoration: underline;
	color: #CCCCCC;
}
a:hover {
	background-color: #0099CC;
	color: #000033;
}
a:active {
	text-decoration: underline;
	color: #CCCCCC;
}

/*DIV-Container*/

#main {
	width: 800px;
	padding: 0px;
	margin: 0px;
}

#header-top-outer {
	width:800px;
	height:24px;
	 
	background-image:url(../images/content.png);
	background-repeat:repeat;
	border: none;
	color: #CCFF00;
	text-align:left;
}

#topmenu {
	height: 20px;
	float: right;
	width: 600px;
}

#suche {
	margin: 0px;
	padding: 0px;
	width: 148px;
	float: left;
	background: url(../images/back_search.jpg) right top no-repeat;
	padding-left: 5px;
	padding-top: 3px;
	vertical-align: middle;
}

#header-main-outer {
	width:800px;
	height:115px;
	margin-top:5px;
	 
	background-image:url(../images/header.png);
	background-repeat:no-repeat;
	border: none;
}

#header-main-inner {
	padding:10px;
	text-align:right;
	color: #CCCCCC;
}

#header-bottom-outer {
	width:800px;
	height:24px;
	margin-top:-5px;
	 
	background-image:url(../images/content.png);
	background-repeat:repeat-x;
	border: none;
	text-align:left;
	font-size:10px;
	font-weight:bold;
	color: #CCFF00;
}

#pathway-inner{
	text-align:left;
	width:500px;
	padding:5px;
}
#datum {
	width:250px;
	float:right;
	text-align:right;
	padding:5px;
}

#leftblock-outer {
	width:180px;
	float:left;
	margin-top:5px;
}

#leftblock-inner{
}

#content-outer{
	width:613px !Important;
	width:603px;
	float:right;
	margin-top:5px;
	border: none;
	 
	background-image:url(../images/content.png);
	background-repeat:repeat;
	margin-bottom:5px;
}

#content-inner{
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px;
}

#footer-outer{
	width:800px;
	line-height:33px;
	clear:both;
}
#footer-inner{
	 
	background-image:url(../images/content.png);
	background-repeat:repeat-x;
	border: none;
	margin-top:5px;
	line-height:23px;
	text-align:center;
	font-size:10px;
	font-weight:bold;
}

/*Mainlevel Menü*/

a.mainlevel:link, a.mainlevel:visited {

	font-size:12px;
	display: block;
	font-weight: normal;
	color:#333333;
	text-align: left;
	line-height: 20px;
	text-decoration: none;
	background-image :url(../images/mainlevel-bg1.jpg);
	background-repeat:no-repeat;
	text-indent:20px;
	height: 20px;
	border-top: none;
}
a.mainlevel:hover {

	font-size:12px;
	display: block;
	vertical-align: middle;
	font-weight: bold;
	color: #CCFF00;
	text-align: left;
	padding-top: 0px;
	text-decoration: none;
	background-image :url(../images/mainlevel-bg2.jpg);
	background-repeat:no-repeat;
	text-indent:20px;
	height: 20px;
	line-height: 20px;
	border-top: none;
}
a.mainlevel#active_menu {

	font-size:12px;
	display: block;
	vertical-align: middle;
	font-weight: bold;
	color: #333333;
	text-align: left;
	padding-top: 0px;
	text-decoration: none;
	background-image :url(../images/mainlevel-bg1.jpg);
	background-repeat:no-repeat;
	text-indent:20px;
	height: 20px;
	line-height: 20px;
	border-top: none;
}

/*Mainlevel Menü*/

a.sublevel:link, a.sublevel:visited {

	font-size:12px;
	display: block;
	font-weight: normal;
	color:#333333;
	text-align: left;
	line-height: 20px;
	text-decoration: none;
	background-image :url(../images/sublevel-bg1.jpg);
	background-repeat:no-repeat;
	border: none;
	text-indent:20px;
	height: 20px;
}
a.sublevel:hover {

	font-size:12px;
	display: block;
	vertical-align: middle;
	font-weight: bold;
	color: #CCFF00;
	text-align: left;
	padding-top: 0px;
	text-decoration: none;
	background-image :url(../images/sublevel-bg1.jpg);
	background-repeat:no-repeat;
	text-indent:20px;
	border: none;
	height: 20px;
	line-height: 20px;
}
a.sublevel#active_menu {

	font-size:12px;
	display: block;
	vertical-align: middle;
	font-weight: bold;
	color: #333333;
	text-align: left;
	padding-top: 0px;
	text-decoration: none;
	background-image :url(../images/sublevel-bg1.jpg);
	background-repeat:no-repeat;
	text-indent:20px;
	height: 20px;
	border: none;
	line-height: 20px;
}


/*Modulüberschrift*/

div.moduletable h3 {
	color:#CCFF00;
	width:178px !Important;
	width:180px;
	padding:0px;
	margin:0px;
	line-height:23px;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	background-image:url(../images/h3-bg.jpg);
	background-repeat:repeat-x;
}

/* Überschriften */

div.componentheading{
	color: #CCFF00;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:20px;
	text-transform:uppercase;
	line-height:23px;
	border-bottom:1px dotted #CCFF00;
	margin:0px;
	padding:0px;
	background-image:url(../images/h3-bg.jpg);
	background-repeat:repeat-x;
}
div.contentheading{
	color:#CCFF00;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:20px;
	text-transform:uppercase;
	line-height:23px;
	border-bottom:1px dotted #CCFF00;
	margin:0px;
	padding:0px;
	background-image:url(../images/h3-bg.jpg);
	background-repeat:repeat-x;
}
.componentheading{
	color:#CCFF00;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:20px;
	text-transform:uppercase;
	line-height:23px;
	border-bottom:1px dotted #CCFF00;
	margin:0px;
	padding:0px;
	background-image:url(../images/h3-bg.jpg);
	background-repeat:repeat-x;
}
.contentheading{
	color:#CCFF00;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:20px;
	text-transform:uppercase;
	line-height:23px;
	border-bottom:1px dotted #CCFF00;
	margin:0px;
	padding:0px;
	background-image:url(../images/h3-bg.jpg);
	background-repeat:repeat-x;
}

/* Andere Joomla-spezifische Definitionen*/

table.blog {
	width:100%;
}

table.contentpaneopen{
	width:100%;
}

table.contentpane {
	width:100%
}

table.moduletable {
	background-image:url(../images/content.png);
	 
	background-repeat:repeat;
	border: none;
}

div.moduletable {
	background-image:url(../images/content.png);
	 
	background-repeat:repeat;
	border: none;
	margin-bottom:5px;
}

.createdate{
	font-size:10px;
	color: #666666;
}

.modifydate{
	font-size:10px;
	color: #666666;
}

.small{
	font-size:10px;
	font-weight:bold;
	color: #CCCCCC;
}

.button{
	border: solid #003366 1px;
	background-color: #006699;
	padding-top:0px;
	padding-bottom:2px;
	margin-top:5px;
}

.back_button{
	border: solid #003366 1px;
	background-color: #006699;
	padding-top:0px;
	padding-bottom:2px;
	width:70px;
}

.mosimage_caption{
	font-size:10px;
}

fieldset {
	width:575px !Important;
	width:595px;
	white-space:normal;
	overflow:hidden;
	max-width:575px !Important;
	max-width:595px;

}

#suche .inputbox{
	width: 100px;
	height: 15px;
	font-size: 10px;
	background: #006699;
	border: 1px solid #000033;
	margin: 0px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:2px;
	line-height: 15px;
}

#suche .button{
	margin: 0px;
	padding: 0px;
	height: 14px;
	font-size: 10px;
	background: transparent;
	border: none;
	line-height: 10px;
}

#suche form {
	margin: 0px;
	padding: 0px;
}

tr.sectiontableentry1{
	background-color: #003366;
	border-bottom:1px solid #333333;
}

.sectiontableentry2{
	background-color: #000066;
	border-bottom:1px solid #333333;
}

Maik · 2. November 2006

Ja, ich bin mir sicher, dass das Script auch DIVs unterstützt, ansonsten würde ich hier nicht den Link posten

Vielleicht solltest du einfach in den ID-Selektoren die behavior-Eigenschaft rausnehmen?

psifactory · 2. November 2006

Ok. Problem gelöst. Danke dir noch vielmals..

supachecka · 26. November 2007

Also das Script ist genau das was ich gesucht habe. Leider habe ich aber noch ein Problem damit: In der Dokumentation steht dass das ganze nicht mit gekachelten Hintergrundgrafiken geht, und siehe da, probiert man es aus verschwindt die Grafik ganz

Also meine Frage dazu, gibt es vllt noch eine Möglichkeit das zu fixen?
Das Thema ist zwar schon etwas älter, aber vielleicht kann mir ja trotzdem noch wer helfen...

Maik · 26. November 2007

Hi,

schau mal hier: Cross-browser semi-transparent backgrounds.

Code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png');

Mit sizingMethod=scale wird das Hintergrundbild wiederholt.

supachecka · 26. November 2007

ahh super danke

supachecka · 26. November 2007

verdammt leider zu für gefreut, habe in dem bereich ein formular und die felder lassen sich nun nicht mehr auswählen...

---bearbeitet---

Wichtig ist zu beachten, dass die Hintergrundgrafik für den teiltransparenten Bereich nicht höher sein darf, als ein Pixel. Sonst werden interaktive Elemente, wie z.B. Verweise oder Formulare unbenutzbar. Der dritte Bereich auf der Beispielseite stellt diesen Effekt dar.

Bleibt mir wohl nur mich wieder maßlos über den IE aufzuregen...

Nochmal der Link, wo man alles nachlesen kann http://um-fritz.de/teiltransparenz.
---------------------

außerdem noch eine grundsätzliche frage, geht das dort beschrieben auch mit IDs?

HTML:

/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
  background-image:url(/75p_honey.png);
}

✔ PNG Behavior

kevkev

Erfahrenes Mitglied

psifactory

Erfahrenes Mitglied

Maik

psifactory

Erfahrenes Mitglied

Maik

psifactory

Erfahrenes Mitglied

supachecka

Mitglied

Maik

supachecka

Mitglied

supachecka

Mitglied

Neue Beiträge