Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] problem z divami
Forum PHP.pl > Forum > Przedszkole
gereid
15.10.2012, 20:37:04
Witam, doznałem dzisiaj jakiegoś strasznego zamroczenia, i nie wiem czemu poniższy kod nie chce działać tongue.gif

[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. </head>
  7. <style type="text/css" media="screen, projection">
  8.  
  9. 	#outer
  10.  
  11. 	{
  12.  
  13. 	position: relative;
  14.   background: rgba(22, 22, 22, 0.5);
  15.    height: 100%;
  16.    width: 100%;
  17.    min-height:600px;
  18.    min-width:800px;
  19.    position: fixed;
  20.    z-index: 4;
  21.  
  22. }
  23. #inner
  24. {
  25.    background:#000;
  26.    padding:50px;
  27.     width: 920px;
  28. 	height: 580px;
  29. 	color: #fff;
  30.  
  31. 	margin: auto auto auto auto;
  32.  
  33.  
  34. 	}
  35.  
  36. </style>
  37.  
  38.  
  39. <body>
  40. <!-- Save for Web Slices (navbar.psd) -->
  41.  
  42.  
  43. <div>
  44. <div id="outer">
  45.  
  46. qqweqwwwqw
  47.  
  48. <div id="inner">
  49. sdadsadad
  50. </div>
  51.  
  52.  
  53.  
  54. </div>
  55. </div>
  56.  
  57. </body>
  58. </html>
  59.  
[HTML] pobierz, plaintext


chcialbym aby srodkowy div byl zawsze wysrodkowany w pionie i poziomie, a po zmniejszeniu rozmiaru okienka, powinny pojawiać się paski do przewijania strony - tak aby nie ucinało zawartości - jeśli ktoś podpowie jak to zrobić - będe bardzo wdzięczny
frantic09
16.10.2012, 10:23:57 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<title></title>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. 	<style type="text/css" media="screen, projection">
  6. 		body{
  7. 			/*przyda sie*/
  8. 			margin: 0px;
  9. 			padding: 0px;
  10. 		}
  11. 		#outer {
  12. 			position: relative;
  13. 			background: rgba(22, 22, 22, 0.5);
  14. 			height: 100%;
  15. 			width: 100%;
  16. 			min-height:600px;
  17. 			min-width:800px;
  18. 			position: fixed;
  19. 			z-index: 4;
  20. 		}
  21. 		#inner {
  22. 			background:#000;
  23. 			padding:50px;
  24. 			width: 920px;
  25. 			height: 580px;
  26. 			color: #fff;
  27. 			/*magia zaczyna się tutaj*/
  28. 			position: absolute;
  29. 			margin-top: -340px;
  30. 			margin-left: -510px;
  31. 			top: 50%;
  32. 			left: 50%;
  33. 		}
  34. 	</style>	
  35. </head>
  36. <body>
  37. 	<div>
  38. 		<div id="outer">
  39. 			outer
  40. 			<div id="inner">
  41. 				inner
  42. 			</div>
  43. 		</div>
  44. 	</div>
  45. </body>
  46. </html>
[HTML] pobierz, plaintext


Wyjaśnienie magii. Otóż dobrze jest jak wyśrodkowany DIV jest na 
[HTML] pobierz, plaintext 
  1. position:absolute
[HTML] pobierz, plaintext

Później (jeśli znasz jego wymiary, a widzę, że były podane w CSS, więc pewnie znasz) ustawiasz go na "pseudośrodku" smile.gif :
[HTML] pobierz, plaintext 
  1. top: 50%; left: 50% 
[HTML] pobierz, plaintext

i przesuwasz go o połowę jego szerokości(+padding) w lewo
[HTML] pobierz, plaintext 
  1. margin-left: -510px;
[HTML] pobierz, plaintext

i o połowę jego wysokości (+padding) w górę
[HTML] pobierz, plaintext 
  1. margin-top: -340px;
[HTML] pobierz, plaintext


U mnie na localu działa wink.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.