غالبيتا أتناء انجاز تصميم لموقعه يستعمل البكسل في التموضع(top,left) مثل
كود PHP:
style="left:190px; top:70px;"
و أيضا في تحديد الطول و العرض
كود PHP:
style="width:450px; height:400px;"
ولنفترض صندوق(div) كهذا
كود PHP:
<div style="position:absolute; left:190px; top:70px; width:450px; height:400px; background-color: #003399;"></div>
http://wino.ws/javascript/px2percent/div1_px.html
يعني البكسل يثبت العنصر طولا وعرضا و تموضعا
لكن مشكلته انه يظهر بالشكل المطلوب على حسب القياس الذي صممته فيه أو الذي تريده أن يظهر لك فيه بالشكل المطلوب، فلو حددت للعناصر تموضعها في القياس(1024 على 768) فإنه سيظهر صغيرا في (1280 على 720) ، و كبيرا في (800 على 600).
هناك من يهرب من هذه المشكلة بأن يجعل العناصر كللها تتوسط الصفحة أو الصفحة كلها تخضع لمقياس التوسط و هذا نراه غالبا في المدونات حتى لو كبر مقياس التصفح، تبقى دائما في الوسط وهذا يعطي انظباع أن الصفحة تخضع لجميع القياسات، و هناك من يلجأ الى فكرة الجداول مع النسبة المئوية من خلا أي برنامج WYGIWYG او محرر،
وفكرة الجداول هي التي كانت سائدة قبلا و مازالت نظرا لأن كل خلية فيها تتأثرب الخلايا الأخر المرتبطة بها، لكن المشكلة هي أنك في الأخير ستجد تراكما كبيرا للخلايا أنت بغنى عن أكثر من نصفها، اضف الى ذالك صعوبة التعديل فيما بعد، كل خلية تتأثر بأختها يعني في التعديل قد يتأثر الجدول كله ان لم أقل كل الجداول
--
لكن بالنبة المئوية و style (CSS) سهلت المسآلة الآن
يمكنك بالنسبة المئوية أن تصمم على أساس قياس التصفح (800/600) و بنفس الشكل سيظهر لك في القياس(1280 على 720)
لاحظ الفرق هنا بالبكسل صمم على قياس (800/600) سيبقى الصندوق ثابتا
كود PHP:
<div style="position:absolute; left:190px; top:70px; width:450px; height:400px; background-color: #003399;"></div>
http://wino.ws/javascript/px2percent/div1_px.html
و هنا بالنسبة المئوية جربه في كل المقاييس
كود PHP:
<div style="position:absolute; left:23%; top:11%; width:56%; height:66%; background-color: #003399;"></div>
http://wino.ws/javascript/px2percent/div1_percent.html
--
تبقى القاعدة:
- العرض بالنسبة المئوية = العرض بالبكسل مقسوم على عرض القياس الذي صممت عليه مضروب في مائة
كود PHP:
Width% = (Width_Px / ScreenWidth ) * 100
مثالنا في الصندوق
العرض بالنسبة المئوية = 450 / 800 * 100 = 56.25
النتيجة 56.25 اذا هي 56% ---- %; width:56%
- الطول بالنسبة المؤية = الطول بالبكسل مقسوم على عرض القياس الذي صممت عليه مضروب في المائة
كود PHP:
Height% = (Height_Px / ScreenHeight ) * 100
الطول بالنسبة المئوية = 400 / 600 * 100 = 66.666666666
نتيجة الطول 66.66 = 66% ---- height:66%
--
قاعدة التموضعات :
كود PHP:
Left% = ( Left_Px / ScreenWidth ) * 100
= 190 / 800 * 100 = 23.25
= 23% ---- left:23%
كود PHP:
Top% = ( Top_Px / ScreenHeight ) * 100
= 70 / 600 * 100 = 11.6666
= 11% ---- top:11%
هذه هي كل القاعدة، سنطبقها الآن بشكل موسع في شكل بسيط به أربعة صناديق كان قد ارسلها لي بشار هذه وسومها
كود PHP:
<div style="position:absolute; left:30px; top:13px; width:145px; height:560px; background-color: #9999CC"></div>
<div style="position:absolute; left:190px; top:13px; width:399px; height:33px; background-color: #6699CC;"></div>
<div style="position:absolute; left:190px; top:51px; width:399px; height:524px; background-color: #999933;"></div>
<div style="position:absolute; left:598px; top:14px; width:145px; height:560px; background-color: #9999CC;"></div>
http://wino.ws/javascript/px2percent/_test1_px.html
بعد تطبيق القاعدة عليها تصبح الوسوم
كود PHP:
<div style="position:absolute; left:3%; top:3%; width:25%; height:90%; background-color: #9999CC"></div>
<div style="position:absolute; left:29%; top:3%; width:43%; height:7%; background-color: #6699CC"></div>
<div style="position:absolute; left:29%; top:11%; width:43%; height:82%; background-color: #999933"></div>
<div style="position:absolute; left:73%; top:3%; width:25%; height:90%; background-color: #9999CC"></div>
http://wino.ws/javascript/px2percent...1_percent.html
الى هنا نكون قد انتهيتا من القاعدة و تطبيقها
في الأخير قد يكون رأيك من رأي الأخ بشار حينما قال لي : زيزوار أنا فهمان عليك و القاعدة مهضومة لكن هل لنا ببرمجية تضعها في الصحفحة تغنينا عن كل هذا الحساب؟
فغلا وجدتها فكرة جميلة حيث أنك تصمم على أي مقياس ترتاح له، و البرمجية تقوم تلقائيا بتحويل البكسل الى النسبة المؤية للعناصر التي تحددها عن طريق ال ID . و قد أتممت برمجها و لله الحمد و قبل طرح السكريبت أود أن أشير و أنصح
بأن لا أنصحك أن تكون صفحتك كلها بالنسب المئوية ، فقط لبعض العناصر وحتى هذه العناصر ليس بالضرورة أن تحول الطول والعرض و التموضع فقط ما تحتاجه و ما تقتضيه الحاجة او ما يتطلبه وضع الصفحة، انما أدرجت هذه الحلقة من التبادل الخباراتي حتى نكون على دراية تامة بالنسبة المئوية في التصميم و ليس كبديل حتمي للبكسل.
نعود الى الكود الذي برمجت لهذا الغرض
كود PHP:
<SCRIPT>
<!--
var screenW = 800;
var screenH = 600;
window.onload = function(){
/*________________________*\
Script: Px2Percent V 1.1
By: Ibrahim Bidi
Nike: Zizwar`
Email: admin@Zizwar.info
Url: Winoscript.com,
\*________________________*/
var p = "%",i,s,subId,dS,tagDiv=tagDiv = document.getElementsByTagName("div");
for(i=0; i<tagDiv.length; i++){
if(tagDiv[i].id.indexOf("wino_") != -1){
subId = tagDiv[i].id.substring(5,tagDiv[i].id.length);
dS = tagDiv[i].style;
for(s=0;s<subId.length;s++){
switch(subId.charAt(s)){
case 'l':if(dS.left)dS.left = parseInt((parseInt(dS.left)/screenW)*100)+p;break;
case 't':if(dS.top)dS.top = parseInt((parseInt(dS.top)/screenH)*100)+p;break;
case 'w':if(dS.width)dS.width = parseInt((parseInt(dS.width)/screenW)*100)+p;break;
case 'h':if(dS.height)dS.height = parseInt((parseInt(dS.height)/screenH)*100)+p;alert(dS.height);break;
}
}
}
}
}
//-->
</SCRIPT>
هذا الكود تضعه في صفحتك و في المتغيرين
كود PHP:
var screenW = 800;
var screenH = 600;
تضع المقاسات التي صممت عليها قبلا والمثال هنا أننا صممنا على المقاس (800/600 )
ثم تأتي وسم العناصر التي تريدها بالنبة المئوية فتضع لها هذا الإيدي id="wino_ltwh" كهذا المثال
كود PHP:
<div id="wino_ltwh" style="position:absolute; left:190px; top:70px; width:450px; height:400px; background-color: #003399;"></div>
http://wino.ws/javascript/px2percent...with_code.html
ولنكتشف فعاليته في هذه الصفحة
http://wino.ws/javascript/px2percent...with_code.html
خصائص متقدمة في الإيدي:
لو كتبت في الإيدي wino_t فإنه سيغير فقط top الى النسبة المئوية، و اذا وضعت wino_h فإنه سيغير فقط العرض او اذا وضعت wino_hw فإنه سيغير الطول و العرض فقط
يعني أنت من يحدد في العنصر مالذي تريد له فيه النسبة المئوية
l=left و t=top و h=height و w=width
ولا فرق في الكود بين wino_htwl و wino_tlwh أو wino_tl و wino_lt
ماهية الكود لمن يهتم:
الكود يقوم بتحسس جميع وسوم div ويختار منها الوسوم التي يبتدأ الإيدي الخاص بها ب(wino_) فيبحث في الحروف التي تليها، فإذا وجد حرف w يقوم بالتأكد من وجود قيمة البكسل في width الخاص بهذا العنصر ثم يسحب قيمتها ليقوم بالحساب على نفس القاعدة التي أدرجناها سابقا ، و يعطي ل width هذا العنصر في الأخير النتيجة بالنسبة المئوية ، نفس الأمر مع l=left و t=top و h=height
وهكذا دواليك حتى ينهي جميع الوسوم التي تخضع للشرط.
هذا مالدي هذه الساعة أرجو أن تعذروني على الأخطاء الإملائية و أيضا بعض التعابير الخائنة قد يكون سببها قلة النوم ²²²
أ
أنتظر منكم على الأقل جدول بثلاث خلايا أفقية و ثلاث عمودية بدون ادراج وسم table فقط ب div و البكسل أو النسبة المئوية أو بإعتماد الكود او كما تشاء ،يالله يا بيشو أنت أول واحد 
في انتظار مشاركاتكم و خبرتكم
أستودعكم الله
و السلام
رد مع اقتباس
