login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Transperante container

Offline o0witte0o - 21/11/2009 12:43
Avatar van o0witte0oNieuw lid Beste,

Ik zou graag mijn container voor 50% transperant willen hebben, zodat mijn achtergrond zichtbaar word. Maar ik geraak er niet echt wijs uit. Op Google kom je verschillende mogelijkheden tegen, maar geen één daarvan werkt. Ik weet dat ik met filter: alpha(opacity'50'); moet werken, maar ik krijg het niet klaar.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Naamloos document</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9. 	font: 100% Verdana, Arial, Helvetica, sans-serif;
  10. 	background: #666666;
  11. 	margin: 0;  
  12. 	padding: 0;
  13. 	text-align: center;
  14. 	color: #000000;
  15. 	background-image: url(image4.jpg);
  16. }
  17. .oneColFixCtrHdr #container {
  18. 	width: 780px;
  19. 	background: #FFFFFF;
  20. 	margin: 0 auto;
  21. 	border: 1px solid #000000;
  22. 	text-align: left;
  23.         filter: alpha(opacity'50'); /*als mijn zoekwerk op Google correct was, zou de filter hier moeten komen.*/
  24. }
  25. .oneColFixCtrHdr #header {
  26. 	background: #DDDDDD; 
  27. 	padding: 0 10px 0 20px;
  28. }
  29. .oneColFixCtrHdr #header h1 {
  30. 	margin: 0;
  31. 	padding: 10px 0; 
  32. }
  33. .oneColFixCtrHdr #mainContent {
  34. 	padding: 0 20px; 
  35. 	background: #FFFFFF;
  36. }
  37. .oneColFixCtrHdr #footer {
  38. 	padding: 0 10px;
  39. 	background:#DDDDDD;
  40. }
  41. .oneColFixCtrHdr #footer p {
  42. 	margin: 0; 
  43. 	padding: 10px 0;
  44. }
  45. -->
  46. </style></head>
  47.  
  48. <body class="oneColFixCtrHdr">
  49.  
  50. <div id="container">
  51.   <div id="header">
  52.     <h1>Header</h1>
  53.   <!-- end #header --></div>
  54.   <div id="mainContent">
  55.     <h1> Hoofdinhoud </h1>
  56.     <p>Deze tekst zou op een witte, 50% transterante achtergrond moeten komen.</p>
  57. 	<!-- end #mainContent --></div>
  58.   <div id="footer">
  59.     <p>Footer</p>
  60.   <!-- end #footer --></div>
  61. <!-- end #container --></div>
  62. </body>
  63. </html>

7 antwoorden

Gesponsorde links
Offline Martijn - 21/11/2009 13:03
Avatar van Martijn Crew PHP ik raad je aan een png-tje te maken, 1px rood op 50% Veel snller en effectiefer
Offline Koen - 21/11/2009 13:15
Avatar van Koen PHP expert
Martijn schreef:
Veel snller en effectiefer


?!

Sinds wanneer gaat het gebruik en de snelheid van een afbeelding boven een regeltje CSS code?
Offline Raze - 21/11/2009 15:26
Avatar van Raze PHP beginner http://www.site...nsparantie
Offline o0witte0o - 21/11/2009 18:26
Avatar van o0witte0o Nieuw lid

Dieje tut heb ik al gezien.. Werkt om één of andere bizare reden niet... Ik werk met Dreamweaver CS3 maar dat kan geen probleem geven denk he?

Ik heb het nog niet gevonden hoe het moet, maar ik ben eens met Martijn zijn voorstel bezig.. Want daar heb ik op Google wel iets gevonden, dus ik gaan terug is wat prutsen 
Offline valles10 - 21/11/2009 20:37 (laatste wijziging 21/11/2009 20:38)
Avatar van valles10 HTML interesse Ik raad je aan zoals Martijn het zegt:
Martijn schreef:
ik raad je aan een png-tje te maken, 1px rood op 50% Veel snller en effectiefer


je kan ook met een code doen.
Je moet alleen 3 verschillende soort opacity codes zoeken/kennen/vinden/neerschrijven

1 voor IEX
1 voor mozilla
en voor netscape
Als je deze hebt werkt het voor alle browsers

edit:
mozilla:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. -moz-opacity: 0.50;


opera:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. opacity: 0.50;


IEX:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. filter: alpha(opacity=50);
  2. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  3. width: 100%;
Offline o0witte0o - 23/11/2009 11:36 (laatste wijziging 23/11/2009 12:09)
Avatar van o0witte0o Nieuw lid Ik krijg het niet klaar.. Waar ik de filter ook toepas. Wel krijg in een volledig zwart beeld, ofwel een vaag wit beeld. Ik denk dat ik iets anders moet verzinnen ipv die containers.

Edit:

Gevonden! Achtergrond is nu transperant zoals ik wou..

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. .oneColFixCtrHdr #container {
  2. 	width: 780px;
  3. 	background: #FFFFFF;
  4. 	margin: 0 auto;
  5. 	border: 1px solid #000000;
  6. 	text-align: left;
  7. 	-moz-opacity: 0.50;
  8. 	opacity: 0.50;
  9. 	filter: alpha(opacity=50);


Maar de tekst staat nu ook in transperant. Hoe vermijd ik dat? Een extra div aanmaken?
Offline Wave6 - 24/11/2009 12:09 (laatste wijziging 24/11/2009 12:10)
Avatar van Wave6 PHP beginner Door gewoon netjes een PNGtje te maken. kwa laadtijd niet echt veel sneller maar kwa ontwikkeling wel. Plus PNG wordt geaccepteerd door de meeste browsers... behalve IE6 maar ja je kan niet alles hebben en bovendien zijn er veel development bedrijven die het ontwikkeling van IE6 maar achterwege laten! Tenzij de klant hier extra voor gaat betalen...

Maar het probleem waar jij tegen aanloopt met je transparante letters zal zich blijven voordoen zolang je geen andere div binnen je transparante div zet.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.184s