برای استفاده از تمام امکانات سایت از جمله مرکز دانلود باید در سایت عضو شوید. برای ثبت نام تنها 1 دقیقه زمان نیاز دارید ، برای ثبت نام اینجا کلیک کنید


ثبت نام  راهنماي انجمن  جستجو  ليست اعضا  گروه هاي كاربران    ورود


ارسال يك موضوع جديد  پاسخ به يك موضوع

نحوه چیدمان Box های CSS در صفحه

 
نويسنده پيغام
echess
ارسالزمان ارسال: شنبه May 12, 2007 5:30 pm    موضوع: نحوه چیدمان Box های CSS در صفحه پاسخ بصورت نقل قول



تاريخ عضويت: 12 May 2007
ارسالها: 1


درود بر شما
و راه اندازی این فرم رو تبریک ارض می کنم (ببخشید که دسته خالی اومدم ایشالا با یه مقاله توپ)
سوالی داشتم خدمتتون که:
ما 3 باکس داریم، می خواهم باکس وسط طوری طراحی بشه که در صورتی که باکس چپ را حذف کردیم، جای آن را پر کند.
پیشاپیش از راهنمایی شما سپاسگزارم
code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
#wrp, #left, #center, #right {
   padding:0; margin:0; border:0;
}
#wrp {
   width:600px; background:red;
}
#left, #center, #right {
   float:left;
}
#left {
   background:green; width:100px;
}
#center {
   background:fuchsia; width:400px;
}
#right {
   background:blue; width:100px;
}
</style>
</head>

<body>
<div id="wrp">


<div id="left">
<p>echess</p><p>echess</p><p>echess</p><p>echess</p><p>echess</p>
</div>


<div id="center">
<p>echess</p><p>echess</p><p>echess</p><p>echess</p><p>echess</p>
</div>


<div id="right">
<p>echess</p><p>echess</p><p>echess</p><p>echess</p><p>echess</p>
</div>

</div>
</body>

</html>
بازگشت به بالا
دیدن پروفایل کاربرانارسال پیغام خصوصی
amir abbas
ارسالزمان ارسال: 1 شنبه May 13, 2007 5:57 pm    موضوع:  پاسخ بصورت نقل قول

راهبر انجمن

تاريخ عضويت: 08 Sep 2006
ارسالها: 1521


سلام

خوش اومدی
والا این چیزی که شما می خوای من فکر میکنم شدنی نباشه. شما وقتی می خوای یه طرح دو یا سه ستونی ایجاد کنی یا دو ستون کناری رو به شکل absolute موقعیت دهی کنی یا اینکه اون دو ستون رو با float در سمت چپ و راست قرار بدی.در هر دو حالت شما باید مقدار width رو در صفحه به ظور مشخص تعیین کنی در غیر این صورت نمیتونید عناصر رو در کنار هم قرار بدید. من کتاب هایی که داشتم رو گشتم ولی همچین چیزی که شما میخواید رو من نتونستم پیدا کنم.
الان سیستمی مثل www.drupal.org داره از یه قالب تمام CSS استفاده میکنه و تو دروپال شما می تونی ستون های کناری رو حذف و یا اضافه کنی. من دقت کردم که اینها اومدن و برای نام کلاس های CSS از یه سری متغیر استفاده کردن که وقتی شما طرح دو یا سه ستونی رو انتخاب میکنی میاد و اسم کلاس ها رو تغییر میده و در نتیجه کد مربوط به اون کلاس وارد عمل میشه و صفحه رو ایجاد میکنه.

اینکه بخواید یه کد بنویسید که وقتی یه ستون حذف بشه خود به خود منبسط بشه و جای اون ستون حذف شده پر بشه به نظر من شدنی نیست. البته غیر ممکن نیست. شاید باشه ولی من اطلاع نداشته باشم. اگر همچین چیزی رو جایی دیدی یه لینک بدید تا بتونیم برسیش کنیم

Wink
بازگشت به بالا
دیدن پروفایل کاربرانارسال پیغام خصوصیارسال ايميلديدن وب سايت كاربر
NabiKAZ
ارسالزمان ارسال: 5 شنبه May 17, 2007 4:38 pm    موضوع:  پاسخ بصورت نقل قول



تاريخ عضويت: 08 Feb 2007
ارسالها: 10
محل سكونت: اهواز

سلام ،

حسین جان ممنون که به خاطر من این سوال رو مطرح کردی و آقای امیر عباس ممنون که پاسخ دادید.

ظاهرا تنها راهش استفاده از همون برنامه نویسی داینامیک هست و باید به صورت متغییر در سمت سرور تعیین بشه...

راستی یه نکته ، بهتر نیست که در عرض های ثابت، ستون های داخلی صفحه رو بر حسب در صد تعریف کنیم ، شاید اینکار بی فایده به نظر برسه و در صفحاتی که عرض ثابت دارند فرقی نکنه که ستون های داخلی بر حسب درصد یا پیکسل باشند. اما اگر به صورت درصد باشه اونوقت اگر تصمیم گرفته بشه که عرض کل صفحه رو که ثابت بوده به یه مقدار دیگه تغییر بدیم ، دیگه نیازی نیست تک تک ستون های داخل اون رو تغییر بدیم و همه ستون ها خود به خود به نسبت بزرگ میشن.
حتی خیلی جالب میشه اگر با یه کد جاوا اسکریپت کوچیک به کاربر این امکان رو بدیم که المان اصلی که عرض ثابت داره رو تغییر بده و با اینکار المان ها و ستون های داخلی به نسبت بزرگ و کوچیک میشن و این خیلی جالبه .

