[HTML][CSS][PHP]Problemz z CSS3, źle wyświetla stronę, Niewiem o co chodzi, powstaje margines od góry strony Opcje

[guzer]

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 
@import url(restet.css); 
@import url(../fonts/stylesheet.css);
 
/* =body
---------------------------------------------------------------------------------------*/
body{
	font-family:Tahoma, sans-serif;
	background:url(../images/background.png);
}
 
#wrapper{
	width:980px;
	height:600px; /*Delete*/
	margin:0 auto; /*Wyśrodkowanie*/
	background:#efefef;
	-moz-box-shadow:0px 0px 35px #bdbdbd;
	-webkit-box-shadow:0px 0px 35px #bdbdbd;
	box-shadow:0px 0px 35px #bdbdbd;
 
}
/* =typography
---------------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6{
	font-family: 'CaviarDreamsBold', sans-serif;
	font-weight:normal;
	padding:20px 0 0 0;
}
/* =header
---------------------------------------------------------------------------------------*/
#mainheader{
	height:110px;
	width:940px;
	margin:0 auto;
}
#mainheader hgroup{
	text-shadow:1px 1px #fff;
}
#mainheader h1{
	font-family: 'BebasNeueRegular', sans-serif;
	color:#f14d47;
	font-size:50px;
	padding:20px 0px 0px 0px;
 
}
#mainheader h2{
	font-family: Tahoma, sans-serif;
	font-size:20px;
	color:#808080;
	padding:0px 0px 20px 0px;
	font-style:italic;
 
}
/* =nawigations
---------------------------------------------------------------------------------------*/
#mainmenu{
	font-family: 'BebasNeueRegular', sans-serif;
}
 
/* =buttons
---------------------------------------------------------------------------------------*/
.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #f68c88, 1px 3px 6px #000;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f68c88, 1px 3px 6px #000;
	box-shadow:inset 0px 1px 0px 0px #f68c88;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f46e69), color-stop(1, #f14d47) );
	background:-moz-linear-gradient( center top, #f46e69 5%, #f14d47 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f46e69', endColorstr='#f14d47');
	background-color:#f46e69;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #f14d47;
	display:inline-block;
	color:#e0dce0;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #767575;
 
}.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f14d47), color-stop(1, #f46e69) );
	background:-moz-linear-gradient( center top, #f14d47 5%, #f46e69 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f14d47', endColorstr='#f46e69');
	background-color:#f14d47;
}.button:active {
	position:relative;
	top:1px;
}
.inactive {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:14px;
	font-weight:normal;
	padding:6px 13px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;	
}.inactive:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.inactive:active {
	position:relative;
	top:1px;
 
	/* =images
---------------------------------------------------------------------------------------*/
}
.ico-facebook, .ico-rss, .s-33, .linia, .s-1, .s-2, .s-3, .s-4{
	background: url(../images/sprites.png) no-repeat;
}
.ico-facebook{
	background-position: 0 0;
	width: 18px;
	height: 20px;
}
.ico-rss{
	background-position: -17px 0;
	width: 21px;
	height: 23px;
}
.s-33{
	background-position: -1px -24px ;
	width: 15px;
	height: 91px;
}
.linia{
	background-position: -49px -6px ;
	width: 301px;
	height: 1px;
}
.s-1{
	background-position: -19px -24px ;
	width: 128px;
	height: 127px;
}
.s-2{
	background-position: -166px -28px ;
	width: 122px;
	height: 122px;
}
.s-3{
	background-position: -300px -29px ;
	width: 140px;
	height: 122px;
}
.s-4{
	background-position: -444px -31px ;
	width: 163px;
	height: 122px;
}
 
[PHP] pobierz, plaintext 

A tutaj html:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<head>
<meta charset="utf-8" >
<title>Moja pierwsza strona</title>
<meta name="description" content="Add your sites description here">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/holder.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="fb-root"></div>
 
<!-- Facebook dodatek
 
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
-->
 
<div id="wrapper">
	<header id="mainheader">
		<section class="left">
			<hgroup>
				<h1>strona guzera 1.0</h1>
				<h2>Projekt szablonu wordpress</h2>
			</hgroup>
		</section>
	</header>
 
</div><!--/wrapper-->
 
 </body>
</html>
[HTML] pobierz, plaintext 

[muniekw]

Dla body w stylach daj jeszcze

[HTML] pobierz, plaintext 
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.

Ten post edytował muniekw 27.12.2012, 13:38:42

[guzer]

edit:

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

Dzięki

Nie pomogo

Podaje reset.css

[PHP] pobierz, plaintext 
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
 
body {line-height:1;}
 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block; zoom:1;
}
 
nav ul {list-style:none;}
 
blockquote, q {quotes:none;}
 
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
 
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
 
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
 
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}
 
del {text-decoration: line-through;}
 
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
 
table {
border-collapse:collapse;
border-spacing:0;
}
 
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
 
input, select {
vertical-align:middle;
}
[PHP] pobierz, plaintext 

Ten post edytował guzer 27.12.2012, 18:25:02

[muniekw]

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]

[CSS] pobierz, plaintext 
*{
margin: 0;
padding: 0;
border: 0;}
[CSS] pobierz, plaintext 

Ten post edytował Adis92 28.12.2012, 13:39:02