Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Początkujący w css, margin-top nie działa
Forum PHP.pl > Forum > Przedszkole
adolf1945
28.05.2010, 07:22:39
Witam, tworzę swój pierwszy layout, oto kod:
[HTML] pobierz, plaintext 
  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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link rel="Stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body>
  9. <div id="wrapper">
  10.  
  11. <div id="gora"></div>
  12. <div id="gora1"></div>
  13.  
  14. <div id="gora2">
  15. <div id="box">afklgsdlgksdlgklsdgklsdk;gsdg</div>
  16. </div>
  17.  
  18. <div id="stopka"></div>
  19. </div>
  20. </body>
  21. </html>
[HTML] pobierz, plaintext


oraz css:
[CSS] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body {
  4. background: #4e1f31;
  5. font-family: verdana, sans-serif;
  6. font-size: 0.75em
  7. }
  8.  
  9. img {
  10. border: none
  11. }
  12.  
  13. #wrapper {
  14. margin: 0 auto;
  15. width: 100%
  16. }
  17.  
  18. #gora{
  19. background: #2D2D2D;
  20. width: 100%;
  21. height:50px;
  22. }
  23.  
  24. #gora1{
  25. background:#4e1f31;
  26. height: 150px;
  27.  
  28.  
  29. }
  30. #stopka{
  31. background:#242424;
  32. height:150px;
  33. }
  34.  
  35. #box{
  36. background:#666;
  37. width: 400px;
  38. height: 300px;
  39. margin-left: 50px;
  40. margin-top: 85px;
  41. }
[CSS] pobierz, plaintext



Dlaczego w moim #box nie działa margin-top? (box to ten ciemno szary kwadrat na obrazku)
Belze
28.05.2010, 09:37:37
tak btw.
[HTML] pobierz, plaintext 
  1.  
  2. #wrapper {
  3. margin: 0 auto;
  4. width: 100%
  5. }
[HTML] pobierz, plaintext

po co ustawiasz margin: 0 auto jak dajesz 100% width? to nie ma sensu - nie da sie wycentrowac czegos co ma 100% szerokosci smile.gif

co do Twojego problemu, to box zawarłeś w <div id="gora2">
a styl dodajesz do boxa ktory juz jest w kontenerze.

generalnie troche przekombinowane. powiedz jaki efekt chcesz uzyskac, bedzie latwiej Cie naprowadzic
adolf1945
28.05.2010, 10:12:58
Dzięki za odpowiedź.
Chciałbym dwa box-y na treść strony znajdujące się w div id="gora2"> z marginesami od góry od lewej i od dołu
Belze
28.05.2010, 10:32:12
trochę ciężko Cię zrozumieć. zdefiniuj kontener "gora2" - jak on sie ma zachowywac i dopiero pozniej wkladaj tam elementy, definiujac kazdy z nich.
adolf1945
28.05.2010, 10:47:18 
[CSS] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body {
  4. margin: 0px;
  5. padding: 0;
  6. background: #4e1f31;
  7. font-family: verdana, sans-serif;
  8. font-size: 0.75em
  9. }
  10.  
  11. img {
  12. border: none
  13. }
  14.  
  15. #wrapper {
  16. margin: 0 auto;
  17. width: 100%
  18. }
  19.  
  20. #gora{
  21. background: #2D2D2D;
  22. width: 100%;
  23. height:50px;
  24. }
  25.  
  26. #gora1{
  27. background:#4e1f31;
  28. height: 150px;
  29. border-bottom-style:groove
  30.  
  31.  
  32. }
  33.  
  34. #logo {
  35. 	float: left;
  36. 	margin: 10px 0;
  37. 	margin-left: 10px;
  38. }
  39.  
  40. #gora2{
  41. 	background:#4e1f31;
  42. 	width: 500px;
  43. 	height:350px;
  44.  
  45.  
  46. 	}
  47. /* Polprzezroczysty div  */
  48. #box{ 
  49. 	background:#CCC;
  50. 	width: 400px;
  51. 	height: 300px;
  52. 	margin-left: 50px;
  53. 	margin-top: 13px;
  54.  
  55.  
  56. 	-moz-opacity : 0.3;
  57. opacity : 0.3;
  58. filter : alpha(opacity=70);
  59.  
  60. }
  61.  
  62. #box1{
  63.  
  64. background:#CCC;
  65. float:right;
  66. width: 400px;
  67. height: 300px;
  68. -moz-opacity : 0.3;
  69. opacity : 0.3;
  70. filter : alpha(opacity=70);
  71.  
  72.  
  73. }
  74.  
  75.  
  76. #stopka{
  77. background:#242424;
  78. height:150px;
  79. border-top-style:groove	
  80. }
  81.  
  82. ul, ul li {
  83. 	margin:0px;
  84. 	margin-left: 88px;
  85. 	display: block;
  86. 	list-style: none;
  87.  
  88. 	padding: 0;
  89. }
  90.  
  91. ul {
  92. 	float: none;
  93. 	background-color: #2D2D2D;
  94. 	padding: 1px 0 1px 1px;
  95.  
  96. }
  97.  
  98. ul li {
  99. 	float: left;
  100. }
  101.  
  102. ul a:link, ul a:visited {
  103. 	text-decoration: none;
  104. 	display: block;
  105.  
  106. 	background: #2D2D2D repeat-x center;
  107. 	color: #fff;
  108. 	padding: 16px 20px;
  109.  
  110. }
  111.  
  112. ul a:hover {
  113. 	background-color: #800;
  114.  
  115. }
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link rel="Stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body>
  9. <div id="wrapper">
  10.  
  11. <div id="gora">
  12.  
  13. <ul id="menu">
  14. 		<center><ul>
  15. 		  <li><a href="http://kurs.browsehappy.pl/Kurs/Spis#Main" title="O nas">O NAS</a></li>
  16. 	  </ul>
  17. 		<li class="offer"><a href="http://cufon.shoqolate.com/generate/" title="Portfolio">PORTFOLIO</a></li>
  18. 		<li><a href="http://www.iconfinder.net/" title="Oferta">OFERTA</a></li>
  19. 		<li class="contact"><a href="http://centrumpsd.pl/" title="Kontakt">KONTAKT</a></li>
  20. 	</ul></center>
  21. </div>
  22. <div id="gora1">
  23.  
  24. <a id="logo" href="index.html" title="WebDesign">
  25. 		<img src="logo.png" alt="WebDesign" />
  26. 	</a>
  27.  
  28. </div>
  29.  
  30. <div id="gora2"> dwaaaa dwaaa dwaaaa
  31. <div id="box">afklgsdlgksdlgklsdgklsdk;gsdg</div>
  32. <div id="box1">gasgsdgsdgsdagads</div>
  33. </div>
  34.  
  35. <div id="stopka">stopkaa stoopkasdfasdfgasdg</div>
  36. </div>
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


Zrobiłem tak jak mówiłeś, box ustawiony jest tak jak chciałem ale box1 chciałbym ustawić po prawej stronie i wtedy zrobić margines od prawej ponieważ teraz rozwala mi stronę
krzysztof_kf
28.05.2010, 10:59:06
Co to jest ? za puste selektory typu gora ?

Zmien na 

[CSS] pobierz, plaintext 
  1.  
  2. #gora {
  3. width: 100%;
  4. }
  5.  
[CSS] pobierz, plaintext
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.