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

mohsenshahbazi

mohsenshahbazi

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

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

ممنون
 
tabib_m

tabib_m

Member
خدا خیرش بده هر کی این رو به من هم بگه
تا جایی که میدونم امکان استاندارد و درست و حسابی ای برای این کار نیست!
چون عبارت "پایین" برای یک صفحه ی اچ تی ام ال مفهوم واضحی نداره!!!
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
دوست عزیز
سابقا در باره استفاده از 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>
 
آخرین ویرایش:
echessdesign

echessdesign

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

mohsenshahbazi

Active Member
خوب من کد ها رو نوشته بودم و امکان استفاده از راه حل شما رو نداشتم اما سعی میکنم تو کار بعدی راهنمایی شما رو استفاده کنم

ممنون
 
tabib_m

tabib_m

Member
پس من منظور شما رو اشتباه متوجه شدم
چون اون چیزی که من میخواستم این نیست

الان در صورتی که صفحه رو ریسایز کنیم ، اون دیو پایین جابه جا نمیشه و سر جاش میمونه و در نهایت سکرول!
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا