PDA

View Full Version : سوال: تغییر سایز عرض div نسبت به سایز مرورگر


moferferi
شنبه 28 آبان 1390, 20:13 عصر
با سلام.
دوستان بخش هدر سایت من شامل 3 تا div هست
من میخوام دیو وسط سایزش ثابت باشه مثلا 500 پیکسل.و دیو های راست و چپ نسبت به تغییر اندازه مرورگر عرضشون تغییر کنه.یعنی اینکه سایزشون 100% باشه.

و یه جور هم به صورت بر عکس میخوام.اینکه دیو سمت چپ سایزش200 پیکسل یباشه و به سمت چپ بچسبه
دیو سمت راست هم 200 پیکسل و به سمت راست بپچسبه.حالا دیو وسط عرضش را نسبت به فاصله خالی این دو تا دیو تغغیر بده.
با تشکر
Saber Mogaddas
یک شنبه 29 آبان 1390, 12:13 عصر
سلام



دوستان بخش هدر سایت من شامل 3 تا div هست
من میخوام دیو وسط سایزش ثابت باشه مثلا 500 پیکسل.و دیو های راست و چپ نسبت به تغییر اندازه مرورگر عرضشون تغییر کنه.یعنی اینکه سایزشون 100% باشه.

فکر کنم اینو می خواستین..


<html>
<head>
<title>www.pars-click.com</title>

<style type="text/css">
#right
{
background-color: #000000;
clear: left;
float: right;
height: 200px;
width: 35%;
}
#Center
{
background-color: #909090;
clear: left;
float: right;
height: 200px;
margin: auto;
width: 500px;
}
#Left
{
background-color: #000000;
clear: left;
height: 200px;
width: auto;
}
#Wraper
{
height:200px;
margin:auto;
}
</style>

</head>
<body>

<div id="Wraper">
<div id="right"></div>
<div id="Center"></div>
<div id="Left"></div>
</div>

</body>
</html>
Saber Mogaddas
یک شنبه 29 آبان 1390, 12:22 عصر
یه جور هم به صورت بر عکس میخوام.اینکه دیو سمت چپ سایزش200 پیکسل یباشه و به سمت چپ بچسبه
دیو سمت راست هم 200 پیکسل و به سمت راست بپچسبه.حالا دیو وسط عرضش را نسبت به فاصله خالی این دو تا دیو تغغیر بده.




<html>
<head>
<title>www.pars-click.com</title>

<style type="text/css">
#right
{
background-color: #000000;
clear: left;
float: right;
height: 200px;
width: 200px;
}
#Center
{
background-color: #909090;
height: 200px;
margin: auto;
overflow: hidden;
width: 100%;
}
#Left
{
background-color: #000000;
clear: left;
float: left;
height: 200px;
width: 200px;
}
#Wraper
{
height: 200px;
margin: auto;
width: 100%;
}
</style>

</head>
<body>

<div id="Wraper">
<div id="right"></div>
<div id="Center">
<div id="Left"></div>
</div>

</div>

</body>
</html>


موفق باشی..
moferferi
یک شنبه 29 آبان 1390, 12:22 عصر
ممنون
من خودم این کارو کردم.ولی مشکل اینه که اگه عرض مرورگر را کم کنید دیو وسطی میره پائین اون دو تا دیو دیگه.خودتون چک کنید.
من میخوام به جای اینکه به هم بریزه و جای دیو ها عوض بشه صفحه از یه حدی که کوچیک تر شد اسکرول افقی بخوره
امیدوارم منظورم را درست منتقل کرده باشم
moferferi
یک شنبه 29 آبان 1390, 12:25 عصر
یه نمونه پیدا کردم
سایت اقای کرامتی
http://www.keramatifar.ir
وقتی عرض صفحه را کم میکنی اگه از دیو وسطی هدر که منو و هدر توش قرار داده شده کوچکتر بشه اسکرول افقی میخوره.و هر چقدر هم که عرض صفحه بزرگتر بشه دیو ها کناری که مشکی هستند عرضشون زیاد تر میشه
Saber Mogaddas
یک شنبه 29 آبان 1390, 12:36 عصر
بله
اگه توجه کنید تو درخواست اولتون من فقط div چپ رو auto دادم..و دیو راست ثابت..تو اینجور مسله ها دیو چپ با اصطلاح تو سری خور می شه..و دیو راست فشار دهنده..و اینم باعث میشه که صفحه تا یه اندازه فقط تحمل میکنه و div پانصد شما چون ثابت هست و تکید به ثابت بودن کردید فشارو تحمل نمکنه و میزنه بیرون..برای scroll افقی هم می تونید از..


