PDA

View Full Version : سوال: هم ارتفاع بودن دو تا دایو کنار هم در همه حال



mohsen.nsb44
جمعه 10 شهریور 1391, 13:06 عصر
سلام
من تو قالب سایت یه دایو مرکزی دارم و دو تا دایو کنار هم هستند
حالا میخوام دو تا دایو در همه حال هم ارتفاع باشند
مثلا اگه در دایو اول خبر رو که نشون میده اگه خبرش طولانی بود و ارتفاعش زیاد شد و دایو سمت چپ که منو ها رو در بر داره و ارتفاعش کمتره به اندازه دایو سمت راستی که ارتفاش زیاد شده به ارتفاع دایو سمت چپی اضافه و هم اندازه بشن

meisam12
جمعه 10 شهریور 1391, 13:37 عصر
سلام
از خاصیت valign استفاده کنید و آن را برابر top بزارید به شکل زیر

<td class="style4" valign="top">

mohsen.nsb44
جمعه 10 شهریور 1391, 16:56 عصر
سلام
از خاصیت valign استفاده کنید و آن را برابر top بزارید به شکل زیر

<td class="style4" valign="top">

دوست عزیز ربطی نداره من که نمیخوام ارتفاع بالای دو تا دایو رو یکی کنم
اگه خوب مطلبم رو بخونید متوجه میشید که منظورم پاییت دایو هستش که مثلا مطلبی طولانی در دایو اول ارتفاع اون رو به 300 پیکسل افزایش میده اما ارتفاع دایو دم 200 پیکسل هستش زمانی که تغییر ارتفاع رخ میده میخوام ارتفاع دایو دوم هم تغییر کنه و 300 پیکسل بشه و هم اندازه دایو اول بشه
مثل سایت زیر
http://www.sitedesign24.ir/
قسمت خاکستری رو یه دایو و قسمت سفید رو هم یه دایو در نظر بگیرید

ramin149
جمعه 10 شهریور 1391, 20:16 عصر
کد زیر را به box خود نسبت بده

padding-bottom: 1000em;margin-bottom: -1000em;

fakhravari
جمعه 10 شهریور 1391, 20:50 عصر
چرا در بخش طراحی سوال نکردید باید از float استفاده کنید

mohsen.nsb44
شنبه 11 شهریور 1391, 00:00 صبح
چرا در بخش طراحی سوال نکردید باید از float استفاده کنید
میشه یه مثال بزنید

alirat
شنبه 11 شهریور 1391, 01:13 صبح
ببین دوست من ، شما باید از یه server control استفاده کنی !
مثلا دوتا panel به جا div که در page_load یا هر event مربوطه خاصیت height دو تا panel رو یکی کنی ...
البته این روش برای div هم جواب میده اگه runat="server" رو به div tag اضافه کنی ...
تعجب کی کنم همه دوستان که جواب دادن اصلا متوجه سوال نبودن ...

mohsen.nsb44
شنبه 11 شهریور 1391, 13:52 عصر
ببین دوست من ، شما باید از یه server control استفاده کنی !
مثلا دوتا panel به جا div که در page_load یا هر event مربوطه خاصیت height دو تا panel رو یکی کنی ...
البته این روش برای div هم جواب میده اگه runat="server" رو به div tag اضافه کنی ...
تعجب کی کنم همه دوستان که جواب دادن اصلا متوجه سوال نبودن ...
حرف شما درست اما اندازه اونا که همیشه ثابت نیست اگر اینطور بود که مشکلی نبود امروز یه خبر ثبت میکنم که دو خط هستش و ارتفاع دایو رو به 100 پیکسل تغییر میده و یک ساعت ممکنه خبری ثبت کنم که 50 خط هستش و ارتفاع دایو رو به 500 پیکسل تغییر بده با اضافه شدن خط های بیشتر ارتفاع دایو هم تغییر میکنه اما دایو سمت چپی که منو ها داخلشه ارتفاعش ثابته در همه وقت مثلا 200 پیکسل خب حالا شما فرض کن یکی از دایو ها که خبر رو شامل میشه 400 پیکسل ارتفاع داره به خاطر متنی که داره و دیگری که ثابته 200 پیکسل و این جز زشتی برای قالب سایت نداره من میخوام بعد از ورود متن که اندازه دایو سمت چپی بر اساس تعداد خطوط تغییر میکنه دایو سمت چپی هم ارتفاعش به همون نصبت تغییر بکنه

