تحديث آخر نسخة 1.8.37

تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
التحكم فى تمدد الاستايل
#1
سؤال للمصممين
انا عايز اعرف ازاى اتحكم فى تمدد الاستايل
يعنى يبقى متمدد بس مش بعرض الصفحة كلها
بس انا عايز الكلام ده يبقى على كل حاجه فى الاستايل يعنى الاقسام المواضيع منطقة الاعضاء وكده
ما عدا الهيدر والفوتر ينفع الكلام ده ولا ايه
الرد
شكر من طرف :
#2
اولا, الموضوع ده يعتبر موسع جدا, ومختلف جدا من تصميم الى اخر (سواء التصميم كان لمنتدى او مدونة, او لصفحة HTML حتى)..


ثانيا, بالنسبة لنقطة التمدد لا يمكن ان تكون موجودة مثلا بأعلى واسفل صندوق الرد السريع, وغير موجود بالهيدر والفوتر, لأنك اذا قمت بذلك, سيحدث تمدد (مع حجم الشاشة ونافذة المتصفح) فى صندوق الرد السريع, ولن يحدث فى منطقة الفوتر والهيدر, وذلك ان لم يكن مصمم بطريقة متقنة ليعمل بهذا الشكل سوف يشوف المنظر..

بكل الأحوال, مناطق التمدد بتكون عبارة عن ايه؟

مثلا لدينا جزء مثل اعلى الصندوق الرد السريع,الجزء الأيمن منه, به شكل معين, والجزء الأيسر كذلك, وبين هذه الأجزاء يوجد شكل اخر اذا تم تكراره لن يؤثر على الشكل الإجمال للتصميم (ولا يشترط ان تكون منطقة التمدد بالوسط, يمكن ان تكون باليمين او اليسار حسب التصميم)..

المهم هو ان هذا الجزء القابل للتكرار نجعله نقطة امتداد عن طريق وضعه كاخلفية ويتم تكرارها بشكل افقى..


اتمنى ان اكون اجبتك عن سؤالك بالطريقة النظرية, وكما ذكرت لك وربما انت لاحظت ذلك, ان الأمر متسع جدا ومختلف جدا من تصميم الى اخر..

لذلك يجب عليك ان تمارس او تحلل بعض التصميمات التى بها نقاط تمدد حتى تستطيع بنفسك تحديد المناطق الأنسب لتكون نقطة تمدد بتصميمك.
الرد
شكر من طرف :
#3
شرح رائع بيبو
بس انا بعرف اعمل نقطة التمدد
بس انا مش عايزها تتكرر لغاية ما الاستايل يلزق فى الحافة خالص
انا عايز يكون فى مسافة فارغة على اليمين والشمال
انا عملت طريقة وهى انى اعمل مربع فاضى على اليمين والشمال
عشان يعمل الفراغ ده
بس الموضوع ده متعب وحاسس انه مش علمى خالص
الرد
شكر من طرف :
#4
لا, انت مش محتاج تخلى الإستايل ممتد لنهاية الصفحة.

اجعل حجم الـ body مثلا 80%

ثم ضع بداخله div وداخل هذا الـ div ضع بقية عناصر الصفحة..

ولنفرض مثلا ان منطقة الهيدر سيكون بها جزء ايمن وجزء ايسر ونقطة تمدد بالوسط.

تضع div وتضع له الخلفية التى هى فى الأصل نقطة التمدد.
وداخل هذا الـ div يكون هناك div للجزء الأيمن واخر للجزء الأيسر وكل منهم له الخصائص padding: 0 و margin: 0
الرد
شكر من طرف :
#5
هو ده بالظبط اللى انا اقصده
شكرا على المعلومة
ربنا يخليك لينا
بص هو حجم body ده من css صح
ممكن تشرح لى موضوع div ده بالتفصيل شوية
الرد
شكر من طرف :
#6
شكرررررررررررررررررررررررررررررررررررررررررررررررررررا
الرد
شكر من طرف :
#7
لو عندك خبرة في لغة php و html اخي هتساعدني اني اوصلك الفكرة و انا موجود لو عندك اي استفسار

اولا : افتح الفوتو شوب وقسم الصورة عن طريق الاداة slice ( اضغط علي حرف ال k )

و راعي نقطة التمدد انها تكون زي منتا عارف مكان فاضي في الصورة لو اتكرر الصورة مش هيحصلها حاجة

ثانيا : احفظ عملك باستخدام save for web

ثالثا : افتح الفرونت بيج و اعمل جدول من خانتين و ضيف في كل خانة من insert picture الصورتين اليمين و الشمال (سيب صورة التمدد دلوقتي)

رابعا : افتح من تحت الصفحة الخاصة بالكود

خامسا : ضع المؤشر علي كلمة tabel و كليك يمين و اختار اخر حاجة tag properties

سادسا : هتلاقي اتفتحلك صفحة منها تقدر تخلي الجدول في نص الصفحة من alignment و تعمل خلفية للجدول ( صورة التمدد )
و متنساش cellspacing=0 cellpadding=0 و border size =0


سابعا : نسيت اقولك ارجع علي design تاني من تحت و اختار الصورة اللي علي اليمين و اعملها محاذاة لليمين من اداة محاذاة النص فوق
و الصورة اللي علي الشمال نفس الموضوع

المهم ان الكود بتاعك بعد ما يخلص هيكون بالشكل دا
كود :
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="en-us">
<TITLE>logo</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (logo.gif) -->
<div align="center">
<table border="0" width="100%" id="table1" background="images/logo_02.gif" cellspacing="0" cellpadding="0">
    <tr>
        <td>
        <p align="left">
        <img border="0" src="images/logo_01.gif" ></td>
        <td>
        <p align="right">
        <img border="0" src="images/logo_03.gif" ></td>
    </tr>
</table>
</div>
</BODY>
</HTML>


و بعد كدا افتح موقع الدعم العربي و اقرا تحويل استايل من vb الي mybb

و انسخ الكود اللازم و متنساش تغير مسار الصور في الكود لمسار الصور بعد رفعها علي رابط منتداك و حطة في خانة الهيدر

و لو عايز تعمل نفس الموضوع مع الفوتر مفيش مشكلة
المهم عشان عارف انك هاتسأل ايه هوا الكود اللازم بص يا سيدي الكود اهو

كود :
<div align="center">
<table border="0" width="100%" id="table1" background="images/logo_02.gif" cellspacing="0" cellpadding="0">
    <tr>
        <td>
        <p align="left">
        <img border="0" src="images/logo_01.gif" ></td>
        <td>
        <p align="right">
        <img border="0" src="images/logo_03.gif" ></td>
    </tr>
</table>
</div>

طبعا يفضل انك تغير العرض من 100% الي 80% بس انا عملته 100% عشان تجرب التمدد و تتأكد انو شغال

لو فشلت انسخ الكود اللي فوق ده في اول الهيدر و غير مسار الصور و هو هيشتغل معاك تمام



ارجو من الادارة دمج المشاركتين مع بعض
الصور لما تيجي تعملها محاذاة الصورة اللي علي اليمين تعملها محاذاة لليمين
و الصورة اللي علي الشمال تعملها محاذاة للشمال
الرد
شكر من طرف :


التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 2 ) ضيف كريم