• تراز قالب با div
    #1
    Note 
    سلام
    من یه قالب ساده طراحی کردم و لی تو تراز کردن قسمت main,sidebarبا سایر قسمت ها مشکل داشتم میخواستم ببینم که چه جوری میتونم همه رو با هم تراز کنم؟

    [HTML]
    <style type="text/css">

    body
    {
    background-color:#999;
    }

    #header
    {
    width:900px;
    height:120px;
    background-color:#900;
    margin:0 auto;

    }

    #navigation
    {

    width:900px;
    height:150px;
    background-color:#69F;
    margin:0 auto;
    }

    #maincontent
    {
    width:500px;
    height:250px;
    background-color:#FC0;
    float:left;
    margin-left:0 auto;
    }

    #sidebar
    {
    width:400px;
    height:250px;
    background-color:#FCC;
    float:left;
    margin-right:0 auto;
    }

    #footer
    {
    background-color:#FFF;
    width:900px;
    height:150px;
    margin:0 auto;
    }

    .clear
    {
    clear:both;
    }

    </style>


    </head>

    <body>


    <div id="header">header</div>
    <div id="navigation">navigation</div>
    <div id="maincontent">maincontent</div>
    <div id="sidebar">sidebar</div>
    <div class="clear"></div>
    <div id="footer">footer</div>
    [/HTML]

    آخرین ویرایش: 17-08-2014 ساعت 19:53، توسط Daniel
    پاسخ
    #2
    Note 
    برای اینکه این دو تا div رو تراز کنید میتونید یه div مادر برای این دو تا تعریف کنید
    البته float بلاک sidebar رو باید right میکردید.

    [HTML]
    <style type="text/css">

    body
    {
    background-color:#999;
    }

    #header
    {
    width:900px;
    height:120px;
    background-color:#900;
    margin:0 auto;

    }

    #navigation
    {

    width:900px;
    height:150px;
    background-color:#69F;
    margin:0 auto;
    }

    div#content {
    margin: 0 auto;
    width: 900px;
    }

    #maincontent
    {
    width:500px;
    height:250px;
    background-color:#FC0;
    float:left;
    }

    #sidebar
    {
    width:400px;
    height:250px;
    background-color:#FCC;
    float:left;
    }

    #footer
    {
    background-color:#FFF;
    width:900px;
    height:150px;
    margin:0 auto;
    }

    .clear
    {
    clear:both;
    }

    </style>


    </head>

    <body>

    <div id="header">header</div>

    <div id="navigation">navigation</div>

    <div id="content">
    <div id="maincontent">maincontent</div>
    <div id="sidebar">sidebar</div>
    </div>

    <div class="clear"></div>
    <div id="footer">footer</div>
    [/HTML]

    پاسخ
    #3
    Note 
    درود برشما خیلی سپاس گذارم
    شرمنده مشکل این کد کجاست که صفت های cssروی دستورات(footer.copyright)htmlاجرا نمیشه؟

    <style type="text/css">

    body
    {
    background-color:#69C;
    direction:ltr;
    }

    #header
    {
    background-color:#6F9;
    width:1170px;
    height:120px;
    margin:0 auto;
    }

    #navigation
    {
    background-color:#63C;
    width:1170px;
    height:150px;
    margin:0 auto;
    }

    #maincontent
    {
    margin:0 auto;
    width:1170px;
    }


    #sidebarleft
    {

    background-color:#FFF;
    width:292px;
    height:250px;
    float:left;
    }
    #maincontent1
    {
    background-color:#C99;
    width:585px;
    height:250px;
    float:left;
    }


    #sidebarright
    {

    background-color:#FFF;
    width:292px;
    height:250px;
    float:right;
    }

    #footer
    {
    background-color:#FFF;
    width:1170px;
    height:200px;
    margin:0 auto;
    }

    #copyright
    {
    background-color:#999;
    width:1170px;
    height:250px;
    margin:0 auto;
    }


    </style>
    </head>

    <body>


    <div id="header">header</div>
    <div id="navigation">navigation</div>
    <div id="maincontent">


    <div id="sidebarleft">sidebarleft</div>
    <div id="maincontent1">maincontent</div>

    <div id="sidebarright">sidebarright</div>

    </div>


    <div id="footer">footer</div>

    <div id="copyright">copy</div>

    پاسخ
    #4
    Note 
    اگر دوباره کد ها رو به این صورت قرار بدید اخطار دریافت میکنید
    کافیه نوع کد رو از ویرایشگر انتخاب کنید:

    [تصویر:  20140701-924-place_php_code.gif]

    مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
    پاسخ
    #5
    Note 
    [CSS]
    clear: both;
    [/CSS]
    رو به استایل فوتر اضافه کنید

    مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
    پاسخ
    #6
    Note 
    بی نهایت سپاس گذارم کمک خیلی بزرگی بهم کردین:khodeshe:

    پاسخ
    #7
    Note 
    چطور میتونم برای <body> گردینت بذارم(مشکل کار من اینجاست که گردینت من بصورت تک رنگ به زمینم اعمال میشه)؟

    پاسخ
    #8
    Note 
    سلام
    قوانین رو مطالعه کنید
    برای این سوال باید تاپیک جداگانه ایجاد کنید.

    مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان