قرار گرفتن Div در انتها !

شروع موضوع توسط mohsenshahbazi ‏1 اکتبر 2006 در انجمن زبان HTML

  1. mohsenshahbazi

    mohsenshahbazi Active Member

    ارسال‌ها:
    1,368
    تشکر شده:
    65
    امتیاز دستاورد:
    36
    سلام !
    ما یه صفحه داریم که دارای 4 تا DIV هست !
    1 DIV که هدر .
    DIV 2-3 که متن اصلی هستن - DIV2 با Float راست و DIV 3 با Float چپ !
    DIV 4 که فوتر است !
    متن هایی که داخل دو DIV شماره های 2-3 هستند ارتفاعشون برابر نیست . و الان با این ترتیب DIV 4 میاد زیر DIV هاس 2-3 ..یعنی به عنوان فوتر نمیره در پایین ترین سطح . میاد زیر DIV که ارتفاعش کمتره .

    چه جوری میشه اینو فرستاد اون ته ! :d

    ممنون
     
    نوشته شده توسط mohsenshahbazi در ‏1 اکتبر 2006
  2. tabib_m

    tabib_m Member

    ارسال‌ها:
    689
    تشکر شده:
    268
    امتیاز دستاورد:
    16
    خدا خیرش بده هر کی این رو به من هم بگه
    تا جایی که میدونم امکان استاندارد و درست و حسابی ای برای این کار نیست!
    چون عبارت "پایین" برای یک صفحه ی اچ تی ام ال مفهوم واضحی نداره!!!
     
    نوشته شده توسط tabib_m در ‏1 اکتبر 2006
  3. amir_s

    amir_s Active Member

    ارسال‌ها:
    3,684
    تشکر شده:
    403
    امتیاز دستاورد:
    36
    فکر می کنم باید به Div شماره 4 این Style رو بدید :
    Clear:Both
     
    نوشته شده توسط amir_s در ‏1 اکتبر 2006
    mohsenshahbazi از این پست تشکر کرده است.
  4. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    دوست عزیز
    سابقا در باره استفاده از wrapper , Content , container ,... غیره صحبت می کردند.
    بهتر اینست که شما تمام DIV صفحات خود را داخل یک wrp یا wrapper قرار بدین.
    سپس header خود را داخل wrp قرار بدین.
    حالا نوبت DIV 3،4 هست. خوب در ابتدا یک div تعریف می کنیم به نام container
    بعد DIV 3 ,4 رو داخل اون قرار میدیم.
    در انتها یه فشاری به خودمون میاریم و DIV فوتر رو تعریف می کنیم. خسته نباشید، هم اکنون اورست رو فتح کردید!!!
    من سورس صفحه رو قرار میدم، چون عجله ای با ناتپد نوشتم زیاد مرتب نیست. من ساده ترین راه رو گفتم. ین آموزش می تونه از طریق margin منفی هم باشه.
    در تمام مرورگر ها بی نقص نشون میده:
    HTML:
      <html>
    <head>
    <style type="text/css">
    body {text-align:center}
    #wrp, #header, #container, #footer {width:700px; padding:0; border:0; margin:0 auto;}
    #header {background:red; height:100px;}
    #container {float:left}
    #leftBox, #rightBox {float:left; padding:0; margin:0; border:0; background:blue; width:200px; height:350px;}
    #rightBox {float:right; background:yellow;}
    #footer {float:left; background: green; height:100px;}
    </style>
    </head>
    <body>
    <div id="wrp">
        <div id="header">www.echessdesign.com</div>
              <div id="container">
                    <div id="leftBox">www.echessdesign.com</div>
                    <div id="rightBox">www.echessdesign.com</div>
              </div>
        <div id="footer">www.echessdesign.com</div>
    </div>
    </body>
    </html>  
     
    آخرین ویرایش: ‏2 اکتبر 2006
    نوشته شده توسط echessdesign در ‏2 اکتبر 2006
    baviran از این پست تشکر کرده است.
  5. mohsenshahbazi

    mohsenshahbazi Active Member

    ارسال‌ها:
    1,368
    تشکر شده:
    65
    امتیاز دستاورد:
    36
    البته استفاده از Clear:both مشکل رو حل کرد !
     
    نوشته شده توسط mohsenshahbazi در ‏2 اکتبر 2006
  6. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    دوست عزیز
    من روش اصولی بکار گیری Css رو توضیح دادم. در این روش در رزولیشن های مختلف، تنظیم ساختار صفحه بسیار راحت می باشد و شما کار رو صحیح و استاندارد پیش می برید.
    موفق باشید.
     
    نوشته شده توسط echessdesign در ‏2 اکتبر 2006
    mohsenshahbazi از این پست تشکر کرده است.
  7. mohsenshahbazi

    mohsenshahbazi Active Member

    ارسال‌ها:
    1,368
    تشکر شده:
    65
    امتیاز دستاورد:
    36
    خوب من کد ها رو نوشته بودم و امکان استفاده از راه حل شما رو نداشتم اما سعی میکنم تو کار بعدی راهنمایی شما رو استفاده کنم

    ممنون
     
    نوشته شده توسط mohsenshahbazi در ‏2 اکتبر 2006
  8. tabib_m

    tabib_m Member

    ارسال‌ها:
    689
    تشکر شده:
    268
    امتیاز دستاورد:
    16
    پس من منظور شما رو اشتباه متوجه شدم
    چون اون چیزی که من میخواستم این نیست

    الان در صورتی که صفحه رو ریسایز کنیم ، اون دیو پایین جابه جا نمیشه و سر جاش میمونه و در نهایت سکرول!
     
    نوشته شده توسط tabib_m در ‏2 اکتبر 2006

به اشتراک بگذارید