رفتن به مطلب

پست های پیشنهاد شده

باعرض سلام.

بنده یه div به صورت زیر دارم که هدر سایت می باشد و با کد html زیر:


<div id="header">
<div id="top-menu">Content for id "top-menu" Goes Here</div>
</div>

و با css زیر:


#header {
width: 100%;
height: 100px;
border-bottom: #FFF 2px solid;
background: url(images/header.png);
margin: 0 auto;

}
#top-menu {
width: 950px;
margin: 0 auto;
}

وقتی صفحه بزرگ است div lمن به صورت نرمال کل عرض صفحه رو در بر میگیره و هیچ مشکلی نیست.

post-3445-0-32013000-1398798301_thumb.jp

ولی وقتی browser رو کوچه میکنم div من کامل نمیشود و عرض صفحه رو در بر نمیگیرد. و سمت چپ آن خالی میشود.

post-3445-0-17498400-1398798324_thumb.jp

به اشتراک گذاری این ارسال


لینک به ارسال

سلام

استایل هدر رو به این صورت بنویسید:


#header {
width: 100%;
min-width: 960px;
height: 100px;
border-bottom: #FFF 2px solid;
background: url(images/header.png);
margin: 0 auto;
}

به اشتراک گذاری این ارسال


لینک به ارسال

بسیار سپاس گذار مشکل حل شد.

اگه میشه یه توضیح بدین که چرا این جوری میشد.

و کجا ها باید از این کد استفاده کرد؟


min-width: 960px;

ویرایش شده توسط نـایس تم

به اشتراک گذاری این ارسال


لینک به ارسال

علت بوجود اومدن مشکل:

شما ابتدا در دیو بیرونی گفتی عرض 100 درصد باشه و در دیو درونی گفتی عرض 950 باشه! وقتی عرض کمتر بشه دیو بیرون عرضش متناسب با مرورگر کم میشه اما دیو درونی همچنان عرضش به صورت ثابت همون 950 باقی میمونه و این باعث مشکل میشه. برای رفع این مشکل میشه به دیو بیرونی گفت کمترین عرض 960 باشه که از درونش کوچیکتر نشه.

البته min-width در IE6 و پایینتر پشتیبانی نمیشه :(

این موارد رو هم بررسی کنید:


http://www.w3schools.com/cssref/pr_dim_min-width.asp
http://developer1.ir/CSS/width.aspx
https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

به اشتراک گذاری این ارسال


لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • اضافه کردن...