ipop

این لایه ها چرا کنار همدیگه قرار نمیگیرن؟

شروع موضوع توسط mohammad ali ‏13 ژوئن 2007 در انجمن CSS

  1. mohammad ali

    mohammad ali کاربر تازه وارد

    تاریخ عضویت:
    ‏17 دسامبر 2006
    نوشته ها:
    30
    تشکر شده:
    0
    سلام

    من یه مشکل پیدا کردم. الان 2 ساعتی میشه که دارم باهاش ور میرم اما درست نمیشه.
    اینو بگم که من css بلد نیستم و این کد ها رو با MS Expression Web ساختم.
    لطفا کمکم کنید ، حیاتی هست:

    من چند تا لایه ( div ) ساختم ، اینطوری:
    کد:
    <div id="main">
    
    <div id="left"></div>
    <div id="right"></div>
    
    </div>
    
    این استایل رو هم بهشون دادم:
    کد:
    #main {
    	width: 800px;
    	border: 0;
    	margin: 0 auto;
    	padding: 0;
    }
    
    #left {
    	background-image: url("../images/left.png");
    	background-repeat: no-repeat;
    	left: 0px;
    	width: 200px;
    	height: 50px;
    	position: absolute;
    }
    
    #right {
    	background-image: url("../images/right.png");
    	background-repeat: no-repeat;
    	width: 200px;
    	height: 50px;
    	left: 800px;
    	position: absolute;
    }
    
    
    لایه ی main هم دقیقا وسط صفحه هست.
    حالا مشکل من اینه که وقتی مقدار left رو برای لایه های چپ و راست ست میکنم ، این مقدار از کنار صفحه شروع میشه نه از کنار لایه ی main.
    حالا مثلا من بیام و همه دیو ها رو تنظیم کنم ، کاربر وقتی بخواد صفحه رو minimize کنه یا رزولوشنش فرق داشته باشه تمام صفحه بهم میریزه.

    حالا سوال من اینه:

    چطور میتونم لایه ی right رو درست داخل لایه ی main و سمت راست و لایه ی left رو داخل لایه ی main و سمت چپ بزارم؟

    راستی ، یه لایه دیگه هم دارم که باید کنار left بچسبه ، اونو چطوری انجام بدم؟


    این سوال حیاتی هست ، لطفا زودتر پاسخ بدید.

    پیشاپیش متشکرم.
     
  2. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    ۲ تا مقدار position دارید تو css هاتون که جفتش <absolute> هست. هر دو رو بکنید <relative> . درست میشه.
     
  3. mohammad ali

    mohammad ali کاربر تازه وارد

    تاریخ عضویت:
    ‏17 دسامبر 2006
    نوشته ها:
    30
    تشکر شده:
    0
    بازم ممنون.
     
  4. mohammad ali

    mohammad ali کاربر تازه وارد

    تاریخ عضویت:
    ‏17 دسامبر 2006
    نوشته ها:
    30
    تشکر شده:
    0
    ببخشید آقا شایان
    مطمئنی باید از relative استفاده کنم؟
    اینهایی که دارم میسازم برای دکمه های ناوبری هدر سایت هست.
    برای هر کدوم از این دکمه ها که اینو ست میکنم و دکمه بعدی به اندازه 50 پیکسل هر دکمه میره پایینتر، یعنی به اندازه ارتفاع هر کدوم از دکمه ها. بعدش مجبورم top و left رو برای هرکدوم از دکمه ها تغییر بدم که این کار رو میکنم.

    خب ، اینجا درست شد ، اما لایه messages ( قسمت زیر هدر که متن صفحه توش هست ) به اندازه ارتفاع کل دکمه های هدر رفته پایین و با top هم نمیتونم درستش کنم:
    کد:
    #messages {
    	width: 800px;
    	margin: 0 auto;
    	padding: 0;
    	border: 0;
    	top: -300px;
    }
    
    الان لایه مسیجز 300 پیکسل با هدر فاصله داره و همونطور که گفتم نتونستم اونو به هدر بچسبونم.
     
  5. amir abbas

    amir abbas Registered User

    تاریخ عضویت:
    ‏28 سپتامبر 2004
    نوشته ها:
    388
    تشکر شده:
    17
    شما به اون بلوک main
    کد:
    position: relative;
    رو اضافه کن
    اندازه بلوک هر دو سمت رو هم برای بلوک وسطی margin در نظر بگیر که متن وسط صفحه نره زیر اون دو تا ستون کناری
    اون دو تا بلوک سمت چپ و راست رو هم میتونی بزاری همونطوری absolute باقی بمونن.
    البته میتونی اون دو تا بلوک سمت چپ و راست رو هم به شکل شناور در بیاری و از خصوصیت float استفاده کنی.
     
  6. mohammad ali

    mohammad ali کاربر تازه وارد

    تاریخ عضویت:
    ‏17 دسامبر 2006
    نوشته ها:
    30
    تشکر شده:
    0
    بیشتر از 6 ساعت امروز پاش وقت گذاشتم ، اما نمیشه که نمیشه.
    آخه من html و css رو خیلی خوب بلد نیستم.

    میشه یه نفر لطف کنه و یه لایه به پهنای 800 پیکسل بسازه و 4 تا لایه دیگه توش بزاره ، بطوری که همگی کنار هم باشن و به هم چسبیده باشن؟
    بک گراند و سازش رو خودم میتونم تنظیم کنم.
    ممنون میشم اگه کسی این کارو بکنه.
     
  7. خرید بیت کوین
  8. mohammad ali

    mohammad ali کاربر تازه وارد

    تاریخ عضویت:
    ‏17 دسامبر 2006
    نوشته ها:
    30
    تشکر شده:
    0
    اینجا کسی نیست به من کمک کنه؟ [​IMG]
    من هیچی وقت ندارم [​IMG] کمک [​IMG]
     
  9. amir abbas

    amir abbas Registered User

    تاریخ عضویت:
    ‏28 سپتامبر 2004
    نوشته ها:
    388
    تشکر شده:
    17
    شما تو طراحی بالا که فقط 3 تا بخش در نظر گرفتی
    4 تا یه خورده سخت میشه ولی 3 تا رو حالت میتونی درست کنی

    تو این صفحه کلی مثال برای قالب 3 ستونی هست
    هر کدوم که خوشت اومد میتونی از همون استفاده کنی

    http://css-discuss.incutio.com/?page=ThreeColumnLayouts
     
  10. شايان

    شايان مدیران قدیمی

    تاریخ عضویت:
    ‏2 سپتامبر 2003
    نوشته ها:
    4,806
    تشکر شده:
    9
    آقا یه کاری کن شما ! شما تو photoshop ی ، paint ی چیزی ... اون چیزی که میخوای آخرش در بیاد رو بکش ، بذار اینجا ، من یا هر کس دیگه‌ای که وقت داشته باشه برات html در میاره.
     
  11. alizali

    alizali Registered User

    تاریخ عضویت:
    ‏16 ژوئن 2003
    نوشته ها:
    660
    تشکر شده:
    20
    800 +200+200=1200
    از عرض صفحه خیلی زیادتر میشود
    دلیلش این می تواند باشد
     
  12. mohammad ali

    mohammad ali کاربر تازه وارد

    تاریخ عضویت:
    ‏17 دسامبر 2006
    نوشته ها:
    30
    تشکر شده:
    0
    ممنونم ، یه نگاهی بهش می اندازم ، نتیجه رو میگم.
    [​IMG]
    اون موارد خاکستری رنگ هم اندازه هستن.
    این طرح تعداد دکمه های بیشتری داره ، برای این ساختم که بعدا دیگه مشکلی نداشته باشم و فقط اندازه دیو ها رو تغییر بدم.
    من گفتم اونها توی دیو اصلی هستن ، نه بیرونش.
     
  13. mohammad ali

    mohammad ali کاربر تازه وارد

    تاریخ عضویت:
    ‏17 دسامبر 2006
    نوشته ها:
    30
    تشکر شده:
    0
    مشکل حل شد!
    با تیبل ساختم ، به دیو نمیرسه ، اما بهتر از هیچی هست...
     
  14. ODE112

    ODE112 کاربر قدیمی پرشین تولز

    تاریخ عضویت:
    ‏24 مارس 2006
    نوشته ها:
    1,379
    تشکر شده:
    1,280
    محل سکونت:
    aquarium
    شما باید div هاتو همه رو float:left یا float:right میکردی بد از اینکه اونا رو relative کردی!

    فقط تو این حالت همشون interline میشن!

    امیرم همینو گفت نگرفتی ولی!
     
avanakbron talent عسل طبیعی و گرده گل ایرانی