Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] Tło obrazkowe w <div style=''
Forum PHP.pl > Forum > Przedszkole
Skudi
25.02.2010, 20:19:51
Witam, mam malutki problem ponieważ na swojej stronie zrobionej w html nie mogę wpakować ciemniejszego tła w <div

Strona:
CODE
http://www.magwit.vacau.com/


Kod Index'u:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>magwit.pl &#xBB; Strona gl&#xF3;wna</title>
  3. 	<!--NodeFire API Script Reference-->
  4. 	<script type="text/javascript" src="js/api.js"></script>
  5.  
  6. 	<!--Pure CSS Core (menu widget)-->
  7. 	<!--[if lte IE 6]><style type="text/css">.nfPure .nfItem{width:0px;}</style><![endif]-->
  8. 	<!--[if lte IE 7]><style type="text/css">.nfMain,.nfMain .nfLink,.nfMain .nfSubS{zoom:1;}.nfPure .nfLink:hover{z-index:1101;}.nfPure .nfItem{display:inline !important;}</style><![endif]-->
  9. 	<link rel="stylesheet" href="css/menu_core.css" type="text/css">
  10.  
  11.  
  12. 	<!--Custom Layout (Flush Left Subs)-->
  13. 	<link rel="stylesheet" href="css/skins/menu_megaSubs1.css" type="text/css">
  14. 	<style type="text/css">
  15. 		.nfMain .nfItem {position:static;}
  16. 		.nfMain .nfSubC {left:0px;}
  17. 	</style>
  18.  
  19.  
  20. 	<!--Style Skin (menu widget)-->
  21. 	<link rel="stylesheet" href="css/skins/menu_megaSubs1.css" type="text/css">
  22.  
  23.  
  24. 	<!--Custom Styles-->
  25. 	<style type="text/css">
  26.  
  27. 		/*~~~~~~~~~~~~~~ Custom Menu Classes ~~~~~~~~~~~~~~~~*/		
  28. 		.megaContainer {padding:30px;height:340px;color:#666;}
  29. 		.megaContainerInner1 {height:332px;border:dashed 4px #999;vertical-align:middle}
  30. 		.megaContainerInner2 {position:relative;top:150px;}
  31. 		.megaButton {opacity:.5;}
  32.  
  33. 		.blockOut_left {position:absolute;width:130px;height:13px;background:#a7b9c6;border:solid 1px #373f45;border-width:0px 0px 0px 1px;z-index:1;}
  34. 		.blockOut_middle {position:absolute;width:131px;height:10px;background:#a7b9c6;z-index:1;}
  35.  
  36. 	</style>
  37. 	<!--[if IE]><style type="text/css">.megaButton {filter:alpha(opacity=50);}</style><![endif]-->
  38.  
  39.  
  40.  
  41. </head><body background='images\gallery\menu\megaSubs1\tlo.jpg' style='margin:40px 80px 80px 80px;'>
  42.  
  43.  
  44. <!--Custom Menu Container-->
  45. <div style='background-images: url:(images\gallery\menu\megaSubs1\tloin.jpg);width:900px;height:600px;padding:50px;border:solid 1px #495966;margin:auto;'>
  46.  
  47.  
  48. <!--Menu Structure Example-->
  49. <ul id="myMenu" class="nfMain nfPure">
  50.  
  51. 	<li class="nfItem">
  52.  
  53.  
  54. 		<div class="nfLink">
  55. 			<script type="text/javascript">var ext = NF.util.browser.ie?"gif":"png";document.write("<img class='megaButton' src='images/gallery/menu/megaSubs1/button1."+ext+"' width='108' height='108'>");document.close();</script>
  56. 			<div style='text-align:center;'>Rolety</div>
  57. 		</div>		
  58. 		<div id='startActive' class="nfSubC"><div class='blockOut_left'></div><ul class="nfSubS">
  59. 			<li class="nfItem"><div class="nfLink">
  60. 				<div class='megaContainer'>
  61.  
  62. 					<div class="megaContainerInner1"><div class="megaContainerInner2">
  63. 					Sample Mega Item Content Area 1<br/>(Satellite Technology)<br />Strona startowa !!! - Zaluzje<br />
  64. 					</div></div>
  65.  
  66. 				</div>
  67. 			</div></li>
  68. 		</ul></div>
  69.  
  70.  
  71. 	</li>
  72.  
  73.  
  74. 	<li class="nfItem">
  75.  
  76.  
  77. 		<div class="nfLink">
  78. 			<script type="text/javascript">var ext = NF.util.browser.ie?"gif":"png";document.write("<img class='megaButton' src='images/gallery/menu/megaSubs1/button2."+ext+"' width='108' height='108'>");document.close();</script>
  79. 			<div style='text-align:center;'>Markizy</div>
  80. 		</div>		
  81. 		<div class="nfSubC"><div class='blockOut_middle' style='left:131px;'></div><ul class="nfSubS">
  82. 			<li class="nfItem"><div class="nfLink">
  83. 				<div class='megaContainer'>
  84.  
  85. 					<div class="megaContainerInner1"><div class="megaContainerInner2">
  86. 					Sample Mega Item Content Area 2<br/>(Work Flow Pattern Analysis)
  87. 					</div></div>
  88.  
  89. 				</div>
  90. 			</div></li>
  91. 		</ul></div>
  92.  
  93.  
  94. 	</li>
  95.  
  96. 	<li class="nfItem">
  97.  
  98.  
  99. 		<div class="nfLink">
  100. 			<script type="text/javascript">var ext = NF.util.browser.ie?"gif":"png";document.write("<img class='megaButton' src='images/gallery/menu/megaSubs1/button3."+ext+"' width='108' height='108'>");document.close();</script>
  101. 			<div style='text-align:center;'>&#x17B;aluzje</div>
  102. 		</div>		
  103.  
  104.  
  105.  
  106.  
  107. 		<div class="nfSubC"><div class='blockOut_middle' style='left:262px;'></div><ul class="nfSubS">
  108. 			<li class="nfItem"><div class="nfLink">
  109. 				<div class='megaContainer'>
  110.  
  111. 					<div class="megaContainerInner1"><div class="megaContainerInner2">
  112. 					Sample Mega Item Content Area 3<br/>(Branch Locations)
  113. 					</div></div>
  114.  
  115. 				</div>
  116. 			</div></li>
  117. 		</ul></div>
  118.  
  119.  
  120. 	</li>
  121.  
  122.  
  123. 	<li class="nfItem">
  124. 		<div class="nfLink">
  125. 			<script type="text/javascript">var ext = NF.util.browser.ie?"gif":"png";document.write("<img class='megaButton' src='images/gallery/menu/megaSubs1/button4."+ext+"' width='108' height='108'>");document.close();</script>
  126. 			<div style='text-align:center;'>Pergole</div>
  127. 		</div>		
  128. 		<div class="nfSubC"><div class='blockOut_middle' style='left:393px;'></div><ul class="nfSubS">
  129. 			<li class="nfItem"><div class="nfLink">
  130. 				<div class='megaContainer'>
  131.  
  132. 					<div class="megaContainerInner1"><div class="megaContainerInner2">
  133. 					Sample Mega Item Content Area 4<br/>(Meet With Our Team)
  134. 					</div></div>
  135.  
  136. 				</div>
  137. 			</div></li>
  138. 		</ul></div>
  139. 	</li>
  140. 	<li class="nfItem">
  141. </ul>
  142. </div>
  143. <!--Create a new menu object and activate it (place this script after the structure or attach to an onload type event)-->
  144.  
  145. <script type="text/javascript">
  146. 	// Create the menu object - Set triggers which make the items sticky
  147. 	var myMenu = new NF.widget.menu("myMenu", {showTimerMS:150,hideTimerMS:150, menuTrigger:'none', documentTrigger:'none'});
  148. 	//Show Button Animation
  149. 	var clip = new NF.anim.clip({opacity:{start:.5,end:1}},{frames:20,hook:"NFplayOnLinkActiveShow",targetClass:"megaButton"});
  150. 	var myReplicator = new NF.replicator("transition",{master:clip,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:0});
  151. 	myMenu.addReplicator(myReplicator);
  152. 	//Hide Button Animation
  153. 	var clip = new NF.anim.clip({opacity:{start:1,end:.5}},{frames:20,hook:"NFplayOnLinkActiveHide",targetClass:"megaButton"});
  154. 	myReplicator = new NF.replicator("transition",{master:clip,widgetClass:"nfItem",targetClass:"nfLink",widgetLevel:0});
  155. 	myMenu.addReplicator(myReplicator);
  156. 	//Activate the menu
  157. 	myMenu.activate();
  158. 	//Show an initial active path
  159. 	NF.widget.menuManager.setActivePath($('startActive'));
  160. </script>
  161. </body></html>
[HTML] pobierz, plaintext


a tu kawałek kodu z kolorem który na dodatek działa:
[HTML] pobierz, plaintext 
  1. <div style='background-color:#758591;width:900px;height:600px;padding:50px;border:solid 1px #495966;margin:auto;'>
[HTML] pobierz, plaintext
mortus
25.02.2010, 20:34:35
A w którym div-ie to ma być?
kvachu
26.02.2010, 11:12:01
Podejrzewam, że chodzi mu o to
[HTML] pobierz, plaintext 
  1. <!--Custom Menu Container-->
  2. <div style='background-images: url:(images\gallery\menu\megaSubs1\tloin.jpg);width:900px;height:600px;padding:50px;border:solid 1px #495966;margin:auto;'>
[HTML] pobierz, plaintext

a 
[HTML] pobierz, plaintext 
  1. <div style='background-color:#758591;width:900px;height:600px;padding:50px;border:solid 1px #495966;margin:auto;'>
[HTML] pobierz, plaintext

Podał tylko jako przykład.

No więc Panie Skudi, problem polega na tym, że nie ma takiego stylu jak "background-images:".
"background-image:" (bez "s") powinno działać. Jak Psikuta bez s, rozumiesz? ; D. I jeszcze co do coloru w tle, to chyba też starczy "background:", a nie "background-color". Tego drugiego to chyba się bardziej w tagach tabelek używa, ale nie jestem pewien w sumie.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.