overflow-x: scroll;


استفاده کنید..من روی این کار می کنم ببینم با jquery میشه حل کرد اگه شد اطلاع میدم..
درخواست دومتونم کامل نوشتم .. و لی اولی تا بحال پیش نیومده که اینجوری قالب بزنم..
moferferi
یک شنبه 29 آبان 1390, 12:45 عصر
تشکر.دوست عزیز
من دیو وسط واسم مهمه.اون دو تا دیو کلا نابود بشن مهم نیست.فقط مکانشون تغییر نکنه
Saber Mogaddas
یک شنبه 29 آبان 1390, 12:45 عصر
نمونش اینجام (http://www.pars-click.com)هست..
آقای کرامتی عزیز به این صورت عمل کرده..یه div رو wrape کل محتویات صفحه کرده و به اون margin:auto; داده..یعنی از سمت راست و چپ margin رو auto; داده اگه از اول اینو میگفتین زودتر جواب می دادم..از دیروزه در گیر این مسله شمام میگم آخه این آقا این قالب و واسه چی می خواد اون سیاه ها هم background i هستن..

مثالشم به صورت زیر..


<html>
<head>
<title>www.pars-click.com</title>

<style type="text/css">

#Center
{
background-color: #909090;
height: 200px;
margin: auto;
width: 500px;
}
#Wraper
{
height:200px;
margin:auto;
width:100%;
background-color: #000000;
}
</style>

</head>
<body>

<div id="Wraper">
<div id="right"></div>
<div id="Center"></div>
<div id="Left"></div>
</div>

</body>
</html>
moferferi
یک شنبه 29 آبان 1390, 17:38 عصر
سلام.
اولا تشکر میکنم که به فکر حل مشکل من بودین.چون عجله داشتم یه کم به سایت اقای کرامتی ور رفتم و بعد فهمیدم چی کار کرده.اون کناری ها بک گراند بود نه دیو.فقط یک دیو وسط هست که margin اون auto تنظیم شده
منم همین کارو کردم و فعلا مشکلم حل شد.
البته قبلا توی دوره دات نت اقای مهراد کیانیان همین روش را با table یاد داده بود.ولی من میخواستم هدر سه بخشی به وسیله دیو طراحی کنم.
فکر کنم به وسیله css تنها این کار شدنی نیست و حتما باید از جی کوئری استفاده کرد.
Saber Mogaddas
یک شنبه 29 آبان 1390, 20:02 عصر
سلام
ممنون..
برای اینکه هدر شما 3 بخشی باشه می تونید یک div درست کنید با margin:auto; و داخل اون 3 تا دیوتون رو قرار بدید..و با float دیوهارو inline کنید..اینجوری مشکل شما حل می شه و نیازی به jQuery ندارید..
وtable هم منسوخ شده..بهترین روش برای قالب بندی table less هست..
موفق باشی...
moferferi
دوشنبه 30 آبان 1390, 11:12 صبح
در صورت امکان یه مثال واسم بزارین.هر چند که فعلا مشکلم حل شده.ولی خیلی این مسئله برام جالب شده.کاری را هم که شما گفتین انجام دادم.ولی بازهم موفق نشدم.موقع کوچک کردن عرض مرورگر دیوها میره زیر همدیگه.
Saber Mogaddas
دوشنبه 30 آبان 1390, 17:37 عصر
سلام
به این صورت..



<html>
<head>
<title>www.pars-click.com</title>

<style type="text/css">

#Center
{
background-color: #909090;
height: 200px;
float:right;
width: 500px;
}
#Wraper
{
height:200px;
margin:auto;
width:1000px;

}
#right
{
width:250px;
height:200px;
float:right;
background-color: #000000;
}
#Left
{
width:250px;
height:200px;
float:left;
background-color: #000000;
}
</style>

</head>
<body>

<div id="Wraper">
<div id="right"></div>
<div id="Center"></div>
<div id="Left"></div>
</div>

</body>
</html>
moferferi
دوشنبه 30 آبان 1390, 21:16 عصر
ممنون.این یکی بهتره