جانمایی

[sallamatii]

سلام
میخوام کدی برای پس زمینه اخبار و آمار سایتم آماده کنم
کدی که دارم همانند شکل شماره 002 شده است
ام من میخوام همانند شکل شماره 001 باشه
آمار جلوی اخبار قرار بگیره ( به عبارتی زمینه آمار روی زمینه اخبار قرار بگیره تا در رزولیشون ها جابجا بشه) کد های نمایش شون رو خودم دارم ، فقط کد قرار گرفتنشون جلوی هم رو میخوام
کسی میتونه برام ویرایشش کنه
کد html :


<div>
<div class="wrapper-1400" style="">
<div style="height: 51px;width:100%;_position:absolute;">
<div style="direction:rtl;position:relative;width:20%;height: 51px;background: #333333;font-family: DPYekan;font-size:19px;color:white;line-height: 51px;text-align: center;float: right">اخبار
<div class="faarrow21"></div>
</div>
<div style="float:left;padding-bottom: 5px;padding-top: 16px;width: 79.5%;position:relative;background-color:#CDCED0;">
<div class="faarrow22">
</div>
</div>
</div>
<ul>
<li>
<!-- متن اخبار -->
</li>
</ul>
</div>
<div class="wrapper-400" style="">
<div style="height: 51px;width:100%;_position:absolute;">
<div style="direction:rtl;position:relative;width:20%;height: 51px;background: #333333;font-family: DPYekan;font-size:19px;color:white;line-height: 51px;text-align: center;float: right">آمار
<div class="faarrow21"></div>
</div>
<div style="float:left;padding-bottom: 5px;padding-top: 16px;width: 79.5%;position:relative;background-color:#CDCED0;">
<div class="faarrow22">
</div>
</div>
</div>
<ul>
<li>
<!-- متن آمار -->
</li>
</ul>
</div>


کد css:

html, body {
height: 100%;
}
body{
margin: 0;padding: 0;
font-family: DPYekan,DPTahoma , tahoma;
font-size:11px;
line-height: 18px;
}
.wrapper{
max-width: 1200px;
margin: 0 auto;
min-width:800px;
}
.wrapper-1400{
max-width: 1000px;
margin: 0 auto;
min-width:800px;
direction:rtl;
}
.wrapper-400{
max-width: 400px;
margin: 0 auto;
min-width:300px;
direction:rtl;
}
.faarrow21{
position: absolute;
left: -37px;
top: 18px;
width: 28px;
height: 0px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #333333;
z-index: 30000;
}
.faarrow22{
position: absolute;
right: 0px;
top: 18px;
width: 28px;
height: 0px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid white;

}



تصاویر:
http://uupload.ir/files/renr_001.png
http://uupload.ir/files/bysc_002.png
134118134119

[sinoser]

فدات شم این جوری کسی فک نکم کمکت بکنه.
برو کدهاتو توی https://jsfiddle.net بزار و لینکشو اینجا بزار تا ویرایش شده رو راحت بت بدن.

[sallamatii]

فدات شم این جوری کسی فک نکم کمکت بکنه.
برو کدهاتو توی https://jsfiddle.net بزار و لینکشو اینجا بزار تا ویرایش شده رو راحت بت بدن.

ممنون از شما
لینکش رو میذارم اینجا

[sallamatii]

فدات شم این جوری کسی فک نکم کمکت بکنه.
برو کدهاتو توی https://jsfiddle.net بزار و لینکشو اینجا بزار تا ویرایش شده رو راحت بت بدن.


https://jsfiddle.net/sallamatii/s58z0tt1/


سلام مجدد
کمی کد ها رو تغییر دادم که همانند نمونه بالا شد


پهنای سایتم را در مانیتورهای با (رزولیشن 1024) 940 قرار دادم
و در مانیتور های ( 1400 و بالاتر ) پهنای سایت رو نهایتا 1340 در نظر گرفتم




من طول قسمت اخبار را 940 گرفتم که پهنای سایتم در مانیتورهای رزولیشن 1024 است
و طول قسمت آمار رو 400 قرار دادم


نظرم اینه که در مانیتورهای با (رزولیشن 1024 ) قسمت آمار بیاد روی اخبار قرار بگیره (انتهای قسمت اخبار) که باز هم کل طولش 940 میشه


و در مانیتور ها با رزولیشن 1400 و بالاتر قسمت آمار بره جلوی قسمت اخبار قرار بگیره که 940 بعلاوه 400 مساوی است با 1340 که پهنای قالبم است
امیدوارم واضح توضیح داده باشم
یه سوال هم دارم
میشه قسمت های استایل رو به css انتقال داد که قسمت html شلوغ نشه؟




تصاویر:
http://uupload.ir/files/renr_001.png
http://uupload.ir/files/bysc_002.png




خداوند به همه ما توفیق بدهد - ان شاء الله

[sallamatii]

فدات شم این جوری کسی فک نکم کمکت بکنه.
برو کدهاتو توی https://jsfiddle.net بزار و لینکشو اینجا بزار تا ویرایش شده رو راحت بت بدن.

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

[sallamatii]

http://codepen.io/sallamatii/pen/qdvGGp