Ga naar inhoud

tabelachtergrond half transparant


anoniem

Aanbevolen berichten

Ik vroeg me af of het mogelijk is om bij bijv het volgende voorbeeld de achtergrond kleur van de tabel een soort half transparante kleur te geven zodat de achtergrond image van de totale pagina er nog een beetje door heen komt? [code:1:5d90e473dc] <html> <head> <title>voorbeeld</title> </head> <body background="background.jpg"> <table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#800000" width="400" bgcolor="#C0C0C0"> <tr> <td width="100%"><font color="#800000"> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla </font></td> </tr> </table> </body> </html> [/code:1:5d90e473dc] Alvast bedankt voor je reactie!
Link naar reactie
Ja, geef de tabel een class als bv 'totaletabel' en koppel een stylesheet aan je HTML bestand. Neem dan in je CSS hetvolgende op: .totaletabel { filter:alpha(opacity=??); } En vervang '??' door de procentuele waarde der doorschijning! 8) Houd er wel rekening ee dat alphablending binnen IE 5.5 nogal sloom werkt. Vooral met textarea's en input's enz, is het zeker niet aan te raden. De 'betere browsers' zoals Mozilla, Opera, Konqueror of Safari kunnen dit allemaal wel goedaan. Ik stel voor dat we met z'n allen een briefje schrijven naar ome Bil dat ie z'n browser een beetje gaat fatsoeneren?? Veel succes ermee..
Link naar reactie
[quote:e22e7ff07e="Stefan Nagtegaal"]Ja, geef de tabel een class als bv 'totaletabel' en koppel een stylesheet aan je HTML bestand. Neem dan in je CSS hetvolgende op: .totaletabel { filter:alpha(opacity=??); } En vervang '??' door de procentuele waarde der doorschijning! 8)[/quote:e22e7ff07e] Ik heb het geprobeerd wat je zei, maar bij mij doet ie het niet. Ik heb het volgende voorbeeldje gemaakt: [b:e22e7ff07e]De HTML file[/b:e22e7ff07e] [code:1:e22e7ff07e] <html> <head> <title>voorbeeld</title> <LINK REL="StyleSheet" HREF="test.css" TYPE="text/css"> </head> <body background="background.jpg"> <table class="$totaletabel" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF0000" width="400" bgcolor="#FFFFFF"> <tr> <td width="100%"><font color="#800000"> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla </font></td> </tr> </table> </body> </html> [/code:1:e22e7ff07e] [b:e22e7ff07e]De CSS file[/b:e22e7ff07e] [code:1:e22e7ff07e] /* CSS Document */ BODY { background-color: #000000; } .totaletabel { filter: alpha(opacity=50); } [/code:1:e22e7ff07e] Ik zelf gebruik Windows XP met IE 6 Kan het dan kloppen dat het niet werkt of zit er toch nog iets fout in de Codes ? Gr. Ferry
Link naar reactie
[quote:59e03d0733]<table class="$totaletabel" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF0000" width="400" bgcolor="#FFFFFF">[/quote:59e03d0733] Waarom de '[i:59e03d0733] class="$totaletabel"[/i:59e03d0733]' en niet gewoon '[i:59e03d0733]class="totaletabel"[/i:59e03d0733]', zoals het hoort? Je zult zien dat t dan al een stuk beter werkt! :-) Als je nog meer problemen hebt, hoor ik het wel... <ff een tip> Probeer veel meer CSS te gebruiken. het scheelt code in de HTML-files en het geheel wordt een stuk overzichtelijker. Voor meer info over CSS, kijk [url=http://www.w3schools.com/]hier[/url]! </ff een tip>[/url][/i]
Link naar reactie
mmm....het werkt nu wel maar als ik nou bijv. een plaatje in een cel plaats die in die tabel zit met de transparante achtergrond dan wordt het plaatje ook transparant. Is dit een bekend probleem of moet ik dan een CSS commando aanmaken en die als CLASS in die cel zetten om het plaatje niet transparant te laten worden ?
Link naar reactie
Ik heb nu het volgende voorbeeld in elkaar geflanst maar dit werkt helaas niet, Bas. Is er iemand die misschien een idee heeft als hij deze voorbeeld codes ziet? [b:4f4ba25238]HTML File[/b:4f4ba25238] [code:1:4f4ba25238] <html> <head> <title>voorbeeld</title> <LINK REL="StyleSheet" HREF="test.css" TYPE="text/css"> </head> <body background="background.jpg"> <table border="2" cellpadding="0" cellspacing="0" bordercolor="#FF0000" width="400" class="totaletabel" bgcolor="#C0C0C0"> <tr><td> <table class="transparantuit" width="100%"> <tr> <td> <font color="#000000"> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br> </font> <img src="plaatje.gif"> </td> </tr> </table> </td></tr> </table> </body> </html> [/code:1:4f4ba25238] [b:4f4ba25238]CSS File[/b:4f4ba25238] [code:1:4f4ba25238] /* CSS Document */ BODY { background-color: #000000; } .totaletabel { filter: alpha(opacity=45); } .transparantuit { filter: alpha(opacity=100); } [/code:1:4f4ba25238]
Link naar reactie
helaas werk het ook niet om de class in de IMG te zetten, het moet toch iets anders zijn, maar heb geen idee wat en kan het eerlijk gezegt ook niet vinden op die w3schools site. Ik hoop dat er iemand is die wel een oplossing weet. BTW...mijn code die ik als laatst heb neergezet kun je copieren en gebruiken om te testen. Je moet alleen wel ff 2 plaatjes maken, 1 voor de achtergrond genaamd background.jpg en een als plaatje voor in de cel genaamd plaatje.gif alvast bedankt voor je moeite
Link naar reactie
Hmmm... Inderdaad vreemd. Ik heb onderstaande code in elkaar geknutseld maar zonder resultaat. Wel even het één en ander opgeschoond. Wie zin heeft om op dit testvoorbeeld door te gaan: be my guest, daarom plaats ik het hier.[code:1:d7da33379b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Alpha Transparency Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="all"> <!-- body { background-image: url(background.png); } img { filter: alpha(opacity=100); -moz-opacity: 100%; } td { color: #800000; } .totaletabel { filter: alpha(opacity=50); -moz-opacity: 50%; border: 2px solid red; padding: 0 0 0 0; spacing: 0 0 0 0; width: 400px; background-color: white; } --> </style> </head> <body> <table class="totaletabel"> <tr> <td> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br /> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br /> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla </td> <td> <img src="background.png" alt="[ Normaal plaatje ]" title="Doorzichtig of niet?" /> </td> </tr> </table> </body> </html>[/code:1:d7da33379b]Succes ermee, ik kom er helaas ook niet uit. - Bas
Link naar reactie
nog een idee. stop met het werken met tabellen. die zijn eigenlijk helemaal niet bedoeld voor opmaak. met divs moet het gewoon lukken. is me inmiddels wel gelukt met plaatjes. //paint is niet wat het moet zijn :x dit is in iedergeval een stapje verder: [code:1:eedf8758f0]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Alpha Transparency Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="all"> <!-- body { background-image: url(plaatje.gif); } div.trans{ filter: alpha(opacity=200); -moz-opacity: 200%; } td { color: #800000; } .trans2{ filter: alpha(opacity=50); -moz-opacity: 50%; border: 2px solid red; padding: 0 0 0 0; spacing: 0 0 0 0; width: 400px; background-color: white; } --> </style> </head> <body> <table> <tr> <td> <div class="trans2"> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br /> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla <br /> Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla </div> </td> <td> <div class="trans"> <img src="plaatje2.gif" alt="[ Normaal plaatje ]" title="Doorzichtig of niet?" /> </div> </td> </tr> </table> </body> </html>[/code:1:eedf8758f0]
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

  • Populaire leden

    Er is nog niemand die deze week reputatie heeft ontvangen.

  • Leden

    Geen leden om te tonen

×
×
  • Nieuwe aanmaken...