[HTML/CSS] Tranparante PNG onde IE laten werken

woensdag 14 juni 2006 02:02

Silence..........

Topicstarter

Hmm ik was dus weer eens te lui

Bedankt

To rule the entire world your servants should be loyal .

Acties:

Verwijderd

Mocht je het antwoord nog niet gevonden hebben dan heb ik volgend stukje code voor je:

code voor div

HTML:

...
<body onload="png_transparent('container', 'transparante.png');">
<div id="container" style="background-image:url('transparante.png');">inhoud</div>
...

de javascript code (die je eventueel in je body onload uitvoert

JavaScript:

    // Super, check if the visitor is using MSIE < 7
    var isExp = (navigator.userAgent.indexOf("MSIE") != -1 && 
    navigator.userAgent.indexOf("Opera") == -1);
    
    var isnotIE7 = false;
    // if so, let's check if he's not using 7, 'cause 7 has png support (it's about time)
    if(isExp)
    {
        var version = navigator.userAgent.split("MSIE ")[1];
        version = version.split(";")[0];
        version = parseInt(version);
        isnotIE7 = (version < 7);
    }
    
    // the magic function that makes png's transparent in MSIE
    function png_transparent(id, pic){
        // so, if he's using MSIE < version 7 then...
        if (isExp && isnotIE7){
            // apply some ugly microsoft filters, brrrr
            document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = '" + pic + "', sizingMethod = 'scale')";
            document.getElementById(id).style.backgroundImage = "url('transparent.gif')";
        }
    }

enkel nog een transparante gif aanmaken en opslaan als transparant.gif

[ Voor 13% gewijzigd door Verwijderd op 14-06-2006 02:04 ]

woensdag 14 juni 2006 02:06

Acties:

Blaise

Zoveel code heb je niet eens nodig. Zie http://zopp.nl/dump/png/

woensdag 14 juni 2006 13:29

Acties:

woensdag 14 juni 2006 13:37

Silence..........

Topicstarter

Blaise schreef op woensdag 14 juni 2006 @ 02:06:
Zoveel code heb je niet eens nodig. Zie http://zopp.nl/dump/png/

De achtergrond moet transparant zijn, niet een plaatje......

To rule the entire world your servants should be loyal .

Acties:

woensdag 14 juni 2006 13:42

Silence..........

Topicstarter

Verwijderd schreef op woensdag 14 juni 2006 @ 02:02:
Mocht je het antwoord nog niet gevonden hebben dan heb ik volgend stukje code voor je:

Dus als volgt:

HTML:

<body background="images/bluebackbigtrans2.png" onload="png_transparent('container', 'images/bluebackbigtrans2.png');">

<div id="container" style="background-image:url('images/bluebackbigtrans2.png');">

Inhoud

</div>

Hoe krijg ik nou die JS erin?
Normaal zou ik dat zo doen:

HTML:

<script type="text/javascript" src="js/png.js">
<!--

// -->
</script>

maar dat werkt hier dus niet omdat het in de body zit

To rule the entire world your servants should be loyal .

Acties:

woensdag 14 juni 2006 13:43

Sitethief schreef op woensdag 14 juni 2006 @ 13:29:
[...]

De achtergrond moet transparant zijn, niet een plaatje......

Dat doet hij toch ook?

Broncode http://zopp.nl/dump/png/ :

HTML:

<title>PNG transparantie</title>

<style>
    body{
        background:url(bg.gif) repeat;
        text-align:center;
    }

    /* alle browsers */
    div{
        width:600px;
        height:360px;
        margin:100px auto;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparant.png');
    }

    /* moderne browsers gewone PNG */
    body>div{
        background:url('transparant.png') no-repeat
    }
</style>

<div></div>

Misschien niet helemaal correcte HTML

, maar volgens mij is dat wel degelijk een background voor een div. Of ik ben abuis, dat kan natuurlijk ook...

