Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][PHP]Problemz z CSS3, źle wyświetla stronę
Forum PHP.pl > Forum > Przedszkole
guzer
27.12.2012, 13:21:17
Witam

Zacznam robić stronkę w htmlu przy użyciu CSS3, dopiero zaczełęm pisać, zrobiłem sobie fajny wrapper ale niewiem dlaczego powstaje mi margines od góry

Czy ktoś może mi podpowiedzieć dlaczego tak jest

To jest css
[PHP] pobierz, plaintext 
  1. @import url(restet.css); 
  2. @import url(../fonts/stylesheet.css);
  3.  
  4. /* =body
  5. ---------------------------------------------------------------------------------------*/
  6. body{
  7. 	font-family:Tahoma, sans-serif;
  8. 	background:url(../images/background.png);
  9. }
  10.  
  11. #wrapper{
  12. 	width:980px;
  13. 	height:600px; /*Delete*/
  14. 	margin:0 auto; /*Wyśrodkowanie*/
  15. 	background:#efefef;
  16. 	-moz-box-shadow:0px 0px 35px #bdbdbd;
  17. 	-webkit-box-shadow:0px 0px 35px #bdbdbd;
  18. 	box-shadow:0px 0px 35px #bdbdbd;
  19.  
  20. }
  21. /* =typography
  22. ---------------------------------------------------------------------------------------*/
  23. h1, h2, h3, h4, h5, h6{
  24. 	font-family: 'CaviarDreamsBold', sans-serif;
  25. 	font-weight:normal;
  26. 	padding:20px 0 0 0;
  27. }
  28. /* =header
  29. ---------------------------------------------------------------------------------------*/
  30. #mainheader{
  31. 	height:110px;
  32. 	width:940px;
  33. 	margin:0 auto;
  34. }
  35. #mainheader hgroup{
  36. 	text-shadow:1px 1px #fff;
  37. }
  38. #mainheader h1{
  39. 	font-family: 'BebasNeueRegular', sans-serif;
  40. 	color:#f14d47;
  41. 	font-size:50px;
  42. 	padding:20px 0px 0px 0px;
  43.  
  44. }
  45. #mainheader h2{
  46. 	font-family: Tahoma, sans-serif;
  47. 	font-size:20px;
  48. 	color:#808080;
  49. 	padding:0px 0px 20px 0px;
  50. 	font-style:italic;
  51.  
  52. }
  53. /* =nawigations
  54. ---------------------------------------------------------------------------------------*/
  55. #mainmenu{
  56. 	font-family: 'BebasNeueRegular', sans-serif;
  57. }
  58.  
  59. /* =buttons
  60. ---------------------------------------------------------------------------------------*/
  61. .button {
  62. 	-moz-box-shadow:inset 0px 1px 0px 0px #f68c88, 1px 3px 6px #000;
  63. 	-webkit-box-shadow:inset 0px 1px 0px 0px #f68c88, 1px 3px 6px #000;
  64. 	box-shadow:inset 0px 1px 0px 0px #f68c88;
  65. 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f46e69), color-stop(1, #f14d47) );
  66. 	background:-moz-linear-gradient( center top, #f46e69 5%, #f14d47 100% );
  67. 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f46e69', endColorstr='#f14d47');
  68. 	background-color:#f46e69;
  69. 	-moz-border-radius:6px;
  70. 	-webkit-border-radius:6px;
  71. 	border-radius:6px;
  72. 	border:1px solid #f14d47;
  73. 	display:inline-block;
  74. 	color:#e0dce0;
  75. 	font-family:arial;
  76. 	font-size:15px;
  77. 	font-weight:bold;
  78. 	padding:6px 24px;
  79. 	text-decoration:none;
  80. 	text-shadow:1px 1px 0px #767575;
  81.  
  82. }.button:hover {
  83. 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f14d47), color-stop(1, #f46e69) );
  84. 	background:-moz-linear-gradient( center top, #f14d47 5%, #f46e69 100% );
  85. 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f14d47', endColorstr='#f46e69');
  86. 	background-color:#f14d47;
  87. }.button:active {
  88. 	position:relative;
  89. 	top:1px;
  90. }
  91. .inactive {
  92. 	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  93. 	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  94. 	box-shadow:inset 0px 1px 0px 0px #ffffff;
  95. 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  96. 	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  97. 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  98. 	background-color:#ededed;
  99. 	-moz-border-radius:6px;
  100. 	-webkit-border-radius:6px;
  101. 	border-radius:6px;
  102. 	border:1px solid #dcdcdc;
  103. 	display:inline-block;
  104. 	color:#777777;
  105. 	font-family:arial;
  106. 	font-size:14px;
  107. 	font-weight:normal;
  108. 	padding:6px 13px;
  109. 	text-decoration:none;
  110. 	text-shadow:1px 1px 0px #ffffff;	
  111. }.inactive:hover {
  112. 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
  113. 	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
  114. 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
  115. 	background-color:#dfdfdf;
  116. }.inactive:active {
  117. 	position:relative;
  118. 	top:1px;
  119.  
  120. 	/* =images
  121. ---------------------------------------------------------------------------------------*/
  122. }
  123. .ico-facebook, .ico-rss, .s-33, .linia, .s-1, .s-2, .s-3, .s-4{
  124. 	background: url(../images/sprites.png) no-repeat;
  125. }
  126. .ico-facebook{
  127. 	background-position: 0 0;
  128. 	width: 18px;
  129. 	height: 20px;
  130. }
  131. .ico-rss{
  132. 	background-position: -17px 0;
  133. 	width: 21px;
  134. 	height: 23px;
  135. }
  136. .s-33{
  137. 	background-position: -1px -24px ;
  138. 	width: 15px;
  139. 	height: 91px;
  140. }
  141. .linia{
  142. 	background-position: -49px -6px ;
  143. 	width: 301px;
  144. 	height: 1px;
  145. }
  146. .s-1{
  147. 	background-position: -19px -24px ;
  148. 	width: 128px;
  149. 	height: 127px;
  150. }
  151. .s-2{
  152. 	background-position: -166px -28px ;
  153. 	width: 122px;
  154. 	height: 122px;
  155. }
  156. .s-3{
  157. 	background-position: -300px -29px ;
  158. 	width: 140px;
  159. 	height: 122px;
  160. }
  161. .s-4{
  162. 	background-position: -444px -31px ;
  163. 	width: 163px;
  164. 	height: 122px;
  165. }
  166.  
[PHP] pobierz, plaintext


A tutaj html:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <head>
  3. <meta charset="utf-8" >
  4. <title>Moja pierwsza strona</title>
  5. <meta name="description" content="Add your sites description here">
  6. <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  7. <script type="text/javascript" src="js/jquery.min.js"></script>
  8. <script src="js/holder.js"></script>
  9. <!--[if lt IE 9]>
  10. <script src="js/html5shiv.js"></script>
  11. <![endif]-->
  12. </head>
  13. <body>
  14. <div id="fb-root"></div>
  15.  
  16. <!-- Facebook dodatek
  17.  
  18. <script>(function(d, s, id) {
  19.   var js, fjs = d.getElementsByTagName(s)[0];
  20.   if (d.getElementById(id)) return;
  21.   js = d.createElement(s); js.id = id;
  22.   js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
  23.   fjs.parentNode.insertBefore(js, fjs);
  24. }(document, 'script', 'facebook-jssdk'));</script>
  25.  
  26. -->
  27.  
  28. <div id="wrapper">
  29. 	<header id="mainheader">
  30. 		<section class="left">
  31. 			<hgroup>
  32. 				<h1>strona guzera 1.0</h1>
  33. 				<h2>Projekt szablonu wordpress</h2>
  34. 			</hgroup>
  35. 		</section>
  36. 	</header>
  37.  
  38. </div><!--/wrapper-->
  39.  
  40.  </body>
  41. </html>
[HTML] pobierz, plaintext

muniekw
27.12.2012, 13:35:20
Dla body w stylach daj jeszcze 
[HTML] pobierz, plaintext 
  1. margin:0; padding:0;
[HTML] pobierz, plaintext


Jak to nie pomoże to pokaż plik reset.css bo możesz tam nie masz czegoś wyzerowanego.
guzer
27.12.2012, 18:14:50
edit:

Ok mam w style.css na początku przy wczytywaniu reset.css napisalem rester.css, dlatego smile.gif

Dzięki

Nie pomogo

Podaje reset.css

[PHP] pobierz, plaintext 
  1. /* 
  2. html5doctor.com Reset Stylesheet
  3. v1.6.1
  4. Last Updated: 2010-09-17
  5. Author: Richard Clark - http://richclarkdesign.com 
  6. Twitter: @rich_clark
  7. */
  8.  
  9. html, body, div, span, object, iframe,
  10. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  11. abbr, address, cite, code,
  12. del, dfn, em, img, ins, kbd, q, samp,
  13. small, strong, sub, sup, var,
  14. b, i,
  15. dl, dt, dd, ol, ul, li,
  16. fieldset, form, label, legend,
  17. table, caption, tbody, tfoot, thead, tr, th, td,
  18. article, aside, canvas, details, figcaption, figure, 
  19. footer, header, hgroup, menu, nav, section, summary,
  20. time, mark, audio, video {
  21. margin:0;
  22. padding:0;
  23. border:0;
  24. outline:0;
  25. font-size:100%;
  26. vertical-align:baseline;
  27. background:transparent;
  28. }
  29.  
  30. body {line-height:1;}
  31.  
  32. article,aside,details,figcaption,figure,
  33. footer,header,hgroup,menu,nav,section { 
  34. display:block; zoom:1;
  35. }
  36.  
  37. nav ul {list-style:none;}
  38.  
  39. blockquote, q {quotes:none;}
  40.  
  41. blockquote:before, blockquote:after,
  42. q:before, q:after {
  43. content:'';
  44. content:none;
  45. }
  46.  
  47. a {
  48. margin:0;
  49. padding:0;
  50. font-size:100%;
  51. vertical-align:baseline;
  52. background:transparent;
  53. }
  54.  
  55. /* change colours to suit your needs */
  56. ins {
  57. background-color:#ff9;
  58. color:#000;
  59. text-decoration:none;
  60. }
  61.  
  62. /* change colours to suit your needs */
  63. mark {
  64. background-color:#ff9;
  65. color:#000; 
  66. font-style:italic;
  67. font-weight:bold;
  68. }
  69.  
  70. del {text-decoration: line-through;}
  71.  
  72. abbr[title], dfn[title] {
  73. border-bottom:1px dotted;
  74. cursor:help;
  75. }
  76.  
  77. table {
  78. border-collapse:collapse;
  79. border-spacing:0;
  80. }
  81.  
  82. /* change border colour to suit your needs */
  83. hr {
  84. display:block;
  85. height:1px;
  86. border:0;   
  87. border-top:1px solid #cccccc;
  88. margin:1em 0;
  89. padding:0;
  90. }
  91.  
  92. input, select {
  93. vertical-align:middle;
  94. }
[PHP] pobierz, plaintext
muniekw
28.12.2012, 09:43:02
Przejrzałem pliczek i wydaje się być ok. W którym miejscu masz margines ? Najłatwiej odpalić sobie np firebuga i posprawdzać style już na stronie i ewentualnie tam coś dodać lub usunąć.
Adis92
28.12.2012, 13:38:46 
[CSS] pobierz, plaintext 
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. border: 0;}
[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.