مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

Ahmad

عضویت از 1392/03/16

مشکل همیشگی من در div

  • یکشنبه 4 مرداد 1394
  • 20:02
تشکر میکنم

سلام دوستان

من هر وقت سایتی طراحی میکنم اول طبق اصول میبنی ارتفاع دایو میره پایین دایو پایین هم میره پایین

ولی یکم که زیاد میشه هیمشه قاطی میشه

از دوستان میخوام کدم رو بررسی کنن اگر شد.

* {
    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>

 

 

حالا ولی دیگه کار نمیکنه از قالب میزنه بیرون!

پاسخ های این پرسش

تعداد پاسخ ها : 4 پاسخ
کاربر سایت

مسعود شریفی پور

عضویت از 1392/03/31

  • یکشنبه 4 مرداد 1394
  • 20:37
پیشنهاد میکنم با افزونه فایرباگ موزیلا چک کنید ! سریع تر به نتیجه میرسید
کاربر سایت

سجاد باقرزاده

عضویت از 1392/02/24

  • دوشنبه 5 مرداد 1394
  • 07:06

من متوجه مشکلتون نشدم ، میشه بیشتر تر توضیح بدید ؟!

کاربر سایت

Ahmad

عضویت از 1392/03/16

  • دوشنبه 5 مرداد 1394
  • 13:17

جناب آقای باقر زاده

مشکل من اینه

دایو که بزرگ میشه از فوتر میزنه بیرون یعنی فوتر میمونه ولی اون بدنه از اون میره بیرون میخوام طوری باشه با بزرگ شدن ارتفاع بدنه فوتر هم پایین تر بره نه اینکه از فوتر رد بشه ....

من همیشه اول طوری طراحی میکنم میبنم اره درست کار میکنه یکم که زیادی توش مثلا از گرید و...میندازم

میبینم خراب میشه  و الان بازم از فوتر میزنه بیرون ...این برام مشکل شده!

کاربر سایت

سجاد باقرزاده

عضویت از 1392/02/24

  • دوشنبه 5 مرداد 1394
  • 13:59

بجای استفاده از 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;

 

کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)