[ Voor 9% gewijzigd door arieleks op 14-06-2006 13:44 . Reden: Kromme zin recht getrokken ]

- Rietberg - sieben Mal sympatisch -

There are only 10 types of people, those who make stupid jokes about binary numbers and those who don't.

Acties:

besmart

fanta share the fun

Maar wat als je geavanceerde mouse over menu's hebt etc.?
Installeer deze meuk javascript en alles is bassie

http://dean.edwards.name/IE7/

BeSmart! Everything goes well | photographs by Canon EOS 5D - Canon L 24-70 USM - Canon 70-300 USM IS

woensdag 14 juni 2006 13:49

Acties:

woensdag 14 juni 2006 13:50

Silence..........

Topicstarter

Het is niet de bedoeling dat de background van een div transparant is maar de achtergrond van een html pagina.

HTML:

<body background="transparant.png">

inhoud

</body>

daar dus..........

To rule the entire world your servants should be loyal .

Acties:

woensdag 14 juni 2006 13:54

besmart schreef op woensdag 14 juni 2006 @ 13:43:
Maar wat als je geavanceerde mouse over menu's hebt etc.?
Installeer deze meuk javascript en alles is bassie

http://dean.edwards.name/IE7/

offtopic:
Hmm, leuk, meuk javascript releasen onder LGPL, maar wel de code obfuscaten.

- Rietberg - sieben Mal sympatisch -

There are only 10 types of people, those who make stupid jokes about binary numbers and those who don't.

Acties:

woensdag 14 juni 2006 13:59

Sitethief schreef op woensdag 14 juni 2006 @ 13:49:
Het is niet de bedoeling dat de background van een div transparant is maar de achtergrond van een html pagina.

My bad, ik zie dat je dus de achtergrond van dat iframe transparent wilt hebben ten opzichte van de achtergrond van de hele pagina. Of ben ik wederom abuis?

[ Voor 1% gewijzigd door arieleks op 14-06-2006 13:55 . Reden: die -> dat ]

- Rietberg - sieben Mal sympatisch -

There are only 10 types of people, those who make stupid jokes about binary numbers and those who don't.

Acties:

woensdag 14 juni 2006 14:02

Silence..........

Topicstarter

arieleks schreef op woensdag 14 juni 2006 @ 13:54:
[...]

My bad, ik zie dat je dus de achtergrond van dat iframe transparent wilt hebben ten opzichte van de achtergrond van de hele pagina. Of ben ik wederom abuis?

Je bent correct

To rule the entire world your servants should be loyal .

Acties:

woensdag 14 juni 2006 14:07

Sitethief schreef op woensdag 14 juni 2006 @ 13:59:
[...]

Je bent correct

Waarom gebruik je een iframe eigenlijk? En waarom niet gewoon een div-je?

- Rietberg - sieben Mal sympatisch -

There are only 10 types of people, those who make stupid jokes about binary numbers and those who don't.

Acties:

woensdag 14 juni 2006 15:11

Silence..........

Topicstarter

arieleks schreef op woensdag 14 juni 2006 @ 14:02:
[...]

Waarom gebruik je een iframe eigenlijk? En waarom niet gewoon een div-je?

Daar wil ik uiteindelijk naar toe werken maar omdat ik tot nu toe nog nooit met div gewerkt heb kan dat nog wel even duren. Hele website is iframe/table based en ombouwen lijkt me beetje complex.Moet me eerst een beetje in de materie verdiepen (iemand een goede website waar div GOED word uitgelegd/beschreven?)

http://fysiotherapierhijnvisfeith.nl/div/layout.php voor de div based website (werk in uitvoering)

To rule the entire world your servants should be loyal .

Acties:

woensdag 14 juni 2006 15:45

❤ 

Ik vind Modern Markup een heel mooi begin om goed begrip van semantisch HTML schrijven te krijgen. Website is nog wel in aanbouw (zie ook een bijbehorend topic elders hier in WEB).

