الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تصحيح ملف ال Css

بدأه apt في 24 نوفمبر 2008 · 8 رد · 2,211 مشاهدة · في تصميم الصفحات باستخدام ال "CSS"
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم،

أريد تصحيحا لقسم الـ CSS في القالب التالي :

  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
  5. <title>تصميم موقع</title>
  6. <style type="text/css"> 
  7. #global {
  8.  width: 750px;
  9.  border-top: 1;
  10.  border-right: 1;
  11.  border-bottom: 1;
  12.  border-left: 1;
  13.  border-color: #D4D0C8;
  14. }
  15. #title {
  16.  border-color: #D4D0C8;
  17.  border-bottom: 1;
  18. }
  19. #nav_top {
  20.  border-bottom: 1;
  21.  border-color: #D4D0C8;
  22. }
  23. #nav_infos{
  24.     text-align:left;
  25. }
  26. #content {
  27.  text-align: right; 
  28. }
  29. #left {
  30.  width: 150px;
  31.  text-align: right;
  32. }
  33. #center {
  34.     border-right: 1;
  35.  border-left: 1;
  36.  border-style: dotted;
  37.  }
  38. #right {
  39.  width: 150px;
  40.  text-align: right;
  41. }
  42. #footer {
  43.  text-align: center;
  44. }
  45.  
  46. #nav_top.right {
  47.  float: right;
  48. }
  49. #nav_top.left{
  50.  float: left;
  51. }
  52. </style> 
  53.  
  54. </head>
  55.  
  56. <body dir="rtl">
  57.  
  58. <div id="global">
  59. <div id="title">موقعي</div>
  60. <div id="nav_top">
  61.   <ul>    
  62.      <li class="right"><a href="index.php">الرئيسية</a></li>
  63.      <li class="right"><a href="register.php">التسجيل</a></li>    
  64.      <li class="right"><a href="edit.php">التحكم</a></li>  
  65.   <li class="left"><a href="edit.php">اتصل بنا</a></li>  
  66.   </ul></div>
  67.   <div id="nav_infos">عدد المتصلين الآن
  68. </div>
  69. <div id="content">   
  70.    <div id="left"></div>   
  71.    <div id="center">   هنا إظهار الصفحة التي تم اختيارها من القائمة الرئيسية   </div>   
  72.    <div id="right"></div>
  73. </div>
  74. <div id="footer">حقوق الموقع
  75. </div>
  76. </div>
  77. </body>
  78. </html>
  79.  

شكرا مسبقاً.

      
      

      

    

  

    
    

      
#2
        
        

      
القالب بنظرة سريعة صحيح، لكن الاستخدام خاطئ
class تستخدمها عندما يكون العنصر في القالب بالشكل
.something { ... }
بينما id تستخدمها عندما يكون العنصر بالشكل
.something#tuned { ... }
فالعنصر يرث مواصفات العنصر something ويحصل على مواصفات tuned أيضاً.

      
تم تعديل هذه المشاركة بواسطة Xacker في 24 نوفمبر 2008 في 16:26

      

      
Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

    

  

    
    

      
#3
        
        

      
السلام عليكم أخي Xacker،
الذي أعرفه وأطلب التصحيح أن :
- وسوم الـ HTML تعرف بأسمائها مباشرة كـ body و ul و il ...
  1. body {
  2. }
  3.  
وفي كود الصفحة نكتبها بالطريقة العادية :
  1. <body></body>
  2.  
- الـ ID تعرف أسماؤها بوضع الشكل # امام الإسم.
  1. #nav_top{
  2. }
  3.  
وفي كود الصفحة نكتبها بالطريقة التالية :
  1. <div id="nav_top"></div>
  2.  
- الـ Class تعرف أسماؤها بوضع نقطة أمام أسمائها.
  1. #nav_top.right{
  2. }
  3.  
وفي كود الصفحة نكتبها بالطريقة التالية :
  1. <div id="nav_top" class="right"></div>
  2.  

 :D

      
