نیار به کمک درباره استایل دهی (مشگل در تغییر سایز قالب و بهم ریختن موقعیت قرارگیری تمام عناصر )

[ProMohammad]

من موقع تغییر سایز صفحه قالبم تمام عناصر اش بهم میریزد و فقط در سایز مانیتور خودم نمایش بی نقص دارد
منظورم این هست که چطور در تمام سایز نمایش و با هر اندازه زوم در صفحه قالب به هم نریزد و تغییر شکل ندهد لطفا کمک کنید:

برای درک بهتر موضوع فایل سی اس اس رو اینجا قرار دادم:


body {
background-image:url(images/bg.jpg);

}





#main {
width:990px;
height:3000px;
background-color:#FFF;
margin:auto;
border-radius:6px;
}
#header {
padding:0px;
}
#sidebar {
width:200px;
height:2840px;
border:1px solid #b8b8b8;
float:right;
direction:rtl;
font-size: 11px;
margin-top:0px;
border-radius:6px;
}
#box1 {
width:194px;
height:200px;
border:1px solid #b8b8b8;
border-radius:6px;
float:right;
direction:rtl;
font-size: 11px;
margin-right:3px;
}
.title_box1 {
font: normal 12px Tahoma;
background:url(images/box1_title.gif);
border-radius:6px;
width:194px;
height:20px;
color:#FFF;
text-align:center;
}
#box2 {
border:1px solid #b8b8b8;
border-top-style:none;
border-left-style:none;
border-right-style:none;
float:right;
width:190px;
height:1500px;
padding-right:3px;
padding-top:2spx;
margin-top:3px;
direction:rtl;
font-size: 11px;
margin-right:3px;
margin-top:0px;
border-radius:6px;
}







.top-news {
border:1px solid #b8b8b8;
background:url(images/title_top-news.png);
background-repeat:no-repeat;
color:#FFF;
float:right;
width:550px;
height:200px;
padding-right:30px;
font: normal 12px Tahoma;
border-radius:6px;
border-right-style:none;
direction:rtl;
}
.title_top-news {
font: normal 14px Tahoma;
border-radius:6px;
color:#FFF;
text-align:center;
}



#sidebar_left {
width:205px;
height:2840px;
border:1px solid #b8b8b8;
border-radius:6px;
float:left;
}

.slider {
width:280px;
height:230px;
border:4px solid #F5F5F5;
border-left-style:none;
border-bottom-style:none;
border-radius:6px;
border-right-style:none;
float:right;
margin-right:2px;
margin-left:2px;
}


.slider2 {
width:282px;
height:230px;
border:4px solid #F5F5F5;
border-radius:6px;
float:right;
border-left-style:none;
border-bottom-style:none;
}
.title_slider {
font: normal 12px Tahoma;
margin:1px;
background:url(images/box1_title.gif);
height:20px;
border-radius:6px;
color:#FFF;
text-align:center;
border-bottom:solid 1px #CCC;
}
.title_slider2 {
padding-top::3px;
font: normal 12px Tahoma;
margin:1px;
background:url(images/slider_titel.png);
height:20px;
border-radius:6px;
color:#FFF;
text-align:center;
border-bottom:solid 1px #CCC;
}



.button {
width:183px;
height:20px;
float:left;
margin-right:2px;
border-top: 1px solid #96d1f8;
background: #4487ab;
background: -webkit-gradient(linear, left top, left bottom, from(#00bfff), to(#4487ab));
background: -webkit-linear-gradient(top, #00bfff, #4487ab);
background: -moz-linear-gradient(top, #00bfff, #4487ab);
background: -ms-linear-gradient(top, #00bfff, #4487ab);
background: -o-linear-gradient(top, #00bfff, #4487ab);
padding: 6px 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
-moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
color: #ffffff;
font-size: 24px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #009fde;
background: #009fde;
color: #ffffff;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
.button_text {
margin-top:1px;
text-align:center;
font: normal 16px Tahoma;
}



.content {

width:579px;
height:auto;
border:1px solid #b8b8b8;
float:right;
border-radius:6px;

}


.title_content {

font: normal 12px Tahoma;

background-image:url(images/title_content.jpg);
text-align:center;
}



.link_content {

font: normal 16px Tahoma;
text-align:right;
margin-right:20px;
margin-top:10px;




}


.text_content {

font: normal 12px Tahoma;
text-align:right;
direction:rtl;
padding-top:14px;
margin-bottom:14px;
margin-left:14px;
margin-right:14px;
line-height:20px;
}


#footer {
width:990px;
height:140px;
background-image:url(images/footr.gif);
float:right;
font: normal 12px Tahoma;
}
.title_footer {
background-repeat:repeat-x;
font: normal 12px Tahoma;
text-align:center;
}
.navi_footer {
font: normal 12px Tahoma;
margin-right:20px;
float:right
}



a { text-decoration: none; }
a:link { color:#69F; }
a:visited { color: #F60; }
a:hover { color:#F00; }
a:active { color: #C0F; }
a:visited:hover {color:#C33; }
a img { border: none 0px; }

[Moien Tajik]

بايد قالبتون رو ريسپانسيو كنيد ، راه ترين استفاده از Bootstrap هستش. :چشمک:

[ProMohammad]

تو همین انجمن سرچ کردم گویا پارسالم یه بنده خدا این مشگل رو داشته لینکش هم اینه: دقیقا مشگل منو داشته اما دیگه نگفته چکار کنیم

http://barnamenevis.org/showthread.php?375324-%D8%B2%D9%88%D9%85-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88-%D8%A8%D9%87%D9%85-%D8%B1%DB%8C%D8%AE%D8%AA%D9%86-%D8%B5%D9%81%D8%AD%D9%87

ممکنه از float باشه همه عناصر رو رایت یا لفت دادم

[Moien Tajik]

به سايت bootstrap بريد و فايل هاش رو دانلود بكنيد ، كدتون رو در فولدري كه بوت استرپ رو دانلود كرديد بريزيد و با آموزش خود سايت bootstrap قالبتون رو ريسپانسيو كنيد.:چشمک: