نحوه قرار دادن object ها در صفحه

[bade saba]

سلام
احتمالا این سوال من به نظر دوستان مشکل نباشه اما چون من تازه از win programming اومدم و شروع کردم به web programming برای همین با این مسائل مشکل دارم.

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

امکانش هست تو ساختاری مثل کد زیر

<div class="main">

<div class="menuline">
<img src="img/line.png"/>
</div>

<div class="circles">
<img src="img/circles.png"/>
</div>

</div>

کاری کرد که تمام object ها موقعیتشون با گوشه بالا سمت چپ div پرنت که کلاس main رو داره تنظیم بشه و با حذف و یا اضافه کردن div کلاس menuline دیو پایینیش جابه جا نشه

اینم کد css که برای هر کدوم نوشتم
div.main
{
width:900px;
margin-left:auto;
margin-right:auto;
}

div.circles
{
position:relative;
width:700px;
top:100px;
margin-right:auto;
margin-left:auto;
}

div.menuline
{
position:relative;
top:73px;
left:565px;
}

[Gold_cpp]

با این کد نمیشه نظر قطعی داد ولی اختمال زیاد مشکل از position باشه مثلا به اونا که میرن پایین absolute:position دادی که نسبت به position relative تغییر موقعیت میدن !

اصلا از position ها استفاده نکن چون نمیتونی صفخه آراییت را مدیریت کنی مخصوصا که با div هم صفحه آرایی میکنی !

[bade saba]

با این کد نمیشه نظر قطعی داد ولی اختمال زیاد مشکل از position باشه مثلا به اونا که میرن پایین absolute:position دادی که نسبت به position relative تغییر موقعیت میدن !

اصلا از position ها استفاده نکن چون نمیتونی صفخه آراییت را مدیریت کنی مخصوصا که با div هم صفحه آرایی میکنی !

ممنون از پاسخت اما سوال من رو احتمالا دقیق نخوندی چون من سوالم رو به همین دو سه تا div که نوشتم محدود کردم و با توجه به اینها راه حل خاستم.

ممنون میشم اگه دوستانی که تجربه دارن یه جوابی بدن، حتی اگه شدنی نیست هم خوب ممنون میشم که بگید که من بیخودی نگردم

[cyrusthegreat]

دوست عزیز

