اخوي الغالي اتمنى ان يفيدك ردي هذا :
اولا .. افصل اكواد السي اس اس في ملف خارجي : اسمه مثلا style
كود:
body {
background: #F5F1EB;
padding: 0px;
margin: 0px;
font-family: tahoma;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #666666;
background-color: #FFFFFF;
}
a, a:link, a:visited {
text-decoration:none;
color:#2583AD;
outline:none;
}
a:hover, a:active { color:#D54E21; }
/* [Wrapper-Global]
--------------------------------------------------------------------------------- */
#global {
border : 1px solid #464646;
margin: 10px auto;
width: 770px;
}
/*[Title]
--------------------------------------------------------------------------------- */
#title {
height: 100px;
color:#999999;
font-weight: bold;
}
/*[Nav_Top]
--------------------------------------------------------------------------------- */
#nav_top {
border-bottom: 1px solid #C6D9E9;
border-top: 1px solid #3C3C3C;
background: #E4F2FD;
height: 25px;
}
#nav_top ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav_top ul li { float: right; }
#nav_top ul li a {
font: normal 12px Tahoma;
font-weight:bold;
padding: 5px 10px 5px;
text-decoration: none;
background: #E4F2FD;
display: block;
color: #2583AD;
}
#nav_top ul li a:hover , #nav_top ul li a:active{
background: #FFF;
color:#D54E21 ;
}
/*[Nav_Infos]
--------------------------------------------------------------------------------- */
#nav_infos {
border-bottom: 1px solid #E6DB55;
background: #FFFBCC;
padding: 5px;
text-align:left;
}
/*[Content]
--------------------------------------------------------------------------------- */
#content {
background:url(images/dotted.png) repeat-y center top;
width:770px;
overflow:hidden;
margin:10px 0;
}
#left, #center, #right {
padding:0 10px;
float: left;
}
#left {
width: 150px;
}
#center {
width: 410px;
}
#center h3 {
padding-bottom:2px;
color:#3399FF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3366FF;
font-size:14px;
}
#right {
width: 150px;
}
/*[Footer]
--------------------------------------------------------------------------------- */
#footer {
height: 25px;
color:#999999;
clear: both;
padding:5px;
text-align: center;
vertical-align: middle;
font-weight: bold;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#box{
padding: 5px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
}
.Style1 {color: #999999}
#date
{
line-height: 25px;
color: red;/*#BDBDA2;*/
font-weight: bold;
font-size: 12px;
letter-spacing: -1px;
float:left;
margin-right:5px;
margin-left:5px;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
border-top: solid 1px #EEEEEE;
padding-top: 5px;
margin: 5px 0px 0px 0px;
}
ul.linklist li.first
{
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
}
ثانيا قم بربط الملف السي اس اس بكود بسيط تضعه في منطقة الهيد :
كود:
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
وهذا كود الاتش تي ام ال مع فصل الملف السي اس اس
كود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<title>تصميم موقع</title>
</head>
<body>
<div id="global">
<div id="title" class="title">
</div>
<div id="nav_top">
<ul>
<li class="right"><a href="index.php">الرئيسية</a></li>
<li class="right"><a href="register.php">التسجيل</a></li>
<li class="right"><a href="edit.php">التحكم</a></li>
<li class="left"><a href="edit.php">اتصل بنا</a></li>
</ul>
<div id="date">
15 ديسمبر 2008</div>
</div>
<div id="nav_infos">
متصلون الآن :</div>
<div id="content">
<div id="left">
<p>اليسار</p>
<div id="box">
<form id="form1" action="" method="post" name="form1">
<label>اسم المستخدم</label>
<input maxlength="10" name="user" size="10" type="text" />
<br />
<input class="Style1" name="Submit" type="submit" value="ارسل" />
</form>
</div>
<br />
<div id="box">
<form id="form1" action="" method="post" name="form1">
<label>البحث</label>
<input maxlength="10" name="search" size="10" type="text" />
<br />
<input class="Style1" name="Submit" type="submit" value="ابحث" />
</form>
</div>
</div>
<div id="center">
<p>الوسط</p>
<h3>عنوان</h3>
<p>الموضوع</p>
</div>
<div id="right">
<p>اليمين</p>
<h3>الروابط الرئيسية</h3>
<div id="box">
<ul class="linklist">
<li class="first"><strong><ins>الرابط 1</ins></strong></li>
<li><ins><strong>الرابط 2</strong></ins></li>
<li><ins><strong>الرابط 3</strong></ins></li>
<li><ins><strong>الرابط 4</strong></ins><strong></strong></li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
حقوق الموقع</div>
</div>
</body>
</html>
وبإمكانك استخدام كود <p> لتنسيق افضل وخاصه في كتابة النصوص مثل
كود:
<p>حقوق الطبع محفوظة </p>
هنالك برنامج رائع اسمه ابتانا وهو محرر ويوضح لك عند وضع الخاصيه مع القيمه على اي متصفح يعمل مثل فايرفوكس والاكسبلور .. ويمكنك تحميله من هنا :
Download Aptana Studio