alirat
شنبه 11 شهریور 1391, 18:30 عصر
شما میتونی با اضافه شدن هر خبر panel رو update کنی ... مثلا شما از کنترل hyperlink استفاده می کنی اگه براش height رو 200px مثلا تنظیم کنی با اضافه شدن هر خبر 200 تا به panel اضافه کنی... البته راه اماتوری هستش ...

ramin149
شنبه 11 شهریور 1391, 18:33 عصر
دوست عزیز css رو که من براتون نوشتم رو به div که ارتفاعش کمتر div دیگر است نسبت دهید . درست می شه .

mohsen.nsb44
شنبه 11 شهریور 1391, 23:52 عصر
دوست عزیز css رو که من براتون نوشتم رو به div که ارتفاعش کمتر div دیگر است نسبت دهید . درست می شه .
دوست عزیز کد شمارو کپی کردم و کدم به شکل زیر درومد


float:left;
background-color:#F1F1F1;
width:25%;
margin-top:10px;
border-top-left-radius: 10px 10px;
padding-bottom: 1000em;margin-bottom: -1000em;


اما اون دایو به اندازه خیلی زیاد ارتفاعش زیاد شده

sasansara
یک شنبه 12 شهریور 1391, 11:09 صبح
روش های server side و محاسبه و ... فکر نمی کنم جالب باشه. توی لینک زیر با استفاده از css این قضیه بررسی شده. البته فکر می کنم تو IE6 و IE7 جواب نده که الان دیگه با توجه به کم شدن استفاده از اونها شاید قابل چشم پوشی باشه

http://barnamenevis.org/showthread.php?332188-%D9%85%D9%82%DB%8C%D8%AF-%DA%A9%D8%B1%D8%AF%D9%86-%D8%A7%D8%B1%D8%AA%D9%81%D8%A7%D8%B9-%D8%AF%D9%88-div-%D9%85%D8%AC%D8%A7%D9%88%D8%B1-%D8%A8%D9%87-%D9%87%D9%85&p=1472386&viewfull=1#post1472386

mohsen.nsb44
یک شنبه 12 شهریور 1391, 19:34 عصر
روش های server side و محاسبه و ... فکر نمی کنم جالب باشه. توی لینک زیر با استفاده از css این قضیه بررسی شده. البته فکر می کنم تو IE6 و IE7 جواب نده که الان دیگه با توجه به کم شدن استفاده از اونها شاید قابل چشم پوشی باشه

http://barnamenevis.org/showthread.php?332188-%D9%85%D9%82%DB%8C%D8%AF-%DA%A9%D8%B1%D8%AF%D9%86-%D8%A7%D8%B1%D8%AA%D9%81%D8%A7%D8%B9-%D8%AF%D9%88-div-%D9%85%D8%AC%D8%A7%D9%88%D8%B1-%D8%A8%D9%87-%D9%87%D9%85&p=1472386&viewfull=1#post1472386
دوست عزیز ممنون از راهنماییتون اما مشکلم حل نشد کدهاشون رو هم تست کردم اگه تونستید یه مثال بزارید ممنون میشم

mohsen.nsb44
یک شنبه 12 شهریور 1391, 20:09 عصر
من یه راهی به نظرم رسیده لطفا شما هم راهنمایی کنید تا تکمیل بشه این ایده
من داخل هر کدوم از دایو ها یه پنل گذاشتم و کد زیر رو نوشتم


string i = Panel2.Height.Value.ToString();
int j = Convert.ToInt16(i);
Panel1.Height = Unit.Pixel(j);



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

sasansara
دوشنبه 13 شهریور 1391, 09:23 صبح
من الان کد زیر رو تو chrome و IE8 تست کردم و کامل جواب داد:




<div style="display:table">

<div style="display:table-row;">

<div style="display:table-cell; width:100px; background-color:Green;">

</div>

<div style="display:table-cell; width:100px; background-color:Lime;">

text text text text text text text text text
<br />
text text text text text text text text text
<br />
text text text text text text text text text

</div>

</div>

</div>


تو کدوم مرورگر بررسی کردید؟

sanay_esh
دوشنبه 13 شهریور 1391, 10:44 صبح
با سلام خدمت شما
میتونید از راه خیلی ساده تر استفاده کنید

