Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][PHP]Jak wstawić obrazek do div-a z innym obrazkiem
Forum PHP.pl > Forum > Przedszkole
Darek82
4.05.2010, 17:14:19
Mam na głównej stronie w div="header" obrazek, chciałbym wstawić inne zdjecie div=lewy_obrazek które by zmieniało miejsce tylko w obrębie obszaru tego obrazka "header" i by w kazdej rozdzielczosci ekranu bylo w w tym samym miejscu by sie nie rozjezdzało, obrazek chciałbym dodać w css jak mógłbym to zrobić czy ten nowy obrazek mam w div wstawić wogóle?

[PHP] pobierz, plaintext 
  1. </head>
  2.  
  3.  
  4. <body id="page_bg">
  5.  
  6. 	<div id="wrapper">
  7.                 <div id="lewy_obraz">
  8. 		<div id="header">
  9.  
  10. 			<div class="logo">
  11.  
  12. 				<table cellpadding="0" cellspacing="0">
  13. 					<tr>
  14. 						<td>
  15. 							<h1><a href="index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></h1>
  16. 						</td>
  17. 					</tr>
  18. 				</table>
  19. 			</div>
  20. 			<div id="search"><jdoc:include type="modules" name="user4" /></div>
  21. 			<div class="clr"></div>
  22. 			<div class="newsflash<?php if(!$this->countModules('user1') and JRequest::getCmd('layout') != 'form') : ?> only<?php endif; ?>">
  23. 				<jdoc:include type="modules" style="rounded" name="top" />
  24. 			</div>
  25. 			<div id="pillmenu">
  26. 				<?php if($mtype != "module") :
  27. 				echo $mainnav;
  28. 				else: ?>
  29. 				<jdoc:include type="modules" name="user3" />
  30. 				<?php endif; ?>
  31. 			</div>
  32. 			<div class="clr"></div>	
  33. 			<div class="cpathway"><jdoc:include type="module" name="breadcrumbs" /></div>
  34. 		</div>
  35.  
  36. 		<div id="content">	
  37.  
  38. 			<?php if($this->countModules('left') and JRequest::getCmd('layout') != 'form') : ?>
  39. 			<div id="leftcolumn">
  40. 				<jdoc:include type="modules" name="left" style="rounded" />
  41. 				<br />
  42. 				<?php $sg = 'banner'; include "templates.php"; ?>
  43. 				<br />
  44. 			</div>
  45. 			<?php endif; ?>
  46.  
  47. 			<?php if($this->countModules('left') and $this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
  48. 			<div id="maincolumn">			
  49. 			<?php elseif($this->countModules('left') and !$this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
  50. 			<div id="maincolumn_left">
  51. 			<?php elseif(!$this->countModules('left') and $this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
  52. 			<div id="maincolumn_right">
  53. 			<?php else: ?>
  54. 			<div id="maincolumn_full">
  55. 			<?php endif; ?>
  56.  
  57. 				<div class="nopad">
  58. 					<jdoc:include type="message" />
  59. 					<?php if($this->params->get('showComponent')) : ?>
  60. 						<jdoc:include type="component" />
  61. 					<?php endif; ?>
  62. 				</div>
  63. 			</div>
  64.  
  65. 			<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
  66. 			<div id="rightcolumn">
  67. 				<jdoc:include type="modules" name="right" style="rounded" />
  68. 			</div>
  69. 			<?php endif; ?>
  70. 			<div class="clr"></div>
  71.  
  72. 		</div>
  73.  
  74. 		<div id="content_b">
  75. 			<div id="footer">
  76. 				<jdoc:include type="modules" name="debug" />
  77. 				<?php $sg = ''; include "templates.php"; ?>
  78. 				<a href="http://validator.w3.org/check/referer">valid xhtml</a>
  79. 				<a href="http://jigsaw.w3.org/css-validator/check/referer">valid css</a>
  80. 			</div>
  81.  
  82.  
  83. 		         </div>
  84. 		         <div id="prawy_obraz">
  85. 		         </div>
  86. 		</div>	
  87.  
  88. 	</div>
  89. </body>
  90. </html>
  91.  
[PHP] pobierz, plaintext
krzysztof_kf
4.05.2010, 17:19:57 

[CSS] pobierz, plaintext 
  1.  
  2. #header {
  3. width: 1000px;
  4. height: 200px;
  5. margin: 0 auto;
  6. }
  7.  
  8. #header-left { 
  9. width: 200px;
  10. float: left;
  11. background: #00ff00 url(obrazek.png) no-repeat;
  12. }
  13.  
  14. #header-right { 
  15. width: 800px;
  16. float: left;
  17. background: #3399ff url(obrazek.png) no-repeat;
  18. }
[CSS] pobierz, plaintext


i kod 

[HTML] pobierz, plaintext 
  1.  
  2. <div id="header">
  3. <div id="header-left">
  4.  
  5. </div>
  6. <div id="header-right">
  7. </div>
[HTML] pobierz, plaintext
Darek82
4.05.2010, 17:41:27
ekstra pomogłeś mi smile.gif
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.