ورود

View Full Version : سوال: مشکل با حاشیه دادن هدر سایت


سعید کشاورز
سه شنبه 01 فروردین 1391, 22:15 عصر
سلام دوستان به این کدهای یه نگاه بندازین


body{
background-image:url(img/background.png);
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
}
.site{
margin:auto;
width:1000px;
height:1500px;
background-color:#F36;
}
#header{


width:900px;
height:200px;
background-color:#333;
}


من یه div کلی تعریف کردم که کل محتویات سایت رو توی اون قرار میدم
حالا می خوام هدر سایت بیوفته وسط div اصلی و همچنین مقداری از بالا 5px فاطله بگیره.
وقتی margin هدر رو برابر Auto قرار میدم میوفته وسط Div ولی وقتی margin-top میدم اون Div اصلی از بالا فاصله میگیره ولی من میخام هدر سایت کمی از بالا نسبت به اون Div سایت فاصله بگیره.
از Padding هم استفاده کردم نشد.
ضمنا از کدهای css reset استفاده میکنم
با تشکر
EMERTAT
سه شنبه 01 فروردین 1391, 22:40 عصر
.......................
clover
سه شنبه 01 فروردین 1391, 23:05 عصر
این به خاطر یه مسئله در باکس مدل هست که توضیحش مفصله اما با اضافه کردن padding-top: 1px به کلاس site می تونید مشکل رو حل کنید.
موفق باشید
EMERTAT
سه شنبه 01 فروردین 1391, 23:10 عصر
ببخشید پست قبلی من مشکل داشت بنابراین ویرایش کردم تازه منظورتون فهمیدم حالا براتون توضیح می دم

مشکلی که در div های تو در تو وجود داره اینه که با تغییر margin-top مقدارم اون در div پدر هم تغییر می کنه

برای رفع این مشکل باید به div پدر padding را مقدار دهی کنید حداقل 1px

اینم اصلاح شده برنامه شما

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<STYLE>
.site{
margin:auto;
width:1000px;
height:1500px;
background-color:#F36;
padding:1px;
}
#header{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width:900px;
height:200px;
background-color:#333;
}

</STYLE>
</head>

<body>
<div class="site">
<div id="header">
</div>
</div>
</body>

</html>

بازم کمک خاصی برام پیغام بزار
سعید کشاورز
سه شنبه 01 فروردین 1391, 23:12 عصر
به قسمت header# اینا رو اضافه کن

margin-left:auto;
margin-right:auto;
margin-top:5px;

من تو قسمت هدرتون نمی بینم margin گذاشته باشین

اگه باز مشکل داشتید میشه کدهای HTML هم بزارین
بازم نشد.ببینید من میخام هدر سایتم نسبت به div اصلی که اسمش رو توی فایل گذاشتم site فاصله بگیره
مرسی..فایلها رو ضمیمه کردم.
EMERTAT
سه شنبه 01 فروردین 1391, 23:16 عصر
دوست عزیز براتون کد گذاشتم

:چشمک:

اونم ویرایش کنید لطفاً
EMERTAT
سه شنبه 01 فروردین 1391, 23:20 عصر
دوست عزیز اگه خواستی بیشتر بدونی داخل سایت sitepoint در موردش توضیح داده

http://reference.sitepoint.com/css/collapsingmargins
سعید کشاورز
سه شنبه 01 فروردین 1391, 23:31 عصر
#header{
margin: 5px 50px auto auto;
width:900px;
height:200px;
float:right;
background-color:#333;
}

آقا مشکل حل شد.یه دوست کمک کرد