این نکته آخر رو که گفتم به یاد یه ایده برای حل مشکل اصلی افتادم.
میشه یه کد جاوا انتهای صفحه اضافه کنیم تا اون چک کنه که اگر المان سمت چپ وجود نداشته باشه ، میزان عرض ستون وسط رو مقداری قرار بده که جای خالی ستونی رو که وجود نداره رو پوشش بده و به این ترتیب همون کاری که در سمت سرور قراره انجام بشه رو در سمت کاربر انجام میدیم با این حسن که دغدغه این رو نخواهیم داشت که خودمون تصمیم بگیریم چه متغییری رو برای عرض ستون وسط پاس بدیم، هر مقداری که میخوایم پاس میدیم ، خود جاوا اسکریپت عرض مناسب رو به المان اعمال میکنه .
به عبارت دیگه در سمت سرور باید یه سری از صفحاتی که ستون سمت چپ رو ندارند از صفحاتی که هر سه ستون رو دارند تفکیک کنیم و بر حسب نمایش هر صفحه و اینکه جزو کدوم دسته است، مقدار عرض مورد نظر رو به خروجی بفرستیم. اما در روش سمت کاربر که توضیح دادم ، صرف نظر از اینکه صفحه جاری از کدام دسته است، خود جاوا اسکریپت بررسی میکنه که ستون سمت چپ وجود داره یا خیر و در صورت موجود نبودن، میزان عرض مناسب رو جهت پوشش فضای خالی، نسبت میده.

اینطور نیست؟

تشکر
نبی
بازگشت به بالا
دیدن پروفایل کاربرانارسال پیغام خصوصیارسال ايميل
amir abbas
ارسالزمان ارسال: جمعه May 18, 2007 12:07 pm    موضوع:  پاسخ بصورت نقل قول

راهبر انجمن

تاريخ عضويت: 08 Sep 2006
ارسالها: 1521


نقل قول :
راستی یه نکته ، بهتر نیست که در عرض های ثابت، ستون های داخلی صفحه رو بر حسب در صد تعریف کنیم ، شاید اینکار بی فایده به نظر برسه و در صفحاتی که عرض ثابت دارند فرقی نکنه که ستون های داخلی بر حسب درصد یا پیکسل باشند. اما اگر به صورت درصد باشه اونوقت اگر تصمیم گرفته بشه که عرض کل صفحه رو که ثابت بوده به یه مقدار دیگه تغییر بدیم ، دیگه نیازی نیست تک تک ستون های داخل اون رو تغییر بدیم و همه ستون ها خود به خود به نسبت بزرگ میشن.


خوب این کار شدنیه ولی یه عیبی داره و اون هم اینه که اکثرا مایلند که ستون ها کناری در همه حال عرض ثابت داشته باشه. اگر شما از اون شیوه استفاده کنی بعد از تغییر اندازه عرض صفحه، عرض ستون ها هم چون با درصد مشخص شده در نتیجه اگر صفحه بزرگتر بشه اون ستون ها هم پهن تر میشن و اگر صفحه جمع تر بشه اون ستون ها هم جمع میشن. دلیل اینکه اغلب ستون ها کناری رو با پیکسل مقدار دهی میکنند فکر کنم همین باشه

نقل قول :
حتی خیلی جالب میشه اگر با یه کد جاوا اسکریپت کوچیک به کاربر این امکان رو بدیم که المان اصلی که عرض ثابت داره رو تغییر بده و با اینکار المان ها و ستون های داخلی به نسبت بزرگ و کوچیک میشن و این خیلی جالبه .


بله این کار شدنیه. من تا حالا چند طرح دیدم که به این شکل کار می کرد. خیلی هم جالبه. البته به شرطی که جاوا اسکریپت روی مرورگر کاربر فعال باشه که در 96 درصد اوقات فعاله (برای کاربران ایرانی 100 درصد فعاله).

در مورد روش آخری که با جاوا اسکریپت توضیح دادید ، طرح جالبیه. من خودم جاوا اسکریپت نمیدونم ولی قطعا شدنیه. الان خیلی از ضعف هایی که CSS داره یا ساپورت ضعیف CSS در مرور گر های مختلف رو میشه با javascript مرتفع کرد. مثلا max width و min width توسط مرورگر IE ساپورت نمیشه ولی الان کد های جوااسکریپی هست که این مشکل رو برطرف میکنه Wink
بازگشت به بالا
دیدن پروفایل کاربرانارسال پیغام خصوصیارسال ايميلديدن وب سايت كاربر
NabiKAZ
ارسالزمان ارسال: شنبه May 19, 2007 11:06 am    موضوع:  پاسخ بصورت نقل قول



تاريخ عضويت: 08 Feb 2007
ارسالها: 10
محل سكونت: اهواز

ممنون از توضیحاتتون.

کد جاوایی که hover رو برای تمام المان ها در IE با معنی میکنه و توسط متد behavior در CSS فراخوانی میشه ، هم بسیار جالبه.
http://www.xs4all.nl/~peterned/
بازگشت به بالا
دیدن پروفایل کاربرانارسال پیغام خصوصیارسال ايميل
نمايش نامه هاي ارسال شده قبلي:   
ارسال يك موضوع جديد  پاسخ به يك موضوع صفحه 1 از 1