Belangrijk is in ieder geval wel dat je goed begrijpt waar je mee bezig bent (of gaat). Als ik mensen hoor zegen dat ze "met div gaan werken" dan krijg ik altijd het gevoel dat ze het nog niet helemaal begrepen hebben. Al snel worden divs dan gebruikt als directe vervanging van tabel-cellen, en dat is natuurlijk niet de bedoeling. Of je nu de opmaak met tabellen doet, of met divs die je (absoluut) positioneert als tabellen, het is beide even fout

Het "nieuwe webontwikkelen" heeft namelijk niet zo zeer met het gebruik van divs te maken, maar richt zich meer op semantisch werken (zie http://home.parse.nl/~michiel/semantiek.html voor een duidelijke uitleg over semantiek). In die werkwijze zijn divs vaak niet meer dan een hulpmiddel om "grammaticaal bij elkaar horende" onderdelen te groeperen. Gebruik zo veel mogelijk elementen die goed bij de inhoud passen, en probeer zo weinig mogelijk divs te gebruiken

[ Voor 3% gewijzigd door Zoefff op 14-06-2006 15:19 ]

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

Acties:

woensdag 14 juni 2006 15:47

Silence..........

Topicstarter

-dubbelpost-

[ Voor 99% gewijzigd door Sitethief op 14-06-2006 15:48 ]

To rule the entire world your servants should be loyal .

Acties:

woensdag 14 juni 2006 16:08

Silence..........

Topicstarter

Zoefff schreef op woensdag 14 juni 2006 @ 15:11:
Ik vind Modern Markup een heel mooi begin om goed begrip van semantisch HTML schrijven te krijgen. Website is nog wel in aanbouw (zie ook een bijbehorend topic elders hier in WEB).

Belangrijk is in ieder geval wel dat je goed begrijpt waar je mee bezig bent (of gaat). Als ik mensen hoor zegen dat ze "met div gaan werken" dan krijg ik altijd het gevoel dat ze het nog niet helemaal begrepen hebben. Al snel worden divs dan gebruikt als directe vervanging van tabel-cellen, en dat is natuurlijk niet de bedoeling. Of je nu de opmaak met tabellen doet, of met divs die je (absoluut) positioneert als tabellen, het is beide even fout

Het "nieuwe webontwikkelen" heeft namelijk niet zo zeer met het gebruik van divs te maken, maar richt zich meer op semantisch werken (zie http://home.parse.nl/~michiel/semantiek.html voor een duidelijke uitleg over semantiek). In die werkwijze zijn divs vaak niet meer dan een hulpmiddel om "grammaticaal bij elkaar horende" onderdelen te groeperen. Gebruik zo veel mogelijk elementen die goed bij de inhoud passen, en probeer zo weinig mogelijk divs te gebruiken

Mij werd div aangeraden omdat ik van scroll bars in het iframe af wou. Maar nu ik wat over div gelezen heb zie ik niet waarom ik er tijd in zou steken als de website nu ook werkt. In tegenstelling tot wat ik overal lees vind ik het er niet makelijker op worden. Table en iframe zijn voor mij logisch en makkelijk te doorgronden. Div en alles erom heen maakt het voor mij te chaotisch.

Ik houd het voorloopig maar bij table en iframe........

To rule the entire world your servants should be loyal .

Acties:

woensdag 14 juni 2006 16:17

❤ 

Je moet het natuurlijk zelf weten, maar neem van mij aan: semantisch werken is écht een stuk beter. Zeker op de lange termijn veel makkelijker te onderhouden, overzichtelijker, beter te vinden door zoekmachines, logischer qua opbouw, etc.

Om als praktijkvoorbeeldje maar de tekst op jouw startpagina te nemen:

HTML:

<body background="images/bluebackbigtrans2.png">
<table align="center">
<tr align="center">
<td colspan="2"><span class="c1">Welkom op de site van
Fysiotherapie<br>
"Rhijnvis Feith"</span></td>

</tr>
<tr>
<td colspan="2"><br></td>
</tr>
<tr align="center">
<td>Om u beter van dienst te zijn, zijn wij nu ook bereikbaar via
internet.</td>
</tr>
<tr>
<td><br></td>
</tr>
<tr align="center">
<td><img src="images/fotos/homebehandel.jpg" alt="behandeling"></td>
</tr>
<tr>
<td><br></td>

</tr>

<tr align="center">
<td>Lees op deze pagina over ons team, hoe u ons kunt bereiken voor
afspraken en waar u ons kunt vinden.<br>
Via de website kunt u ook vragen stellen</td>
</tr>
</table>
</body>

Een kop, wat tekst, een plaatje, en dan weer wat tekst. Omgeven door een hele zut aan tags voor de tabel die eigenlijk helemaal nergens voor nodig is. Daarnaast snap jij misschien dat 'class="cl"' een kop moet voorstellen (en dat zien wij ook), maar een zoekmachine of bijvoorbeeld speciale browser voor visueel gehandicapten kan daar natuurlijk geen soep van koken.

Beter zou dit zijn:

HTML:

<body>
    <h1>Welkom op de site van Fysiotherapie<br>"Rhijnvis Feith"</h1>
    <p>Om u beter van dienst te zijn, zijn wij nu ook bereikbaar via internet.</p>
    <p><img src="images/fotos/homebehandel.jpg" alt="behandeling"></p>
    <p>Lees op deze pagina over ons team, hoe u ons kunt bereiken voor afspraken en waar u ons kunt vinden.<br>Via de website kunt u ook vragen stellen.</p>
</body>

De tags beschrijven nu duidelijk de inhoud, h1 bevat een kop of titel, p bevat een paragraaf tekst. Vervolgens nog een stukje CSS om de opmaak in orde te maken:

Cascading Stylesheet:

body {
    background-image:url("images/bluebackbigtrans2.png");
}
h1 {
    color:#000099; 
    font-size:144%;
    text-align:center;
}
p {
    text-align:center;
}

Als het goed is, ziet het er nu exact hetzelfde uit. Een flinke verbetering toch?

Maargoed, ik begrijp best dat dit nieuwe materie is en dat je het liever op de oude manier afmaakt. Houd het toch wel in je achterhoofd, en onthoud dat deze manier absoluut niet chaotischer is

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

Acties:

woensdag 14 juni 2006 16:40

Silence..........

Topicstarter

Voor dit project houd ik het even bij de oude manier, voor de beoordeling van mijn leraar maakt het toch geen ene zak uit (die heeft zelf websites met <img> zonder alt enz.). Voor mijn eigen website die nog gebouwd moet worden ben ik wel vanh plan om het op de 'juiste' manier te doen, maar daar heb ik ook geen deadline en streef ik wel perfectie na.

Een ding snap ik trouwens niet, hoe kan ik een iframe vervangen door iets beters, een div heeft toch geen src ??

Maargoed, ik begrijp best dat dit nieuwe materie is en dat je het liever op de oude manier afmaakt. Houd het toch wel in je achterhoofd, en onthoud dat deze manier absoluut niet chaotischer is

De uitkomst van de methode is niet chaotisch. Maar voor mij is niet duidelijk wanneer ik <p> <h1> <span> <div> enz zou moeten gebruiken, simpelweg omdat ik het nooit gebruikt heb.

[ Voor 32% gewijzigd door Sitethief op 14-06-2006 16:24 ]

To rule the entire world your servants should be loyal .

Acties:

zondag 18 juni 2006 17:51

❤ 

Er bestaat geen vervanger van het iframe. Je kan dit beter aanpakken met een serverside taal als PHP of ASP, en de pagina's als 1 geheel serveren. Er zijn wel constructies te maken met b.v. een div die je met JavaScript ververst, maar dat is ook niet echt ideaal.

Wat betreft de betekenins van de verschillende elementen en waneer je ze gebruikt; dat wordt op de website die ik al opperde best goed uitgelegd toch? Daarnaast is er met wat zoekwerk ook nog een hele hoop over te vinden. Haal desnoods een boek bij de bieb wat het duidelijk uitlegt. Dat leert vaak ook nog eens prettiger dan vanaf het web

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

Acties:

zondag 18 juni 2006 18:26

Silence..........

Topicstarter

Maar terug naar de vraag die ik aan het begin stelde, is het mogelijk om Transparante PNG support onder IE ook voor een background voor elkaar te krijgen?

To rule the entire world your servants should be loyal .

Acties:

zondag 18 juni 2006 21:32

❤ 

Die vraag word in de eerste reply al (bevredigend) beantwoord.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

Acties:

zondag 18 juni 2006 22:54

Silence..........

Topicstarter

Zoefff schreef op zondag 18 juni 2006 @ 18:26:
Die vraag word in de eerste reply al (bevredigend) beantwoord.

Nou ik heb tot nu toe alles geprobeerd maar niks werkt. Kan aan mij liggen hoor maar alles oplossingen die ik tot nu toe lees gaan uit van een van de volgende tags:
[code=html]
[img]"bla.png"> <div></div> [/code] http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html betreft[/img] tag

http://dean.edwards.name/IE7/

Geweldig! Als het zou werken...............

http://zopp.nl/dump/png/

Anders dan de poster meent gaat het hier niet om een transparante background maar om een transparante png in een <img>

http://arcok.ujevangelizacio.hu/bubu/examples/ie-png.html

Wordt toegepast op een <div>, daarnaast kan ik geen hongaars....

To rule the entire world your servants should be loyal .

Acties:

Rowanov

Kop eens wat anders...

Sitethief schreef op zondag 18 juni 2006 @ 21:32:
Anders dan de poster meent gaat het hier niet om een transparante background maar om een transparante png in een <img>

Zie jij een image element in de betreffende div? Neen! Probeer het dus gewoon eens uit en wijs de oplossing niet af omdat je niet begrijpt wat er gedaan wordt.

zondag 18 juni 2006 23:03

Acties:

zondag 18 juni 2006 23:11

Silence..........

Topicstarter

Ze zetten een gifje op de achtergrond neer en daarover heen komt een transparante png. Bij mij is er een png op de achtergrond die transparamt moet zijn en niet een plaatje op de voorgrond, sterker nog he tplaatje op de voorgrond speelt bij mij helemaal geen rol omdat het een jpg is. Het is juist de achtergrond van de index pagina die door de achtergrond van het iframe heen moet komen. Kan aan mij liggen maar ik zie niet hoe dit van toepasing is op mijn site?

Maar goed ik zal eens proberen dit te implementeren.......

To rule the entire world your servants should be loyal .

Acties:

zondag 18 juni 2006 23:26

Silence..........

Topicstarter

resultaat: werkt niet en Mag niet

Dat is als ik het goed geintepreteerd heb:

Cascading Stylesheet:

BODY              {
                     color: White;
                     background-repeat: no-repeat;
                          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bluebackbigtrans2.png');
                        }

To rule the entire world your servants should be loyal .

Acties:

Rowanov

Kop eens wat anders...

Wat wil je bereiken met het transparant maken van de achtergrond van je body? Daar wordt je iframe niet transparant van. Daarnaast is, zoals al vaker gezegd, een iframe echt totaal ongeschikt voor zulk soort dingen. Wees koppig, houd er vooral aan vast en ik wens je veel uren plezier met het zoeken naar een oplossing zonder ooit tot een resultaat te komen. Wees verstandig en volg het advies op om je iframe te ditchen en de pagina indeling gewoon met een simpel php script te regelen.

Jij wilt het iframe/ de div doorzichtig; doe dat dan ook en maak niet de achtergrond doorzichtig.

maandag 19 juni 2006 00:00

Acties: