hsdnhd
چهارشنبه 07 آبان 1393, 22:10 عصر
باسلام
دراین قالب به مشکلای برخوردم که سایدربارسمت چپ پایینترازبقیه مکان ها قرار می گیره بااینکه فضا وجود داره و میتونه بیاد بالاتر خیلی اوقات با این مشکل برخورد میکنم به نظرشما چیکارباید بکنم؟تکنیک یا راه حل خاصی هست که بهش راه حل این مشکل راپیدا کرد چون توی موارد مختلفی به این مشکل بر میخورم.فایل های Index و Style رو هم قرار دادم.لطفا درصورتی که راه حلی برای پیدا کردن این مشکل وجود داره عنوان کنید چون زیاد به این مشکل میخورم.درضمن درمورد کدنویسی به نظرتون مشکلاتم کجاست؟کدوم قسمت ها استانداردنیستند.
ممنون
<!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;}
دراین قالب به مشکلای برخوردم که سایدربارسمت چپ پایینترازبقیه مکان ها قرار می گیره بااینکه فضا وجود داره و میتونه بیاد بالاتر خیلی اوقات با این مشکل برخورد میکنم به نظرشما چیکارباید بکنم؟تکنیک یا راه حل خاصی هست که بهش راه حل این مشکل راپیدا کرد چون توی موارد مختلفی به این مشکل بر میخورم.فایل های Index و Style رو هم قرار دادم.لطفا درصورتی که راه حلی برای پیدا کردن این مشکل وجود داره عنوان کنید چون زیاد به این مشکل میخورم.درضمن درمورد کدنویسی به نظرتون مشکلاتم کجاست؟کدوم قسمت ها استانداردنیستند.
ممنون
<!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;}