سوال: یه مورد جالب:چرا وقتی کدهای css رو میبرم تو فایل جداگانه به Header از اطراف حاشیه میده؟ [بایگانی]

davood59

شنبه 29 آذر 1393, 10:47 صبح

سلام دوستان عزیز:
به یه مورد جالب و کمی شاید برای خودم عجیب برخورد کردم.

به این کد توجه کنید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Mofid</title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<body>
<header>
<div id="container">
<div id="login">
<div id="logoenter">

</div>

<div id="entertext">
ورود
</div>

</div>
</div>
</header>
</body>
</html>

این هم محتویات فایل style.css که داره روی این اعمال میشه.

<style type="text/css" media="screen">
*{
margin:0px;
padding:0px;
}
body {
background-color:#fff;

}

header{
height:80px;
background-color:#efefef;
}

#logoenter{
float:left;
margin-top:23px;
margin-left:5px;
background:url('../images/logoenter.png') no-repeat ;
height:30px;
width:30px;
}

#login{
}

#entertext{
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
font-size:17px;
background-color:blcak;
float:left;
margin-top:27px;
height:10px;
text-align:right;
width:50px;
}

#container{
width:960px;
height:667px;
opacity:2;
margin:0 auto;
}

</style>

حالا فایل html بعدی رو هم ببینید: این فایل در واقع خودش شامل هر دو تا فایل بالاست و فایل css رو دیگه جدا نکردم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Mofid</title>
</head>
<style type="text/css" media="screen">
*{
margin:0px;
padding:0px;
}
body {
background-color:#fff;

}

header{
height:80px;
background-color:#efefef;
}

#logoenter{
float:left;
margin-top:23px;
margin-left:5px;
background:url('../images/logoenter.png') no-repeat ;
height:30px;
width:30px;
}

#login{
}

#entertext{
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
font-size:17px;
background-color:blcak;
float:left;
margin-top:27px;
height:10px;
text-align:right;
width:50px;
}

#container{
width:960px;
height:667px;
opacity:2;
margin:0 auto;
}
</style><body>
<header>
<div id="container">
<div id="login">
<div id="logoenter">

</div>

<div id="entertext">
ورود
</div>

</div>
</div>
</header>
</body>
</html>

سوالم اینجاست که چرا الان خروجی این دو تا با همدیگه تفاوت داره؟؟ در صورتی که نباید اینجوری باشه. الان در دومی برنامه درست داره کار میکنه و همونجور که میخوام header دقیقا چسبیده به بالا و اطراف و در واقع اصلا فاصله ای از کناره ها و یا بالا نداره، ولی فایل اولی که کدهای css جدا هستند، فاصله داره! چرا اینجوریه؟

دانیال دزفولی

شنبه 29 آذر 1393, 12:59 عصر

آدرس رو اینطوری تغییر بده

<link rel="stylesheet" type="text/css" href="css/style.css?v=davood" />

davood59

شنبه 29 آذر 1393, 18:27 عصر

سلام دانیال جان، ازت ممنونم ولی جواب نداد. آخه میدونی سوالم چیه؟ میگم چرا وقتی که فایل css رو جدا میکنیم از فایل html به طور پیش فرض به body داره margin میده؟؟؟ من که کار خاصی نکردم باهاش . فقط بردمش تو یه فایل جداگانه. امکانش هست یه تستش بکنی؟
البته میدونی من فعلا چجوری درستش کردم؟ به تگ body هم margin و Padding صفر رو اعمال کردم.
حالا به محض اینکه Header رو درست کنم برای اظهار نظر شما اساتید عزیز هم تو این سایت و هم تو سایت طراحان وب که درست کردی میذارمش. ضمنا دستت بخاطر درست کردن وب سایت درد نکنه.

ashkufaraz

شنبه 29 آذر 1393, 21:22 عصر

چون
1.لینک به css بعد از </head> قرار داره
2.تو فایل خارجی دیگه نیاز به استفاده از تگ style نیست
من این دو تا را اعمال کردم خروجی ها مثل هم شدن