PDA

View Full Version : تغییر اندازه و بهم ریختگی در resolution های مختلف


dr.undead
پنج شنبه 12 بهمن 1391, 00:04 صبح
سلام دوستان
آقا چجوری میشه سایتیو که طراحی میکنیم توی resolution های مختلف بهم میریزه ؟
یا وقتی صفحه رو کوچیکو بزرگی میکنیم بهم میریزه ؟
کسی میتونه راهنمایی کنه ؟
ممنون
2undercover
پنج شنبه 12 بهمن 1391, 05:57 صبح
احتمالا توی اندازه دادن به عناصر HTML از واحد % استفاده کردید!
ravand
پنج شنبه 12 بهمن 1391, 07:25 صبح
از کد زیر استفاده کردی

margin:auto
esmaeilbf
پنج شنبه 12 بهمن 1391, 18:35 عصر
من یه div دارم برای محتوا و سایدبار margin: auto
اما موقع کوچیک کردن پنجره بروزر، صفحه بهم میریزه ؟! چیکار باید کنم؟
ravand
پنج شنبه 12 بهمن 1391, 18:37 عصر
خب یه margin ثابت بده که یه عدد با پیکسل داشته باشه.
esmaeilbf
پنج شنبه 12 بهمن 1391, 18:58 عصر
http://uploadtak.com/images/l465_Untitled1.png

کد های css:
.sidebar{
width:270px;
height:300px;
background:#e3e8e8;
float:right;
clear:both;
margin:20px 30px 0 0;
display:block;


}
#content-bdy{
width:868px;
margin:20px 0 0 50px;
height:500px;
background:#e3e8e8;
float:left;



}
#left{
float:left;

}
#right{
float:right;
clear:both;
}
#content {
background:url(img/content-bg.png);
height:700px;
margin:10px;
}

کدهای html:
<div id="content">
<div id="right">
<!---------------------sidebar1------------>
<div class="sidebar">
<div id="sidebar-top1"></div>
<div class="text-sidebar">
</ul>
</div>
</div>
<!---------------------sidebar2------------>
<div class="sidebar">
<div id="sidebar-top2"></div>
<div class="text-sidebar">

</div>
</div>
</div>
<!---------------------end side------------>

<div id="left">
<div id="content-bdy"></div>
</div>
</div>
esmaeilbf
پنج شنبه 12 بهمن 1391, 19:35 عصر
یک مشکل دیگه هم دارم وقتی یه کپی از سایدبار میگیرم برای اضافه کردن زیر سایدبار دوم بازم صفحه بهم میریزه کلا هر کاری میکنم این div left بهم میریزه
ravand
پنج شنبه 12 بهمن 1391, 19:59 عصر
من یه اسکلت از یه قالب ساده برات همین الان نوشتم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>عنوان</title>
<head>
<style type="text/css">
.kol{
width:1000px;
border:1px #CCCCCC solid;
background-color:#eb1ced;
}
.header{
width:998px;
border:1px #CCCCCC solid;
background-color:#25d46f;
height:200px;
}
.rast{
width:200px;
height:400px;
border:1px #2563d4 solid;
background-color:#d4a525;
float:right;
}
.link{
width:200px;
height:200px;
border:1px #2563d4 solid;
background-color:#a329a4;
}
.chap{
width:700px;
border:1px #2563d4 solid;
background-color:#FFFFFF;
float:left;
}
.matlab{
width:750px;
height:400px;
border:1px #CCCCCC solid;
background-color:#22709E;
}
.mbody { direction:rtl; padding: 5px 6px 0px 6px; line-height: 150%}
</style>
</head>
<body>
<div align="center">
<div class="kol">
<div class="header">
</div>

<div class="rast">
<div class="link">
پیوندها
</div>
<div class="link">
عنوان یادداشت ها
</div>
</div>

<div class="chap">
<div class="matlab">
<div class="mbody">
متن
</div>
</div>
</div>
<div style="clear: both;font-size: 2pt"> </div>
</div>

</div>
</body>
</html>
soroush.r70
جمعه 13 بهمن 1391, 10:55 صبح
می تونی از طراحی ریسپانسیو استفاده کنی در تاپیک پایین یه آموزش کامل گذاشتم.

لینک (http://barnamenevis.org/showthread.php?378702-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-responsive&highlight=%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8% B3%DB%8C%D9%88)