Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

tabelachtergrond half transparant

31 antwoorden
  • 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!
  • 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..
  • bedankt voor je uitlg en ik zal het is gaan proberen. Alleen wel jammer dat het in IE 5.5 niet zo lekker werkt. Geldt dit dan ook voor IE 6, of is het daarin verholpen ? Want een hoop mensen hebben volgens mij IE 5.5 of 6.
  • [quote:0c620054e3="Ferryk"]Want een hoop mensen hebben volgens mij IE 5.5 of 6.[/quote:0c620054e3][url=http://www.thecounter.com]jep[/url] kijk ook [url=http://www.meyerweb.com/eric/css/edge/complexspiral/demo2.html]hier[/url] is. grtzz..
  • [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
  • [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]
  • stefan nagtegaal, waarom wordt deze code bij topstyle 2.5 niet als valid herkent?
  • Omdat dit CSS 2 is, en geen 1.. Topstyle is trouwens helemaal niet zo'n fijn programma.. Zoek de code/tags op op w3school.com, dan leer j er ook echt iets van. Doe dit in combinatie met dreamWeaver en j hebt een prachtpakket! Stefan.
  • Stefan bedankt. Helemaal top, ik moest ff het $ verwijderen. Stom dat ik die heb neergezet maar dat kwam omdat ik bezig was met de orginele site en gebruikte daar het $ vrij vaak. iig bedankt en ik zal die site is wat meer bekijken die je door gaf....ik denk dat ik daar wel een hoop gebruik van ga maken. Gr. Ferry
  • 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 ?
  • img { filter: alpha(opacity=0); } - Bas
  • 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]
  • misschien bij img een aparte class zoals bas zei alleen dan met opacity=100 @stefan topstyle is wel een relaxt programma. en css2 stond geselecteerd.. grtzz...
  • 't is trouwens w3school[b:eb1bf6a056]s[/b:eb1bf6a056].com
  • nog een kleine toevoeging het is css3 en geen 2. gevonden op de op het [url=http://www.w3.org]w3[/url]. Klik [url=http://lists.w3.org/Archives/Public/www-style/2001Mar/0170.html]hier[/url] voor het artikel. weten we ook gelijk weer waarom topstyle het niet herkende. grtzz...
  • 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
  • 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
  • Ik hoop dat er nog mensen zijn die het misschien willen proberen of misschien al meteen een antwoord weten?
  • heb je al gekeken op de site van eric meyer? //bij mij wordt het plaatje niet geload....
  • 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]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.