طراحی صفحه با عرض متغیر [بایگانی]

anahita6

یک شنبه 20 مرداد 1392, 15:55 عصر

سلام
من میخوام یک صفحه ایجاد کنم که وقتی رزلوشن صفحه تغییر میکنه یا اینکه صفحه ری سایز میشه صفحه اسکرول نخوره.فقط محتویاتش کوچیک بشه
اما اتفاقی که میفته اینه که یک قسمت از صفحه(بلوک 3 تو تصویر ضمیمه) به خط بعدی منتقل میشه
آیا میشه همچین صفحه ای درست کرد؟
این کد منه که درست کار نمیکنه

<style type="text/css">
.aa{
position:relative;
width: 100%;

height: 800px;
padding: 0 30px 0px 30px;
margin: -40px -70px;
top: 13px;
left: 3px;
}
.aa>#a{
float:right;
margin:50px 30px;
width: 15%;
height: 200px;
padding: 30px 40px 5px;
background: #fofofo;
background: rgba(0,0,0,0.06);
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 2px 20px rgba(0,0,0,0.1);
}

.aa>#b{
float:right;
margin:50px 5px 10px 5px;
width: 60%;
min-height: 650px;
padding: 30px 40px 5px;
background: #fofofo;
background: rgba(0,0,0,0.06);
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 2px 20px rgba(0,0,0,0.1);
}
.aa>#footer{
float:right;
margin:10px 5px 50px 5px;
width: 90%;
min-height: 650px;
padding: 30px 40px 5px;
background: #fofofo;
background: rgba(0,0,0,0.06);
border-radius: 20px;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 2px 20px rgba(0,0,0,0.1);
}
</style>

</head>
<body style="width:100%">
<form id="form1" runat="server" style=" width:100%">
<div style=" height :1003px; width:auto; width: 100%; background-color:#D7E4F2">

<div class="aa">
<div style="position:relative; background: rgba(0,0,0,0.); box-shadow: inset 0 2px 20px rgba(0,0,0,0.4);float:right;min-width:100px;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px;border-style:solid;border-width:1px; top: 24px; background: #a1a1a1; right: 28px; width: 90%; height: 148px;">
</div>

<div id="a">

</div>

<div id="b">
</div>
<div id="footer" style="position:relative;min-height:20px"></div>
</div>

</div>

mehbod.rayaneh

یک شنبه 20 مرداد 1392, 16:24 عصر

سلام
بلی میشود!
ولی باید ب جای px از درصد استفاده کنید!
مثلا برا کادر شماره 1 : width:100%
برا کادر شماره 2 : width : 70%
برا کادر شماره 3 : width : 30%
کار خیلی سخت میشه! جایی سخت میشه ک نیاز ب margin دادن هست! ولی این کار شدنیه!
میتونید برا راحت شدن کارتون از bootstraps یا فریم ورکهای دیگه استفاده کنید!
موفق باشید.

ateryad

یک شنبه 20 مرداد 1392, 19:34 عصر

با سلام

اين هم يك آموزش تصويري كه مي تونيد استفاده كنيد:
http://torrents.com/tutsplus-responsive-web-design-for-beginners-a52domu2lhg2tlhofina

فقط همين طور كه معلوم هست فايل تورنت هست.

anahita6

دوشنبه 21 مرداد 1392, 08:01 صبح

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

titreaval

دوشنبه 21 مرداد 1392, 08:12 صبح

یک کد خاصی داره
من یک زمان استفاده میکردم (ناخاسته)
و همه چیز با هم کوچک بزرگ میشد . بدون درصد . حتی متن کش هم میومد
با css هم هست
mehromah.ir
به این سایت سر بزن
من هرچی دنبال این بخشش بودم پیدا نکردم
اگه بشه
راحت می توان برای هم کامپیوتر هم تبلت و هم موبایل یک قالب نوشت ....
یک تیر و سه هدف

anahita6

دوشنبه 21 مرداد 1392, 08:46 صبح

اره دقیقا همین رو میخوام .البته فکر کنم تو این نمونه از jquery استفاده کرده چون همه چی با افکت کوچیک و بزرگ میشه.فکر کنم راه حلش پیدا بشه به درد خیلی ها بخوره .اگه دوستان تو این ضمینه تجربه دارن( یه چیزی مثل همین سایتی که دوستمون به عنوان نمونه معرفی کردن) ممنون میشم کد بزارن

qartalonline

دوشنبه 21 مرداد 1392, 09:32 صبح

نمونه ساده ای از طراحی ریسپانسیو:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">
<title>Responsive Template</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}

html{
height: 100%;
}
body{
background: #fcfcfc;
height: 100%;
width: 100%;
}

#block{
width: 990px;
margin: 0 auto;
padding: 20px 0;
}

#header{
background: #0088cc;
height: 150px;
width: 100%;
}

