مشکل بیرون زدن div از div مادر

sitsaz

تازه وارد
با سلام

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

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

من همینطور در فایل فشرده ای که قرار دادم ، قالبی رو که دارم اونو دوباره طراحی میکنم رو هم قرار دادم (tack-v... )

لینک فایل :



این تصویر رو ببینید :



مشکلات مربوط به اینترنت اکسپلورر رو میتونم درست کنم ولی نمیدونم چرا این تو فایر فاکس و کورم اینطوری هست ؟

 
آخرین ویرایش توسط مدیر:

HamedR

کاربر عضو
داداش تو داشتی تازه شروع میکردی با یه قالب ساده تر که با html و css کار شده شروع میکردی دیگه :D

معمولا برای جابجایی از margin و padding استفاده میکنن.

در ضمن برای تغییر اندازه از width و height استفاده کنین

 

sitsaz

تازه وارد
خب قالب ساده هست ولی با فرمت php متاسفانه ذخیره کردم همون html خودمونه

در ضمن نمیخوام ارتفاع مقدار ثابتی باشه

این تصویر رو ببینید :



البته تا این حد ها هم صفر نیستم ولی از این یکی سر در نمی یارم ؟

مشکلات مربوط به اینترنت اکسپلورر رو میتونم درست کنم ولی نمیدونم چرا این تو فایر فاکس و کورم اینطوری هست ؟

 
آخرین ویرایش توسط مدیر:

HamedR

کاربر عضو
از float برای کنار هم چیدن ستون ها استفاده کنید.

من کد رو دیدم . بهم ریختست

این کد یه نمونه ساده از اون چیزی هست که میخوای.


کد:
<style>

.main {border:2px solid #000;}
#right-box{
    float:right;
    border:1px dashed #09F;
    margin:15px;
    padding:5px;
}
#center-box{
    float:right;
    border:1px dashed #0C0;
    margin:15px;
    padding:5px;
}
#left-box{
    float:right;
    border:1px dashed #F00;
    margin:15px;
    padding:5px;
}
</style>

<div class="main">
    <div id="right-box">
        <p>your Massage<p>
    </div>

    <div id="center-box">
        <p>your Massage<p>
    </div>

    <div id="left-box">
        <p>your Massage<p>
    </div>
</div>
حول حولکی نوشتم دیگه خیلی ساده شد. ولی دقیقا همون چیزیه که میخواستی.

یادت باشه همیشه سعی کن کد ها رو خوانا و تمیز بنویسی.

 

sitsaz

تازه وارد
فکر کنم من زیاد از div های تو در تو استفاده کردم ، مثلا شما اومدین توی همین کدتون که دادین برای منوی سمت راست با پدینگ از راست برای اینکه نوشته ها به کادر بغل نچسبه استفاده کردین ولی من اومدم برای مین 2 تا کادر چپ و راست تعیین کردم و به اونها عرض دادم تا از بغل فاصله بگیرن ، بعد اومدم یه دیو مین دیگه توی مین تعریف کردم و توی اون 2 دیو برای مطالب (قسمت بالا ) و قسمت پایین تعیین کردم و قسمت بالا رو هم توش 3 دیو دیگه تعریف کردم وبعد توی دیو سمت راستی اومدم منو رو تعریف کردم ،

کلا ظاهرا کارم رو خیلی پیچیده کردم و باید دوباره کد نویسی کنم و از شما خیلی ممنونم هرچند که به ظاهر همه چی خوب بود و همه چی مرتب بود و فقط طول به طور خودکار تنظیم نمیشد

طرح کلی که من کار کردم این شکل زیر هست :



 
آخرین ویرایش توسط مدیر:

HamedR

کاربر عضو
فکر کنم من زیاد از div های تو در تو استفاده کردم ، مثلا شما اومدین توی همین کدتون که دادین برای منوی سمت راست با پدینگ از راست برای اینکه نوشته ها به کادر بغل نچسبه استفاده کردین ولی من اومدم برای مین 2 تا کادر چپ و راست تعیین کردم و به اونها عرض دادم تا از بغل فاصله بگیرن ، بعد اومدم یه دیو مین دیگه توی مین تعریف کردم و توی اون 2 دیو برای مطالب (قسمت بالا ) و قسمت پایین تعیین کردم و قسمت بالا رو هم توش 3 دیو دیگه تعریف کردم وبعد توی دیو سمت راستی اومدم منو رو تعریف کردم ، کلا ظاهرا کارم رو خیلی پیچیده کردم و باید دوباره کد نویسی کنم و از شما خیلی ممنونم هرچند که به ظاهر همه چی خوب بود و همه چی مرتب بود و فقط طول به طور خودکار تنظیم نمیشد
بله عزیز

شما بیشتر تگ هایی که باز کردین رو نبستین. از تگهای تودرتو هم خیلی استفاده کردین .و شلوغ شد.

فقط یه چیز دیگه : برای اینکه کادر ها به هم نچسبه از margin استفاده کردم.

شما هم کلا با اگه عکس بالا ، وسط ، پایین دارین میتونین اینطوری بنویسین :


کد:
<div class="top"></div>
<div class="center">
همون کدی رو که بالا نوشتم
</div>
<div class="bottom"></div>
بعدش بیان به div های بالا و پایین بکگراند بدین.

 
بالا