• 0
bastr3

الدرس الثالث : تصميم مربع البحث

سؤال

لكي لا تختلط الأمور على متابعي الدورة .. سنقوم ببناء مكونات الصفحة الرئيسيه شيئا فشيئا وبعد الإنتهاء نعود مرة أخرى لإتمام العمل.

مثلا : الدرس السابق غير مكتمل لأن القائمة لاتحتوي على قوائم متفرعه لذلك سنقوم بالعودة لها لاحقا لنكمل مابدأناه

نبدأ في هذا الدرس وهو تصميم مربع البحث في الموقع

أولا شيفرة هتمل (Code HTML )


<!-- Search form -->
<div class="search_area">
<form method="get" name="s" id="searchform">
<input type="text" name="Search" class="s" value="search..."/>
<input type="submit" value="go" id="searchsubmit" name="btn_search"/>
</form>
</div><!-- end Search form -->

نموذج البحث مثل القائمة الرئيسيه للموقع أي يمكن أن يتحرك ويختلف مكانه بالنسبه للتصميم لذلك سنحتاج لجعله متحرك من خلال الستايل ,


.search_area{
position: relative;
background-image: url(images/search.png);
height: 44px;
width: 233px;
}

post-21336-080758500 1338186422_thumb.pn

الصورة السابقة هي صورة التصميم الخاص بالبحث وتستخدم كما هي بدون تقطيع , كما رأينا في الستايل السابق أولا جعل الطبقه (DIV) تطفوا من خلال الأمر (relative) وجعلنا الخلفيه الصورة السابقه والطول والعرض هم نفس طول وعرض الصورة

الآن لدينا الحقل النصي وزر البحث .. في البدايه لنقم بتصحيح أماكن وحجم تواجدهما الوضع الآن كما يلي

post-21336-010973900 1338187000_thumb.pn


.search_area input[type="submit"]{
height: 32px;
width: 47px;
}

.search_area input[type="text"] {
height: 27px;
width: 176px;
}

شرح بسيط لأول سطر , تم إستدعاء الحقل (input) من نوع إرسال (submit) المتواجد داخل الطبقه (DIV) التي لها تنسيق (class : search_area )

الصورة الآن

post-21336-078757500 1338187268_thumb.pn

بما أن التصميم جاهز وهو الصورة إذن فأفضل طريقة متوفره هي جعل الحقل النصي شفاف وجعل زر البحث شفاف أيضا كما أننا سنقوم بإزاحه النص الموجود في حقل الإرسال إلى الخارج لكي لا تظهر كلمة (go ) بإستخدام الأمر (text-indent)


.search_area input[type="text"]{
background: transparent ;
border: 0 ;
padding-left:10px;
height: 27px;
width: 167px;
color: #333;
}
.search_area input[type="submit"]{
background: transparent ;
border: 0 ;
cursor:pointer;
text-indent: -1000px;
height: 32px;
width: 47px;
}

لاحظ هناك إزاحه داخليه (padding) للحقل النصي مع تغيير بعرض الحقل بنفس الإزاحه يعني كان عرض الحقل 176px مع إزاحه داخليه 10px أصبح العرض 167px , جرب أن تقوم بإظهار الحقول ووضع الإزاحه دون تغيير عرض الحقل النصي لكي ترى التغييرات التي ستحدث

الشكل النهائي لنموذج البحث

post-21336-043067100 1338187740_thumb.pn

الدرس مرفق

l3.rar

إلى اللقاء في درسنا القادم بإذن الله

العودة إلى قائمة الدروس

تم تعديل بواسطه بسام العيساوي
4

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

8 إجابة على هذا السؤال .

  • 0

السلام عليكم ورحمة الله

بارك الله بك أخي ... إن شاء أكون من متابعين الدورة قريباً

ولكن كنظرة سريعة رأيت الصورة التي تنتج في نهاية الدرس فهل هناك مشكلة فيها ... أنظر لها

وفقك الله.

post-230800-036048100 1338188748_thumb.p

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

بارك الله فيك و أكرمك الله , من المتبعين

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم ورحمة الله

بارك الله بك أخي ... إن شاء أكون من متابعين الدورة قريباً

ولكن كنظرة سريعة رأيت الصورة التي تنتج في نهاية الدرس فهل هناك مشكلة فيها ... أنظر لها

وفقك الله.

لا مازلنا في بدايه التصميم وتعمدت وضع الصور لكي تظهر للمتابع بعض المشاكل والإضطرابات الجويه :) , لم نصل حتى الآن لتصميم الترويسه والمحتوى والذيل (header, content , footer) وسنقوم بتصميم كل جزء في درس منفصل

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

- لماذا يتم نزول ذر submit أسفل text عندما نجعل الـ width=176px مع أن 176+47 بإلاضافة للـ 10px الإزاحة الداخلية تساوى 233 وهو عرض مكان صورة الخلفية .

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

- لماذا يتم نزول ذر submit أسفل text عندما نجعل الـ width=176px مع أن 176+47 بإلاضافة للـ 10px الإزاحة الداخلية تساوى 233 وهو عرض مكان صورة الخلفية .

سؤال جميل وسنتطرق له فيما بعد ولكن بما أنك سألت فالإجابه في القيم التلقائيه أو ال (Default) للوسوم لذلك لو قمنا بتصفح ملفات الستايل لمواقع كبيره سنجد ملف بإسم reset.css أو سنجد كود مثل هذا


*{
margin:0;
padding:0;
}
code,kbd,samp,pre,tt,var,textarea,input,select,isindex,listing,xmp,plaintext{
font:inherit;
white-space:normal;
}

a,img,a img,iframe,form,abbr,acronym,object,applet,table,a abbr,a acronym{
border-width:0;
}

table, ul, a, li, img, p, form, hr, dl, dt, dd, div, h1, h2, h3, h4, h5, h6, label {margin:0; padding:0}

حتى مع وجود هذه الأكواد الإزاحه التلقائيه بين العنصرين (elements) ثابته ولا يمكن تغييرها عن طريق الخصائص وبهذا يمكن إستخدام (position) لتطبيق ذلك

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

شكراً لك عزيزى بسًّام على توضيح المسألة , ولكن لم تتضح لى بعد فهل كود ضبط القيم التلقائية هذا الذى قمت بكتابته لا يحل المشكلة لأنى بالفعل كنت قد جعلت الإزاحة الداخلية والخارجية 0 للعناصر وما زالت المشكلة لم تحل , فى أخر سطر لك تقصد أنه يجب للتغلب على هذه المشكلة إستخدام position , إذا كان الأمر هكذا فما هى القيم التلقائية بالـ px بين العناصر حتى يتم وضعها فى الحسبان .

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

للأسف لاحظت أن ذلك يعتمد على

1- نوع المتصفح

2- نوع العنصر (tag element)

هذا مالاحظته ويمكن أن يعتمد على أكثر من ذلك , جرب الكود التالي لتلاحظ الفرق بين المتصفحات والعناصر


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
div,span{
border:1px solid;
}


</style>
<body>
<button>bassam</button><button>bassam</button>
<br />
<div>bassam</div><div>bassam</div>
<br />
<span>bassam</span><span>bassam</span>
<br />
<input /><input />
</body>

</html>

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

شكراً لك أخى الكريم على التوضيح

وفقك الله لما يحبه ويرضاه

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .