PDA

View Full Version : سوال: مشکل با style footer


hmdhamed
جمعه 10 آذر 1391, 12:17 عصر
سلام
من توی پیجم یک headre یک menue bar و یک content و یک footer دارم و به نمیخوام از position:static در اونها استفاده کنم

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="direction:rtl;">
<form id="form1" runat="server">
<div class="MainBlock" id="mainblock" runat="server" style="position:relative; width:840px; min-height:800px; top:0px; margin:0 auto; background-color:blue;">
<div class="HeaderBlock" style="position:absolute; width:810px; height:180px; top:10px; right:10px; background-color:Menu;"></div>
<div class="SideMenueBlock" style="position:absolute; width:200px; min-height:400px; top:200px; right:10px; background-color:Menu;"></div>
<div class="ContentBlock" id="contentblock" style="position:absolute; width:600px; min-height:400px; top:200px; right:220px; background-color:Menu;">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</div>
<div class="FooterBlaock" style="position:absolute; width:810px; height:180px; bottom:10px; right:10px; background-color:Menu;"></div>
</div>
</form>
</body>
</html>
http://uploadfa.net/uploads/13542667181.png
حالا اگه مثلا قسمت content با توجه به مطلبش ارتفاعش بیشتر بشه footer میاد روش مشکل من اینه که یه جوری height قسمت mainblock (قسمت آبی) که position:relative داره مطابق height قسمت content که posion:absolout داره اضافه بشه
اگه دوستان راهنمایی کنن ممننون میشم
pary_daryayi
جمعه 10 آذر 1391, 13:08 عصر
چرا میخواید حتما از posion:absolout استفاده کنید ؟ برای قالب کلی اگر از این استفاده نکنید خیلی بهتر و راحت تره.
اگر اصرای به استفاده از posion:absolout ندارید میتونم راهنمایی کنم .
hmdhamed
جمعه 10 آذر 1391, 14:00 عصر
چرا میخواید حتما از posion:absolout استفاده کنید ؟ برای قالب کلی اگر از این استفاده نکنید خیلی بهتر و راحت تره.
اگر اصرای به استفاده از posion:absolout ندارید میتونم راهنمایی کنم .

ممنون بدون position:absoulout درست کردم ولی میخواستم کل بلوک ها با mainblock موقعیت داده بشن و اون به وسط پیج باشه الان با static اینجوریه

<body>
<form id="form1" runat="server">
<div class="HeaderBlock" style="position:relative; width:850px; height:180px; top:10px; right:10px; margin:0 auto; background-color:Lime;">header</div>
<div class="MainBlock" style="position:relative; width:830px; min-height:800px; padding:10px; top:10px; right:10px; margin:0 auto; background-color:blue;">
<div class="RightMenue" style=" float:right; width:200px; clear:left; height:800px; background-color:Aqua;">Menue</div>
<div class="ContentBlock" style=" float:left; width:600px; height:800px;background-color:Orange;">Content
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
Content
</div>
</div>
<div style=" clear:both;"></div>
<div class="FooterBlock" style="position:relative; width:850px; height:180px; top:10px; right:10px; margin:0 auto; background-color:Menu;">Footer</div>
</form>
</body>
</html>
http://uploadfa.net/uploads/13542738571.png
اینجوری footer میره پایین سر جای درستش
درست هم کار میکنه ولی اگه اونی که گفتم میشد میخواستم با یک masterpage چند جور بلاک بندی برای صفحه های مختلف درست کنم
کامروا
جمعه 10 آذر 1391, 14:06 عصر
اصلا از Position ها خوب استفاده نکردید و برای اینکار اصلا نیازی به position نیست
به این شکل بنویسید :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="direction:rtl; margin: 0; padding: 0;">
<form id="form1" runat="server">
<div class="MainBlock" id="mainblock" runat="server" style="width:840px; min-height:800px; margin:0 auto;padding: 10px 10px 0 0; background-color:blue;">
<div class="HeaderBlock" style="width:810px; height:180px;background-color:Menu;"></div>
<div class"Container">
<div class="SideMenueBlock" style="width:200px; float: right; min-height:400px;margin-top: 10px; background-color:Menu;"></div>
<div class="ContentBlock" id="contentblock" style="width:600px; float: right; min-height:400px; margin: 10px 10px; background-color:Menu;">
</div>
<div class="FooterBlaock" style="width:810px; clear: both; margin-top: 10px; height:180px; background-color: Menu;"></div>
</div><!--end Container-->
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>-->
</div>
</form>
</body>
</html>
hmdhamed
جمعه 10 آذر 1391, 14:29 عصر
اصلا از Position ها خوب استفاده نکردید و برای اینکار اصلا نیازی به position نیست
به این شکل بنویسید :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="direction:rtl; margin: 0; padding: 0;">
<form id="form1" runat="server">
<div class="MainBlock" id="mainblock" runat="server" style="width:840px; min-height:800px; margin:0 auto;padding: 10px 10px 0 0; background-color:blue;">
<div class="HeaderBlock" style="width:810px; height:180px;background-color:Menu;"></div>
<div class"Container">
<div class="SideMenueBlock" style="width:200px; float: right; min-height:400px;margin-top: 10px; background-color:Menu;"></div>
<div class="ContentBlock" id="contentblock" style="width:600px; float: right; min-height:400px; margin: 10px 10px; background-color:Menu;">
</div>
<div class="FooterBlaock" style="width:810px; clear: both; margin-top: 10px; height:180px; background-color: Menu;"></div>
</div><!--end Container-->
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>-->
</div>
</form>
</body>
</html>


ممنون کامروا جان راه حل شما خیلی شسته رفته تر و درست تر از کدهای منه واقعا ممنون
pary_daryayi
جمعه 10 آذر 1391, 14:33 عصر
positation ها رو حذف کنید.
overflow:hidden به class="MainBlock" اضافه کنید.
در class="ContentBlock" از min-hieght‌استفاده کنید.
در مورد overflow:hidden سرچ کنید .
hmdhamed
جمعه 10 آذر 1391, 14:40 عصر
ممنون پری جان. ولی خب position که حذف بشه همون static در نظر گرفته میشه و تقریبا مثل راه حل دوم خودم و کامروا میشه البته کدهای من یکم ایراد داشت. باز هم ممنون من روشم ایراد داشت. باز هم ممنون از شما و کامروای عزیز که زحمت کشیدید راهنمایی کردید.