PDA

View Full Version : سوال: مشکل در استفاده از div در MasterPage



hamed009
شنبه 11 آبان 1392, 16:07 عصر
دوستان عزیز لطفا راهنماییم کنین

من مسترپیج رو با سه تا div اصلی header,content,footer تنظیم کردم اما نمیدونم چرا وقتی صفحات دیگه از این مستر پیج استفاده می کنن Div footer میوفته روی div content??

ضمنا footer حتما باید پائین صفحه باشه.
div footer به جای اینکه دقیقا زیر content قرار بگیره بدون توجه به ارتفاع content اما میوفته روی اون.


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


<body>
<div id="wrapper">
<div id="header">
<div id='cssmenu'>
<ul>
<li><a href='Home.aspx'><span>Home</span></a></li>
<li><a href='Product.aspx'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='ContactUs.aspx'><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="content">
<form id="form1" runat="server">
<div >
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</div>
<div id="footer">
© Copyright 2013 All Rights Reserved</div>
</div>
</body>






html, body
{
background-image: url('images/mainbg.jpg');
background-repeat: repeat-x;
background-color: #e6e6e6;
margin: 0;
padding: 0;
height:100%;
}

#wrapper
{
margin: 0 auto;
text-align: center;
min-height: 100%;
position: relative;
}
#header
{
margin: 0 auto;
text-align: center;
width: 970px;
}
#content
{
padding: 7px;
padding-bottom: 29px; /* Height of the footer element */
}

#footer
{
margin: 0 auto;
text-align: center;
font-size: 11px;
color: #afafaf;
width: 970px;
height: 29px;
position: absolute;
bottom: 0;
background: url(menu_source/images/nav-bg.png) repeat-x 0px 0px;
padding-top: 10px;
border: solid 1px #bababa;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
left:50%;
margin-left:-485px;
}

Omid Jackson
شنبه 11 آبان 1392, 17:36 عصر
احتمال قوی بخاطر position: absolute هست که به footer دادین
البته مطمئن نیستم باید تست شه

Omid Jackson
شنبه 11 آبان 1392, 18:00 عصر
الآن تقریبا مطمئن شدم
کد هاتون توش ظرافت و تمیزی نداره، طراحی سایت یا کلا طراحی باید ظرافت و تمیزی توش بکار ببرین
الآن که دقت میکنم میبینم خیلی چیزا الکی تعریف شده
به طور مثال:

left:50%;
margin-left:-485px;

دلیل اینکه با

margin: 0 auto;
وسط نمیاد بخاطر استفاده از

position: absolute;
هستش چون میخواستین فوتر رو بچسبونین انتهای صفحه

bottom: 0;
خب شما با اینکاری که کردین وقتی محتوای content زیاد بشه فوتر میفته زیر content و نمایش داده نمیشه

به نظر من روی استایل دهی تجدید نظر شه

hamed009
شنبه 11 آبان 1392, 18:14 عصر
امید جان ممنون از توجهت
با حذف کردن

left:50%;
margin-left:-485px;
position: absolute;

کماکان footer وسط موند اما مشکل overlap برطرف نشده
چیزی به ذهنتون نمیرسه؟؟؟

Omid Jackson
شنبه 11 آبان 1392, 18:33 عصر
شما میخواین فوتر همیشه بچسبه به آخر صفحه دیگه درسته؟
همون کاری که کردین بمونه فقط به footer باید margin-bottom: -40px اضافه بشه
ببخشید الآن موقعیتم طوری نیست که بخوام بشینم خط به خط کد رو نگاه کنم بگم چیا رو جایگزین کنین

hamed009
یک شنبه 12 آبان 1392, 11:56 صبح
درسته می خوام فوتر همیشه بچسبه به کف مرورگر
margin-bottom: -40px اضافه کردم اما نشد
متاسفانه تو مرحله ای از پروژه هستم که امکان استایل دهی مجدد وجود نداره و باید همینو ویرایش کنم

Omid Jackson
یک شنبه 12 آبان 1392, 21:45 عصر
دیگه مشکل overlap باید با margin-bottom حل بشه!؟!؟
کارایی که کردین بمونه روشا! یعنی همون چیزایی که گفتم حذف بشه دیگه حذف نکنین از همونا استفاده کنین فقط این تیکه کد رو اضافه کنین