login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] opacity-alpha achtergrond (Opgelost)

Offline Nansepansje - 12/06/2007 13:28 (laatste wijziging 12/06/2007 13:31)
Avatar van NansepansjeNieuw lid Heyy,

Heb een 3 divjes (oranje, geel, rood) met daarin een title divje en een gewoon divje. Nu heb ik dat hij bij elk titledivje de achtergrondkleur pakt van het gewone divje. Nu wil ik graag dat hij de achtergrond van de titlediv beetje doorzichtigmaakt. Maar hij pakt het alleen maar voor de tekst. Iemand suggesties?
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #sidebartitle{/*De title met eigenschappen voor alle divjes*/
  2. 	color: #FFFFFF;
  3. 	filter:alpha(opacity=40);
  4. 	-moz-opacity:0.4;
  5. 	font-weight: bold;
  6. 	height:25px;
  7. }
  8.  
  9. /*heb hier dus nog 2 divjes van met elk andere kleur*/
  10. #menu2 {
  11. 	background:#ff6600;
  12. 	border-style: double;
  13. 	border-color:#FFFFFF;
  14. 	float:right;
  15. 	width:150px;
  16. 	min-height:50px;
  17. 	padding:5px;
  18. 	margin: 0px 5px 5px 0px;
  19. }


xx Nans

Citaat:
Code Tags!

13 antwoorden

Gesponsorde links
Offline W0etah - 12/06/2007 13:32
Avatar van W0etah PHP beginner display: block
en een vaste breedte en hoogte opgeven
Offline Nansepansje - 12/06/2007 13:58
Avatar van Nansepansje Nieuw lid Verklaar u nader ;)
Offline Ultimatum - 12/06/2007 14:04
Avatar van Ultimatum PHP expert Wat begrijp je niet? Je gooit op de div waar je tekst in staat een vaste hoogte en breedte dmv height en width en de display zet je op block zodat je div als een vierkant beschouwd word (block): display: block
Offline Nansepansje - 12/06/2007 14:16
Avatar van Nansepansje Nieuw lid
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #sidebartitle{
  2. 	color: #FFFFFF;
  3. 	display: block;
  4. 	filter:alpha(opacity=60);
  5. 	-moz-opacity:0.6;
  6. 	font-weight: bold;
  7. 	height:25px;
  8. 	width: 150px;
  9. }


Thanks voor je snelle reactie 
Als ik je goed begrijp. Nu pakt ie nog steeds helaas de tekst.
Offline vinTage - 12/06/2007 14:42
Avatar van vinTage Nieuw lid Die block/width en heigth hebben er imo niks mee te maken.
Volgens mij kan je ook niet "gedeeltes" van een div bewerken met een filter of opacity (dus bg wel en tekst niet)

Wat je zou kunnen doen is gewoon in de sideBarTitle alleen de achtergrond te zetten, en daarbovenop (met z-index) een div met de instellingen voor de fonts etc.
Offline Nansepansje - 12/06/2007 14:43
Avatar van Nansepansje Nieuw lid Gekke is dat ik wel de tekst transparant kon krijgen in de Sidebartitle alleen de achtergrond niet.

Mmmm misschien wil ik weer eens teveel ;)
Offline vinTage - 12/06/2007 14:48
Avatar van vinTage Nieuw lid Alles word transparant (behalve flash) als je dat erin hebt staan.
Offline W0etah - 12/06/2007 14:49
Avatar van W0etah PHP beginner filter: alpha(opacity=45);
-moz-opacity: .45;
opacity: .45;
Offline vinTage - 12/06/2007 14:53
Avatar van vinTage Nieuw lid opacity .: is voor opera inderdaad.
Om aan te tonen dat de bg wel transparant word van je div probeer deze code maar eens.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. body {
  3. 	background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Bos_taurus_indicus.jpg/780px-Bos_taurus_indicus.jpg);
  4. }
  5.  
  6. #sidebartitle{
  7. 	color:#FFFFFF;
  8. 	filter:alpha(opacity=40);
  9.   -moz-opacity:0.4;
  10. 	opacity:0.4;
  11. 	background-color: #000000;
  12. 	font-weight: bold;
  13. }
  14. </style>
  15.  
  16. <div id="sidebartitle">
  17.   hoi
  18. 	<br />
  19.   hoi
  20. </div>
Offline Nansepansje - 12/06/2007 15:08 (laatste wijziging 12/06/2007 15:23)
Avatar van Nansepansje Nieuw lid Heyyy stoer 
Oehhh wat een lekker ding 

Dit werkt ook en dan pakt hij wel de achtergorndkleur en maakt hij hem transparant. Want achtergrondkleur is donkerblauw.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. body {
  3.   background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Bos_taurus_indicus.jpg/780px-Bos_taurus_indicus.jpg);
  4.  
  5.   }
  6.  
  7. #sidebartitle{
  8.   color:#FFFFFF;
  9.   filter:alpha(opacity=40);
  10.   -moz-opacity:0.4;
  11.   width:100%;
  12.   opacity:0.4;
  13.   background-color: #000099;
  14.   font-weight: bold;
  15. }
  16. </style>
  17.  
  18. <div id="sidebartitle">
  19.   hoi
  20.   <br />
  21.   hoi
  22. </div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  23. <html xmlns="http://www.w3.org/1999/xhtml">
  24. <head>
  25. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  26. <title>Untitled Document</title>
  27. </head>
  28.  
  29. <body>
  30. </body>
  31. </html>
Offline vinTage - 12/06/2007 15:17 (laatste wijziging 12/06/2007 15:18)
Avatar van vinTage Nieuw lid Ben er net achter dat je voor IE wel een width moet hebben 

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. body {
  3. 	background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Bos_taurus_indicus.jpg/780px-Bos_taurus_indicus.jpg);
  4. }
  5.  
  6. #sidebartitle{
  7. 	color:#FFFFFF;
  8. 	filter:alpha(opacity=40);
  9.   -moz-opacity:0.4;
  10. 	opacity:0.4;
  11. 	width:100%;
  12. 	background-color: #000000;
  13. 	font-weight: bold;
  14. }
  15. </style>
  16.  
  17. <div id="sidebartitle">
  18.   hoi
  19. 	<br />
  20.   hoi
  21. </div>


edit, of height
Offline Nansepansje - 12/06/2007 15:31
Avatar van Nansepansje Nieuw lid Heb het nu voor elkaar gekregen in een testbestandje (zie post boven die van jou ;) ) in IE en Firefox, maar nu nog even in de site zien te fixen 
Offline vinTage - 12/06/2007 15:38
Avatar van vinTage Nieuw lid Ok, goed.

Alleen (okay, ik gaf geen valid code) maar die van jouw is nog minder valid 

php code - Bekijk de code zonder highlighting - Klap code in 
  1. DOCTYPE MEUK
  2. <html>
  3. <head>
  4. <title>lala</title>
  5. <!-- allerlei meuk -->
  6. <!-- css -->
  7. </head>
  8.  
  9. <body>
  10.  
  11. <!--divjes gedoe-->
  12.  
  13. </body>
  14. </html>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.236s