شما یک div دارید که که داخلش دوتا div دیگر دارید که اولی مثلا خبر و دومی مطلب روز رو نمایش میده
حال اگر خبری در div اولی قرار گرفت که ارتفاعش خیلی تغییر پیدا کرد و چینش صفحه رو بهم ریخت میتونی از این استفاده کنید که
div های خودت را با height=100% در نظر بگیری
در این موقع اگر هر تغییری در div مادر داشته باشید div های بعدی هم به همان اندازه تغییر ارتفاع میدن


#main
{
width:500px;
border:1px solid ;
height:500px;
}

#news
{
width:200px;
float:right;
height:100%;
background-color:lightgreen;
}
#dayspeech
{
width:200px;
float:right;
height:100%;
background-color:lightblue;
}



<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="news"> در حالی که برخی از کارشناسان اقتصادی پیش بینی کرده اند قیمت دلار به سه هزار تومان خواهد رسید رییس کل بانک مرکزی در گفت و گو با ایلنا این موضوع را تکذیب کرد.</div>
<div id="dayspeech">یادت باشد گاهی اوقات بدست نیاوردن آنچه می‌خواهی نوعی شانس و اقبال است.</div>
</div>
</body>

</html>

mohsen.nsb44
دوشنبه 13 شهریور 1391, 10:49 صبح
من تو ie9 و firefox 9.0.1 تست کردم اما کار نمیکنه

sanay_esh
دوشنبه 13 شهریور 1391, 14:38 عصر
مسئله اینجاست که شما میتونید این کد را در این سایت (http://jsfiddle.net/) قرار بدید و نتیجه رو ببینید

هر کدام را در بخش مربوطه قرار بدید

na3er-faraji
دوشنبه 13 شهریور 1391, 15:31 عصر
هر دو دابو رو داخل یک دایو دیگه بزار. بعد به اون دایوی که میخای اندازه ش بزرگ بشه height : 100% بده.

zigoratsoft
سه شنبه 14 شهریور 1391, 05:57 صبح
سلام دوست عزیز با همین سایتی که خودتون مثال زدید توضیح میدم http://www.sitedesign24.ir/

یک دایو اصلی داریم که یه تصویر بکگراند داره این تصویر دو رنگ هست و یه قسمت سفید و یه قسمت خاکستری داره.

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

حالا داخل این دایو اصلی دو دایو دیگه داریم که دایو های مورد نظر شما هستند.
این دایو ها بکگراند ندارند و بکگراند دایو اصلی رو نشون میدن.

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

به همین سادگی.

اگه متوجه نشدید بگید تا کدشو براتون بنویسم.

sasansara
سه شنبه 14 شهریور 1391, 11:33 صبح
تو این سایتی که شما معرفی کردید، کدی که من گذاشتم درست اجرا میشه

alirat
چهارشنبه 15 شهریور 1391, 09:54 صبح
حرف شما درست اما اندازه اونا که همیشه ثابت نیست اگر اینطور بود که مشکلی نبود امروز یه خبر ثبت میکنم که دو خط هستش و ارتفاع دایو رو به 100 پیکسل تغییر میده و یک ساعت ممکنه خبری ثبت کنم که 50 خط هستش و ارتفاع دایو رو به 500 پیکسل تغییر بده با اضافه شدن خط های بیشتر ارتفاع دایو هم تغییر میکنه اما دایو سمت چپی که منو ها داخلشه ارتفاعش ثابته در همه وقت مثلا 200 پیکسل خب حالا شما فرض کن یکی از دایو ها که خبر رو شامل میشه 400 پیکسل ارتفاع داره به خاطر متنی که داره و دیگری که ثابته 200 پیکسل و این جز زشتی برای قالب سایت نداره من میخوام بعد از ورود متن که اندازه دایو سمت چپی بر اساس تعداد خطوط تغییر میکنه دایو سمت چپی هم ارتفاعش به همون نصبت تغییر بکنه

عزیز در page_event n هر دو تارو مقایسه کن ... هر کدام hight کمتری داشت اون رو برابر با panel بزرگتر کن :

if(panel1.height>panel2.heght)
panel2.height=panel1.heght;
else if(panel2.height>panel1.heght)
panel1.height=panel2.height;