مرجع تخصصی برنامه نویسان

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

مشکل در طراحی صفحه وب

دوشنبه, 31 تیر 1398 10:19

مشکل در طراحی صفحه وب

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

 <div class="container wrapper">
        <header>
            <div class="row">
                <div class="col-8 bg-dark">1</div>
                <div class="col-4 bg-info">2</div>
            </div>
        </header>
        <main class="">@RenderBody()</main>
        <footer class="">
            11111
        </footer>
    </div>
	html {
    box-sizing: border-box;
}

html *,
html *::after,
html *::before {
    box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    min-height: 100%;
    font-family: 'BYekan';
}

ul {
    list-style: none;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    height: 100px;
    background-color: cornsilk;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

footer {
    background-color: #D7E4E4;
    text-align: center;
    color: #284040;
    height: 50px;
}

اما در header وقتی divهارا قرار میدهم از اندازه header بیشتر است وداخل ان قرار نمیگیرد

دوشنبه, 31 تیر 1398 12:06
<main class="row">@RenderBody()</main>

کسانی که از این پست تشکر کرده اند : iran,
دوشنبه, 31 تیر 1398 12:31

سلام

متاسفانه درست نشد

دوشنبه, 31 تیر 1398 14:15

سلام، دقیقا متوجه منظورتون نشدم ولی اگرمیخواهید که اندازه بکگراند با قرار گرفتن محتوا تغییر کند، نباید header ارتفاع مشخصی داشته باشد

و شما در استایل برای header ارتفاع 100px در نظر گرفتید.

دوشنبه, 31 تیر 1398 14:22

سلام

به عکس دقت کنید می بینید div های 1و2 طولشان بیشتر از ولدشان شده است

برای حل این مشکل باید چکار کنم

دوشنبه, 31 تیر 1398 14:39

متوجه شدم، این مشکل به دلیل وجود کلاس row بعد از تگ header هست به دو صورت میتونید مشکل رو حل کنید


<div class="container wrapper">
            <div class="row">
                  <div class="col-md-12">
                        <header>
                              <div class="col-8 bg-dark">1</div>
                              <div class="col-8 bg-dark">2</div>
                        </header>
                  </div>
            </div>
      </div>

---------------------------------------------------------

<div class="container wrapper">
            <div class="row">
                  <header>
                        <div class="col-8 bg-dark">1</div>
                        <div class="col-8 bg-dark">2</div>
                  </header>
            </div>
      </div>

موفق باشید.

کسانی که از این پست تشکر کرده اند : iran,
دوشنبه, 31 تیر 1398 15:30

سلام

متاسفانه مشکل حل نشد

ﺳﻪ شنبه, 01 مرداد 1398 10:30

دوست عزیز متاسفانه به کد کامل قالب شما دسترسی نداریم. و نمیدونیم دقیقا چی بکار بردی

ممکنه همون RenderBody یه تگی تزریق میکنه که نیاز به یه کلاس داره.

سعی کن خودت با آزمون خطا حل کنی

نتونستی با anydesk حل کنیم

کسانی که از این پست تشکر کرده اند : iran,
ﺳﻪ شنبه, 01 مرداد 1398 11:22
ﺳﻪ شنبه, 01 مرداد 1398 11:53

سلام، اگر مشکل بیرون زدگی دوتا div  داخل row هست، این به خاطر خاصیت margin کلاس row هستش اگر از bootstrap4 استفاده میکنید ،کلاس m-0 میتونه مشکل رو برطرف کنه

 <div class="row m-0">
    <div class="col-2 bg-info">1</div>
    <div class="col-3 bg-dark">2</div>
</div>

کسانی که از این پست تشکر کرده اند : iran,
ﺳﻪ شنبه, 01 مرداد 1398 12:28
کسانی که از این پست تشکر کرده اند : iran,

ارسال پاسخ برای این تاپیک

ارسال پاسخ مخصوص اعضا سایت می باشد ! میتوانید با حساب کاربری خود وارد سایت شده یا ثبت نام کنید