مشکل مکانبندی سایدبار سمت چپ

**hsdnhd** · چهارشنبه 07 آبان 1393, 22:10 عصر

باسلام
دراین قالب به مشکلای برخوردم که سایدربارسمت چپ پایینترازبقیه مکان ها قرار می گیره بااینکه فضا وجود داره و میتونه بیاد بالاتر خیلی اوقات با این مشکل برخورد میکنم به نظرشما چیکارباید بکنم؟تکنیک یا راه حل خاصی هست که بهش راه حل این مشکل راپیدا کرد چون توی موارد مختلفی به این مشکل بر میخورم.فایل های Index و Style رو هم قرار دادم.لطفا درصورتی که راه حلی برای پیدا کردن این مشکل وجود داره عنوان کنید چون زیاد به این مشکل میخورم.درضمن درمورد کدنویسی به نظرتون مشکلاتم کجاست؟کدوم قسمت ها استانداردنیستند.
ممنون

کد HTML:

<!DOCTYPE html>
<html>
<head>
    <title>name-blog | description-blog</title>
    <meta name="generator" content="Hsdn"/>
    <meta http-equive="ContentType" content="text/html;charset=utf-8">
    <meta http-equive="content-Language" content="fa">
    <meta name="description" content="description-blog">
    <meta name="keyword" content="keyword-blog ,hsdn">
    <link rel="alternate" type="application/rss+xml" title="blog-name" href="linkrss-blog>" />
    <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
    <div id="wrapper"> 
        <div id="header">
            <a href="blog-url"><img  id="header" src="images/Bg-header.gif"/></a>
        </div>
        <div id="nav">
            <div id="ads"><a href="#"><img src="images/ads-us.gif"/></a></div>
        </div>
        <div id="sidebar-right">
            <div class="subject">
                <div class="space-subject"></div>
                <div class="subject-header"><p>موضوعات</p></div>
                <div class="Subject-content">
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                </div>
            </div>
            <div class="subject">
                <div class="space-subject"></div>
                <div class="subject-header"><p>تست </p></div>
                <div class="Subject-content">
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                </div>
            </div>
            <div class="subject">
                <div class="space-subject"></div>
                <div class="subject-header"><p>موضوعات</p></div>
                <div class="Subject-content">
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                    <div class="subject-content-link"><a href="#" >تست</a></div>
                </div>
            </div>
        </div>
        <div id="center">
            <div class="center-header">
                <div class="post-title"><a href="post-title">تست عنوان</a></div>
                <div class="post-author">نویسنده : <a href="post-aouther-link">تست</a></div>
            </div>
            <div class="content-content">
                <p>این یک متن آزماشی می باشداین یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشاین یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باشداین یک متن آزماشی می باشد این یک متن آزماشی می باشد این یک متن آزماشی می باش</p>
            </div>
            <div class="content-footer">
                <div class="content-keyword">موضوعات :<a href="#">تست 1</a><a href="#">تست 1</a><a href="#">تست 1</a></div>
                <div class="comment">
                    <div class="comment-circle"><a hreF#‎‎‎>2</a></div>
                    <div class="comment-title">نظرات</div>
                </div>
            </div>
        </div>
        <div id="last-content">
            <div id="last-content-header"><img src="images/last-content.png" /> آخرین مطالب</div>
            <div class="last-content-index"><a href="#">تست عنوان</a></div>
        </div>
        <div id="sidebar-left">
            <div class="sidebar-left-subject">
                <div class="sidebar-left-space-subject"></div>
                <div class="sidebar-left-subject-header"><p>موضوعات</p></div>
                <div class="sidebar-left-Subject-content">
                    <div class="sidebar-left-subject-content-link"><a href="#" >تست</a></div>
                    <div class="sidebar-left-subject-content-link"><a href="#" >تست</a></div>
                    <div class="sidebar-left-subject-content-link"><a href="#" >تست</a></div>
                    <div class="sidebar-left-subject-content-link"><a href="#" >تست</a></div>
                    <div class="sidebar-left-subject-content-link"><a href="#" >تست</a></div>
                    <div class="sidebar-left-subject-content-link"><a href="#" >تست</a></div>
                </div>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

@font-face{font-family: 'Byekan';src:url('images/BYekan.eot');src:url('images/BYekan.ttf');src:url('images/BYekan.woff');}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  

font-size: 100%;font: inherit;vertical-align:baselinebaseline;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