تم تعديل هذه المشاركة بواسطة apt في 24 نوفمبر 2008 في 21:00

      

      

    

  

    
    

      
#4
        
        

      
apt كتب:
- الـ Class تعرف أسماؤها بوضع نقطة أمام أسمائها.
[color= #666666; font-style: italic;]#nav_top.right{

[color= #009900;]}
وفي كود الصفحة نكتبها بالطريقة التالية :
<div id="nav_top" class="right"></div>
كل ما ذكرته صحيح لكن الجزء الذي اقتبسته لك غير متأكد منه لأني لم أستخدمه بهذا الشكل في حياتي.
ما أعرفه أن الـ ID يتبع الـ CLASS وليس العكس.
بأي حال، طالما تعرف كل هذا، ما الذي تطلب تصحيحه لك؟؟

      
      

      
Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

    

  

    
    

      
#5
        
        

      
أخي Xacker,
الذي اطلبه هو كيفية تموضع position الأقسام DIV لكي لا تنحرف بعضها عن بعض وكيفية التحكم بها من خلال الـ margin والـ padding وكيفية توسيط الحاوي الأكبر DIV الـ global.
وكيفية أظهار القائمة ul على الخط وليس عموديا بالشكل الافتراضي.
ثم عدم قفز القسم footer فوق الجميع.
شكراً.

      
      

      

    

  

    
    

      
#6
        
        

      
اقتباس
الذي اطلبه هو كيفية تموضع position الأقسام DIV لكي لا تنحرف بعضها عن بعض وكيفية التحكم بها من خلال الـ margin والـ padding
ارجو توضيحها 
اقتباس
وكيفية توسيط الحاوي الأكبر DIV الـ global.
لكي يعمل على فيرفوكس و حبيبنا الاكسبلورر
ضع 
body 
{
 /*for ie*/
 text-align:center;
}
/* standard browsers */
#global
{
 margin : auto;
}
وكيفية أظهار القائمة ul على الخط وليس عموديا بالشكل الافتراضي.
ul li 
{
 display:inline-block; /* or inline */
}
ثم عدم قفز القسم footer فوق الجميع.
#footer
{
 clear:both;
}

      
      

      
    

  

    
    

      
#7
        
        

      
السلام عليكم،
هذه محاولة أخرى.
ولكن مازالت القائمة عمودية وليست افقية كما اني لم اوفق في وضع القسام الثلاثة ببعضها البعض (left# و center# و right#)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html charset=windows-1256" />
  5. <title>تصميم موقع</title>
  6. <style type="text/css"> 
  7. #global {
  8.  width: 750px
  9.  margin:auto
  10.  border-top-width: 1px
  11.  border-right-width: 1px
  12.  border-bottom-width: 1px
  13.  border-left-width: 1px
  14.  border-top-style: solid
  15.  border-right-style: solid
  16.  border-bottom-style: solid
  17.  border-left-style: solid
  18.  border-top-color: #D4D0C8
  19.  border-right-color: #D4D0C8
  20.  border-bottom-color: #D4D0C8
  21.  border-left-color: #D4D0C8
  22. }
  23. #title {
  24.  border-bottom-width: 1px
  25.  border-bottom-style: solid
  26.  border-bottom-color: #D4D0C8
  27. }
  28. #nav_top {
  29.  border-bottom-width: 1px
  30.  border-bottom-style: solid
  31.  border-bottom-color: #D4D0C8
  32. }
  33. #nav_infos{ text-align:left}
  34. #content {
  35.  text-align: right
  36.  border: 1px solid #D4D0C8
  37. }
  38. #left {
  39.  width: 150px
  40.  text-align: right
  41.  border-right-width: 1px
  42.  border-right-style: solid
  43.  border-right-color: #D4D0C8
  44.  background-color: #00FF00
  45.  float:left
  46.  padding:10px
  47. }
  48. #center {
  49.  background-color: #FFFF66
  50.  float:left
  51.  padding: 10px
  52. }
  53. #right {
  54.  width: 150px
  55.  text-align: right
  56.  border-left-width: 1px
  57.  border-left-style: solid
  58.  border-left-color: #D4D0C8
  59.  background-color: #FFCC00
  60.  float:right
  61.  padding: 10px
  62. }
  63. #footer {
  64.  text-align: center
  65.  clear:both
  66.  border-top-width: 1px
  67.  border-top-style: solid
  68.  border-top-color: #D4D0C8
  69. } 
  70. #nav_top.right { float: right}
  71. #nav_top.left{ float: left}
  72. #nav_top ul il {
  73. display:inline
  74. list-style:none
  75. }
  76.  
  77. </style>
  78. </head>
  79. <body>
  80. <div id="global">
  81.   <div id="title">موقعي</div>
  82.   <div id="nav_top">
  83.     <ul>
  84.       <li class="right"><a href="index.php">الرئيسية</a></li>
  85.       <li class="right"><a href="register.php">التسجيل</a></li>
  86.       <li class="right"><a href="edit.php">التحكم</a></li>
  87.       <li class="left"><a href="edit.php">اتصل بنا</a></li>
  88.     </ul>
  89.   </div>
  90.   <div id="nav_infos">عدد المتصلين الآن</div>
  91.   <div id="content">
  92.     <div id="left">
  93.       <p>الجهة اليسرى </p>
  94.       <p>السلام عليكم</p>
  95.       <p>السلام عليكم</p>
  96.     </div>
  97.     <div id="center">
  98.       <p>هنا إظهار الصفحة التي تم اختيارها من القائمة الرئيسية</p>
  99.       <p>مرحبا بكم جميعا </p>
  100.     </div>
  101.     <div id="right">
  102.       <p>الجهة اليمنى</p>
  103.       <p>السلام عليكم</p>
  104.       <p>السلام عليكم </p>
  105.     </div>
  106.   </div>
  107.   <div id="footer">حقوق الموقع</div>
  108. </div>
  109. </body>
  110. </html>
  111.  

 :wink:

      
      

      

    

  

    
    

      
#8
        
        

      
#nav_top ul il {

display:inline

list-style:none

}
استبدل il ب li 
ثانيا لا لزوم لوضع ul

      
تم تعديل هذه المشاركة بواسطة ahmad123 في 3 ديسمبر 2008 في 23:25

      

      
    

  

    
    

      
#9
        
        

      
السلام عليكم أخي أحمد،
شكرا لك.
- القائمة افقية الآن ولكنه تنقصها النظرة الجمالية. بحيث ارتفاع الاطار nav_top# أكبر وليس متوافاة مع الكتابة داخله.
- هل بالإمكان جعل جملة "اتصل بنا" تكتب في أقصى اليسار من دون باقس القائمة.
   - عرض الـ center# لا يأخذ الحيز المخصص له.
   - هل يلزمني استعمال خاصية الـ position  : relative, relative في أحد الأقسام لأني لم أستطع كيفية استعمالها لحد الآن رغم أني قرأت عليها مراراً.
ملف التجربة في المرفقات.
شكراً.
div_ar.rar

      
      

      

    

  

    
    
    
 مواضيع مشابهة