اون آبجکتی که اضافه می کنی یه جایی از نظر طول و ارتفاع نیاز داره تا نمایش داده بشه. پس مجبور می شه بقیه رو بفرسته پایین. بعد اینکه منظور شما از مشخص کردن جایگاهشون چیه؟ یعنی بهشون مثل این کدی که دادی position:relative; دادی؟ اینکار بطور کلی اشتباه هست. شما اینجارو (http://barnamenevis.org/showthread.php?329178-%D8%AA%D9%81%D8%A7%D9%88%D8%AA-Absoloute-%D9%88-relative&p=1449245#post1449245) بخون همه چی میاد دستت.

در مورد اونکه با وجود و بدون وجود اون دایو که گفتی همه چی سر جاش باشه شما باید برای دایو mainات position:relative; بدی. بعد باید عناصر داخلش رو با position:absolute; و دادن مقادیر top و left مشخص کنی. در این حال اون تگ های داخلیت، دیگه براشون مهم نیست چی بالا، پایین، چپ یا راستشون قرار بگیره. با توجه به جایگاه دایو مادر و Top و Leftای که بهشون دادی قرار می گیرن و از جاشون دیگه تکون نمی خورن.

[narsic]

با توجه به سوآلت من اینجوری برداشت میکنم که شما هر المنت جدیدی رو به Div MenuLine اضافه میکنی دایو دیگه پایین میره بر فرض درست بودن این موضوع
این مشکلی که شما باهاش بر خورد کردی کاملا طبیعی هست چه هر المنت جدیدی که به این دایو اضافه میشه یک مقدار ارتفاع داره و این ارتفاع باعث میشه که دایو بعدی از بالا فاصله بیشتری بگیره.
راه حلش هم اینه که سایتت رو چند ستونه بکنی که با این روش اطلاعات این دوتا دایو میاد و کنار هم قرار میگیره یعنی دوتا دایو در دو ستون کنار هم قرار میگیره.
برای تبدیل این حالت هم باید به استایل اونا کلید float رو اضافه کنی این کلید هم مقدار های مختلفی به خودش میگیره اما برای دو ستونه کنار هم میتونی از left استفاده کنی.
برای اطلاعات بیشتر در مورد Float میتونی اینجا رو ببینی
http://www.w3schools.com/cssref/pr_class_float.asp
نمونه کد خودت هم
http://jsfiddle.net/narsic/UkzxQ/1/
*در تحت وب کار سخت و تقریبا اشتباهیه که شما هم خودت بخوای کد بنویسی هم قالب طراحی کنید (یه زمانی چند سال پیش ما این سختی ها رو داشتیم و مجبور بودیم همه کار ها رو خودمون انجام بدیم) اما حالا نیازی به این موضوع نیست شما میتونی فقط کدنویس باشی و این کار ها رو هم به شخص دیگری واگذار کنی. این موضوع در حال حاظر برای شرکت های ایرانی هم جا افتاده که برنامه نویس برنامه نویسه نه طراح ظاهر.
*اگه تازه شروع کردید ابتدا از یک سری از کتاب ها در مورد HTML, CSS, Java Script استفاده کنید.
نوروز مبارک
موفق باشید

[bade saba]

دوست عزیز

اون آبجکتی که اضافه می کنی یه جایی از نظر طول و ارتفاع نیاز داره تا نمایش داده بشه. پس مجبور می شه بقیه رو بفرسته پایین. بعد اینکه منظور شما از مشخص کردن جایگاهشون چیه؟ یعنی بهشون مثل این کدی که دادی position:relative; دادی؟ اینکار بطور کلی اشتباه هست. شما اینجارو (http://barnamenevis.org/showthread.php?329178-%D8%AA%D9%81%D8%A7%D9%88%D8%AA-Absoloute-%D9%88-relative&p=1449245#post1449245) بخون همه چی میاد دستت.

در مورد اونکه با وجود و بدون وجود اون دایو که گفتی همه چی سر جاش باشه شما باید برای دایو mainات position:relative; بدی. بعد باید عناصر داخلش رو با position:absolute; و دادن مقادیر top و left مشخص کنی. در این حال اون تگ های داخلیت، دیگه براشون مهم نیست چی بالا، پایین، چپ یا راستشون قرار بگیره. با توجه به جایگاه دایو مادر و Top و Leftای که بهشون دادی قرار می گیرن و از جاشون دیگه تکون نمی خورن.

ممنون از جواب دوستان من بخش position سایت http://www.w3schools.com/ رو خونده بودم و با این کار کردم اما جواب نگرفتم، absolute بیخیال div بالایی میشه و top , left رو با گوشه بالا و چپ صفحه set میکنه در صورتی که من میخام با div بالایش set بشه

[narsic]

الان اینا کناره هم قرار گرفتن توی نمونه من.
مشکلش کجاست میخوای چی بشه دقیقا؟

[bade saba]

با توجه به سوآلت من اینجوری برداشت میکنم که شما هر المنت جدیدی رو به Div MenuLine اضافه میکنی دایو دیگه پایین میره بر فرض درست بودن این موضوع
این مشکلی که شما باهاش بر خورد کردی کاملا طبیعی هست چه هر المنت جدیدی که به این دایو اضافه میشه یک مقدار ارتفاع داره و این ارتفاع باعث میشه که دایو بعدی از بالا فاصله بیشتری بگیره.
راه حلش هم اینه که سایتت رو چند ستونه بکنی که با این روش اطلاعات این دوتا دایو میاد و کنار هم قرار میگیره یعنی دوتا دایو در دو ستون کنار هم قرار میگیره.
برای تبدیل این حالت هم باید به استایل اونا کلید float رو اضافه کنی این کلید هم مقدار های مختلفی به خودش میگیره اما برای دو ستونه کنار هم میتونی از left استفاده کنی.
برای اطلاعات بیشتر در مورد Float میتونی اینجا رو ببینی
http://www.w3schools.com/cssref/pr_class_float.asp
نمونه کد خودت هم
http://jsfiddle.net/narsic/UkzxQ/1/
*در تحت وب کار سخت و تقریبا اشتباهیه که شما هم خودت بخوای کد بنویسی هم قالب طراحی کنید (یه زمانی چند سال پیش ما این سختی ها رو داشتیم و مجبور بودیم همه کار ها رو خودمون انجام بدیم) اما حالا نیازی به این موضوع نیست شما میتونی فقط کدنویس باشی و این کار ها رو هم به شخص دیگری واگذار کنی. این موضوع در حال حاظر برای شرکت های ایرانی هم جا افتاده که برنامه نویس برنامه نویسه نه طراح ظاهر.
*اگه تازه شروع کردید ابتدا از یک سری از کتاب ها در مورد HTML, CSS, Java Script استفاده کنید.
نوروز مبارک
موفق باشید


در مورد جدایی برنامه نویسی از طراحی مطلب خوبیه اما در شرایط فعلی من مجبورم
من توضیح float هم اینجور که من خوندم برای چپ و راسته نه بالا و پایین

[bade saba]

الان اینا کناره هم قرار گرفتن توی نمونه من.
مشکلش کجاست میخوای چی بشه دقیقا؟

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

[narsic]

من هنوز موفق نشدم متوجه بشم میخوای چه کاری انجام بدی.
میتونی یک تصویر از این کار درست کنی (Paint)

[cyrusthegreat]

ممنون از جواب دوستان من بخش position سایت http://www.w3schools.com/ رو خونده بودم و با این کار کردم اما جواب نگرفتم، absolute بیخیال div بالایی میشه و top , left رو با گوشه بالا و چپ صفحه set میکنه در صورتی که من میخام با div بالایش set بشه

دوست عزیز
دایو بالاییش یعنی چی؟؟؟ یعنی دایو مادر یا دایو دیگه ای که داخل مادر هستش و بالای اون قرار گرفته؟؟ بعدم یه نکته اینکه Absolute با چپ و بالای صفحه ست می کنه اشتباه هست. Absolute با اولین عنصری که مقدار positionای بغیر از fixed و static داشته باشه خودش رو قرار می ده. یعنی نه کل صفحه. اونی که نسبت به صفحه است، fixed می باشد.

[bade saba]

این که یه پرنتی وجود داره و position اون relative هست که وسط صفحه قرار بگیره و با تغییر سایز browser بازم وسط بمونه و در صورت نیاز اسکرول بخوره که واضحه و چون میخام همه آبجکتها این وضعیت رو داشته باشن اما نسبت به هم ثابت باشن همه رو داخل اون پرنت قرار دادم، این پرنت توی عکس شمارش 1 هست.
حالا آبجکتهای داخلی:
فرض کن شکل سمت چپ طراحی شده بعد به هر دلیلی بنا بر این میشه که آبجکت شماره 14 اضافه بشه اما نه اینجوری که اون رو بزاریم و همه برن پایینتر فقط قرار آبجکتهای 5 و 6 و 7 جابجا بشن و بقیه ثابت بمونن در همچین حالتی من مجبورم تو فایل css خاصیت top همه آبجکتهای 5 تا 13 رو با عوض کنم.
من میخام اینجوری نباشه و همه فقط به پرنت وابسته باشن

دیگه بهتر از این نمیتونم بگم:افسرده:

[bade saba]

بالایی یعنی پرنت

[bade saba]

دوست عزیز
دایو بالاییش یعنی چی؟؟؟ یعنی دایو مادر یا دایو دیگه ای که داخل مادر هستش و بالای اون قرار گرفته؟؟ بعدم یه نکته اینکه Absolute با چپ و بالای صفحه ست می کنه اشتباه هست. Absolute با اولین عنصری که مقدار positionای بغیر از fixed و static داشته باشه خودش رو قرار می ده. یعنی نه کل صفحه. اونی که نسبت به صفحه است، fixed می باشد.

ممنون، حق با شماست، من دیروز هر چی تست کردم نمیشد اما امروز درست شد نمیدونم اشتباهم چی بوده

[cyrusthegreat]

دوست عزیز

در چنین حالتی، تنها راه حل شما استفاده از جاوا اسکریپت هست. چون نمی شه با CSS تعیین کرد که فقط اون سه تایی که بعد از 14 قرار گرفتن یعنی 5 6 7 بره پایین. یا همه با هم برن، یا اصلا هیچکدومشون جاشون تغییر نکنه.