body{margin: 0;padding: 0;font-family: 'Byekan';font-size: 18px;background: #E8F3FE;}

*{margin: 0;padding: 0;}

#wrapper{background: #E6E6E6;width: 1024px;height:auto;}

#header{width: 100%;height: auto;}

#nav{width: 100%;height:155px;background-image: url("images/ads.gif");background-repeat: no-repeat;float: right;border-bottom: 3px solid #0048FF;}

#ads{float: right;margin-right: 150px;margin-top: 3px;}

#sidebar-right{float: right;width: 250px;height: 100%;margin-top: 20px;margin-right: 10px;}

.subject{width: 100%;height: auto;border:3px solid #C600FF;margin-bottom: 20px;}

.subject-header{width: 100%;height: 50px;direction: rtl;background:#C600FF;}

.subject-header p{color: #fff;margin-right: 60px;font-family: 'Byekan';font-size: 24px;}

.space-subject{width: 0;height: 0;border:solid;border-width: 50px 50px 0 0;border-color: #E6E6E6 transparent transparent transparent;position: absolute;margin-top: -3px;margin-left: -3px;}

.Subject-content{text-align: right;}

.Subject-content a{direction: rtl;text-decoration: none;color: #000;margin-right: 5px;}

.subject-content-link{background: #FFC600;border:1px solid #000;margin: 4px;}

.subject-content-link:hover{background: #C600FF;}

#center{width: 500px;height: auto;border:#0782FF solid 2px;float: right;margin-right: 30px;margin-top: 40px;}

.center-header{width: 100%;height: 50px;direction: rtl;background: #0066FF;}

.post-title{margin-top: 5px;margin-right: 10px;width: 200px;float: right;}

.post-title a{color: #fff;text-decoration: none;font-size: 22px;}

.post-author{float: left;margin-left: 140px;margin-top: 5px;font-size: 20px;}

.post-author a{color: #fff;text-decoration: none;font-size: 22px;}

.content-content{margin: 10px;text-align: justify;direction: rtl;}

.content-content p{font-size: 16px;}

.content-footer{float: right;margin-top: 40px;margin-bottom: 20px;}

.content-keyword{float: right;margin-right: 5px;}

.content-keyword a{padding: 2px 4px 2px 4px;background: #0065FF;margin-right: 5px;text-decoration: none;color: #fff}

.comment{float: left;margin-right: 250px;}

.comment-circle{width: 48px;height: 40px;background: url('images/comment.png');text-align: center;color: #fff;}

#last-content{float: right;width: 500px;height: auto;direction: rtl;margin-right: 30px;margin-top: 20px;border: 2px solid #0065FF }

#last-content-header{background: #0065FF;color: #fff;height: 50px;width: 100%;padding-right: 5px;font-size: 24px;}

#last-content-header img{margin-top: 5px;}

.last-content-index{background: #FFD800;margin: 5px;}

.last-content-index a{text-decoration: none;color: #000;margin: 2px 5px 2px 5px;}

#sidebar-left{float: left;width: 200px;height: 100%;margin-top: 20px;margin-left: 10px;}

.sidebar-left-subject{width: 100%;height: auto;border:3px solid #C600FF;margin-bottom: 20px;}

.sidebar-left-space-subject{width: 0;height: 0;border:solid;border-width: 0 0 50px 50px;border-color: #E6E6E6 transparent transparent transparent;position: absolute;margin-bottom: -3px;margin-right: -3px;}

.sidebar-left-subject-header{width: 100%;height: 50px;direction: rtl;background:#C600FF;}

.sidebar-left-subject-header p{color: #fff;margin-right: 50px;font-family: 'Byekan';font-size: 24px;}

.sidebar-left-Subject-content{text-align: right;}

.sidebar-left-Subject-content{direction: rtl;text-decoration: none;color: #000;margin-right: 5px;}

**hsdnhd** · پنج شنبه 08 آبان 1393, 20:35 عصر

این مشکل یعنی راه حلی نداره؟چطور میشه منشا مشکل را پیدا کرد؟خیلی به این مشکل بر میخورم اشکال از کدنویسی من هست؟
ممنون میشم راهنمایی کنید.

**tooka123** · پنج شنبه 08 آبان 1393, 21:40 عصر

سلام قسمت last-content رو بذار داخل div با آی دی center درست می شه

**hsdnhd** · جمعه 09 آبان 1393, 12:15 عصر

نوشته شده توسط tooka123

سلام قسمت last-content رو بذار داخل div با آی دی center درست می شه

ممنون ازشما ممکنه دلیل این مشکل را هم بگید؟چرا باید حتما داخل Center مقداردهی شود؟من با خاصیت float مقداردهی کردم.

**tooka123** · جمعه 09 آبان 1393, 12:26 عصر

بهتره اول قسمت های سایت رو مشخص کنیم و بعد داخل اون بخش المنت های خودتون رو بذارید مثل نمونه زیر

کد HTML:

<style>
.body{}
.left{float:left; width:20%;}
.center{float:left; width:60%;}
.right{float:left; width:20%;}
</style>
<div class="body">

    <div class="left">
        <div class="section1">
            <h5>title</h5>
            <div>body</div>
        </div>
        <div class="section2">
            <h5>title</h5>
            <div>body</div>
        </div>
    </div>
    
    <div class="center">
        <div class="section1">
            <h5>title</h5>
            <div>body</div>
        </div>
        <div class="section2">
            <h5>title</h5>
            <div>body</div>
        </div>
    </div>
    
    <div class="right">
        <div class="section1">
            <h5>title</h5>
            <div>body</div>
        </div>
        <div class="section2">
            <h5>title</h5>
            <div>body</div>
        </div>
    </div>
    
</div>

نام تاپیک: مشکل مکانبندی سایدبار سمت چپ

ابزار های تاپیک

نمایش

مشکل مکانبندی سایدبار سمت چپ

نقل قول: مشکل مکانبندی سایدبار سمت چپ

نقل قول: مشکل مکانبندی سایدبار سمت چپ

نقل قول: مشکل مکانبندی سایدبار سمت چپ

نقل قول: مشکل مکانبندی سایدبار سمت چپ

تاپیک های مشابه

مشکل با Validate سمت کلاینت

سوال: مشکل در Paging سمت سرور....؟!

مشکل نمایش منوها در سمت چپ

مشکل در فارسی شدن در سمت سرور در جاوا

قوانین ایجاد تاپیک در تالار