#body{
background: #666;
width: 100%;
}

#sidebar_right{
background: #62c462;
min-height: 500px;
width: 200px;
float: right;
}

#content{
background: #e74f4f;
min-height: 500px;
margin-right: 200px;
}

#footer{
background: #0088cc;
height: 150px;
width: 100%;
}

.clear{
clear: both;
}

.block{
padding: 10px;
}
.block .body{
background: #ff9600;
}

@media only screen and (max-width:990px){
#block{
width: 98%;
}
}
@media only screen and (max-width:400px){
#sidebar_right,#content{
width: 100%;
float: none;
}
}

</style>
</head>
<body>

<div id="block">

<div id="header">Header</div>

<div id="body">

<div id="sidebar_right">Sidebar Right</div>

<div id="content">

<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>

<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>

</div>

<div class="clear"></div>

</div>

<div id="footer">Footer</div>

</div>

</body>
</html>

anahita6

دوشنبه 21 مرداد 1392, 10:09 صبح

نمونه ساده ای از طراحی ریسپانسیو:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">
<title>Responsive Template</title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}

html{
height: 100%;
}
body{
background: #fcfcfc;
height: 100%;
width: 100%;
}

#block{
width: 990px;
margin: 0 auto;
padding: 20px 0;
}

#header{
background: #0088cc;
height: 150px;
width: 100%;
}

#body{
background: #666;
width: 100%;
}

#sidebar_right{
background: #62c462;
min-height: 500px;
width: 200px;
float: right;
}

#content{
background: #e74f4f;
min-height: 500px;
margin-right: 200px;
}

#footer{
background: #0088cc;
height: 150px;
width: 100%;
}

.clear{
clear: both;
}

.block{
padding: 10px;
}
.block .body{
background: #ff9600;
}

@media only screen and (max-width:990px){
#block{
width: 98%;
}
}
@media only screen and (max-width:400px){
#sidebar_right,#content{
width: 100%;
float: none;
}
}

</style>
</head>
<body>

<div id="block">

<div id="header">Header</div>

<div id="body">

<div id="sidebar_right">Sidebar Right</div>

<div id="content">

<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>

<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>

</div>

<div class="clear"></div>

</div>

<div id="footer">Footer</div>

</div>

</body>
</html>

اون اتفاق که گفتم واسه این نمونه طرحی شما هم اتفاق میفته دیگه از یه اندازه ای که کوچیکتر میشه ناحیه قرمز میره خط بعد و بهم میریزه

qartalonline

دوشنبه 21 مرداد 1392, 10:20 صبح

اون اتفاق که گفتم واسه این نمونه طرحی شما هم اتفاق میفته دیگه از یه اندازه ای که کوچیکتر میشه ناحیه قرمز میره خط بعد و بهم میریزه

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

anahita6

دوشنبه 21 مرداد 1392, 10:36 صبح

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

خب قبول اما اگه یکی بخواد واقعا کوچیک بشه راهی نیست؟من برای موبایل نمیخوام این طراحی رو برای application میخوام

qartalonline

دوشنبه 21 مرداد 1392, 11:28 صبح

خب قبول اما اگه یکی بخواد واقعا کوچیک بشه راهی نیست؟من برای موبایل نمیخوام این طراحی رو برای application میخوام

چرا میشه. کد زیر رو بررسی کنید.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">
<title>Responsive Template</title>
<script type="text/javascript">
function responsive(){
var w = window.innerWidth;
if(w>700) w = 700;
var s = (w/100) + (w/50);
document.getElementById('body').style.fontSize = s+'px';
}
</script>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
}

html{
height: 100%;
}
body{
background: #fcfcfc;
height: 100%;
width: 100%;
}

#block{
width: 990px;
margin: 0 auto;
padding: 20px 0;
}

#header{
background: #0088cc;
height: 150px;
width: 100%;
}

#body{
background: #666;
width: 100%;
}

#sidebar_right{
background: #62c462;
min-height: 500px;
width: 25%;
word-wrap: break-word;
float: right;
}

#content{
background: #e74f4f;
min-height: 500px;
float: left;
width: 75%;
}

#footer{
background: #0088cc;
height: 150px;
width: 100%;
}

.clear{
clear: both;
}

.block{
padding: 10px;
}
.block .body{
background: #ff9600;
}

@media only screen and (max-width:990px){
#block{
width: 100%;
}
}
</style>
</head>
<body onresize="responsive()" onload="responsive()">

<div id="block">

<div id="header">Header</div>

<div id="body">

<div id="sidebar_right">Sidebar Right</div>

<div id="content">

<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>

<div class="block">
<div class="body">
content contentcontent content content
</div>
</div>

</div>

<div class="clear"></div>

</div>

<div id="footer">Footer</div>

</div>

</body>
</html>