سلام دوستان
من هر وقت سایتی طراحی میکنم اول طبق اصول میبنی ارتفاع دایو میره پایین دایو پایین هم میره پایین
ولی یکم که زیاد میشه هیمشه قاطی میشه
از دوستان میخوام کدم رو بررسی کنن اگر شد.
* { margin: 0; padding: 0; } body { background-image: url('../img/bg.jpg'); } .head { height: 85px; width: 100%; background-color: #FFFFFF; } .head-main { height: 50px; padding-top: 20px; width: 1000px; margin: auto; direction: rtl; text-align: right; } .menu { height: 50px; width: 100%; background-color: #e9e9e9; color: #000000; } .main-aaa { width: 1000px; height: auto; margin: auto; } .main { width: 1000px; margin: auto; padding-top: 20px; overflow: visible; } .main-r { width: 390px; float: right; direction: rtl; text-align: right; } .main-l { width: 600px; float: left; border: 1px solid #e1e1e1; background-color: #FFFFFF; direction: rtl; } .footer { height: 300px; width: 100%; background-color: #4a525d; } .footer-main { width: 1000px; height: 250px; margin: auto; }
این سی اس اس
حالا اچ تی ام ال
<div class="main-aaa"> <div class="main"> <div class="main-r"> <div style="width: 390px; height: 46px; background-color: #e9e9e9; direction: rtl; text-align: right; font-family: 'B Yekan'; font-size: 16px; border: 1px solid #e0e0e0;"> <div style="padding: 8px; direction: rtl; text-align: right; color: #40454d">جستجو</div> </div> <div style="height: 74px; background-color: #ffffff; border: 1px solid #e0e0e0; width: 390px"> <div style="margin-right: 20px; margin-top: 15px; width: 345px; height: 49px;"> <table> <tr> <td style="width: 282px; height: 40px; border: 1px solid #dbdbdb;"> <asp:TextBox ID="TextBox1" runat="server" BorderStyle="None" Height="40px" Width="282px" onfocus="this.value=''" onblur="if(this.value=='')this.value='جستجو'" Text="جستجو" Font-Names="Tahoma" Font-Size="12px" ForeColor="#999999">جستجو</asp:TextBox> </td> <td style="width: 58px; height: 40px; border: 1px solid #dbdbdb; text-align: center; vertical-align: central; background-color: #e9e9e9;"> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/img/search-icon-hi.png" Width="20px" OnClick="ImageButton1_Click" /> </td> </tr> </table> </div> </div> <div style="width: 390px; height: 46px; background-color: #e9e9e9; direction: rtl; text-align: right; font-family: 'B Yekan'; font-size: 16px; border: 1px solid #e0e0e0;"> <div style="padding: 8px; direction: rtl; text-align: right; color: #40454d">ورود کاربران<asp:Label ID="Label2" runat="server"></asp:Label> </div> </div> <div style="height: 290px; background-color: #ffffff; border: 1px solid #e0e0e0; width: 390px"> <div style="margin-right: 20px; margin-top: 15px; width: 340px; height: 49px;"> <table> <tr> <td style="width: 340px; height: 40px; border: 1px solid #dbdbdb;"> <asp:TextBox ID="TextBox2" runat="server" BorderStyle="None" Height="40px" Width="340px" onfocus="this.value=''" onblur="if(this.value=='')this.value='ایمیل'" Text="ایمیل" Font-Names="Tahoma" Font-Size="12px" ForeColor="#999999">ایمیل</asp:TextBox> </td> </tr> </table> <table> <tr> <td style="width: 340px; height: 40px; border: 1px solid #dbdbdb;"> <asp:TextBox ID="TextBox3" runat="server" BorderStyle="None" Height="40px" Width="340px" onfocus="this.value=''" onblur="if(this.value=='')this.value='کلمه عبور'" Text="کلمه عبور" Font-Names="Tahoma" Font-Size="12px" ForeColor="#999999" TextMode="Password"></asp:TextBox> </td> </tr> </table> <table> <tr> <td style="width: 340px; height: 40px;"> <asp:Button ID="Button1" runat="server" BackColor="#4A525D" BorderColor="#4A525D" BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" Font-Names="Tahoma" ForeColor="White" Height="45px" Text="ورود" Width="100px" OnClick="Button1_Click" /> <asp:Label ID="Label1" runat="server" ForeColor="#CC0000"></asp:Label> </td> </tr> </table> <table> <tr> <td style="width: 340px; height: 40px;"> <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="True" Font-Names="Tahoma" Font-Size="12px" Font-Underline="False" ForeColor="#666666" NavigateUrl="~/forget.aspx">رمز عبور خود را فراموش کرده اید؟</asp:HyperLink> </td> </tr> </table> <br /> <table> <tr> <td style="width: 340px; height: 40px;"> <asp:Button ID="Button2" runat="server" BackColor="#4A525D" BorderColor="#4A525D" BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" Font-Names="Tahoma" ForeColor="White" Height="45px" Text="ساخت اکانت جدید" Width="150px" OnClick="Button2_Click" /> </td> </tr> </table> </div> </div> <div style="width: 390px; height: 46px; background-color: #e9e9e9; direction: rtl; text-align: right; font-family: 'B Yekan'; font-size: 16px; border: 1px solid #e0e0e0;"> <div style="padding: 8px; direction: rtl; text-align: right; color: #40454d">دانلود رایگان</div> </div> <div style="height: 360px; background-color: #ffffff; border: 1px solid #e0e0e0; width: 390px"> <div style="margin-right: 20px; margin-top: 15px; width: 345px; height: 260px; text-align: center"> <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/ads/InstaDownload.jpg" /> </div> <div style="margin-right: 20px; margin-top: 15px; width: 345px; height: 49px; text-align: center"> <asp:Button ID="Button3" runat="server" BackColor="#4A525D" BorderColor="#4A525D" BorderStyle="Solid" BorderWidth="1px" Font-Bold="True" Font-Names="Tahoma" ForeColor="White" Height="45px" Text="دانلود" Width="120px" /> </div> </div> </div> <div class="main-l"> <br /> <div style="width: 580px; height: 460px; padding-right: 20px;"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div> </div> </div> <div style="clear: both"></div> <div class="footer"> <div class="footer-main"> </div> </div>
حالا ولی دیگه کار نمیکنه از قالب میزنه بیرون!
من متوجه مشکلتون نشدم ، میشه بیشتر تر توضیح بدید ؟!
جناب آقای باقر زاده
مشکل من اینه
دایو که بزرگ میشه از فوتر میزنه بیرون یعنی فوتر میمونه ولی اون بدنه از اون میره بیرون میخوام طوری باشه با بزرگ شدن ارتفاع بدنه فوتر هم پایین تر بره نه اینکه از فوتر رد بشه ....
من همیشه اول طوری طراحی میکنم میبنم اره درست کار میکنه یکم که زیادی توش مثلا از گرید و...میندازم
میبینم خراب میشه و الان بازم از فوتر میزنه بیرون ...این برام مشکل شده!
بجای استفاده از height در style دیو های اصلی از min-height استفاده کنید :
<div style="width: 580px; min-height: 460px; padding-right: 20px;"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div>
min-height: 460px;
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)