Rohani

مشکل با عرض div ها

4 پست در این موضوع قرار دارد

باعرض سلام.

بنده یه 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

0

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


لینک به پست

سلام

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


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

3

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


لینک به پست

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

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

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


min-width: 960px;

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

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


لینک به پست

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

شما ابتدا در دیو بیرونی گفتی عرض 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

2

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

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


ورود به حساب کاربری