چطور میشه از یکسان بودن دو ستون div در کنار یکدیگر اطمینان داشت

NabiKAZ · May 8, 2007

سلام

فکر کنم قبلاً هم مشابه اين سوال رو پرسيده بودم اما به جواب درست نرسيدم.

دو تا ستون div داريم ، هر کدوم يه بک گراند متفاوت دارند، بسته به اينکه محتويات اونها چي بشن ارتفاعشون تغيير ميکنه. چطور ميشه اطمينان داشت که هميشه اين دو ستون هم ارتفاع خواهند بود.
فايل نمونه رو ضميمه کردم (test1)

راه ديگه اي که به ذهنم رسيد استفاده از يک بک گراند ثابت که هر دو ستون رو پوشش بده بود که در اين صورت دو ستون div بدون بک گراند روي اون قرار خواهند گرفت. اما اين روش تنها در ie جواب ميده و در ff جواب نميده . فایل نمونه (test2)

حالا براي هر کدام از اين دو روش راه حلي داريد ممنون ميشم ارائه بديد.
توجه: هدف اينه که ستون چپ و راست ارتفاع يکسان بگيرند تا ستونهای زمينه نارنجي و سفيد هم ارتفاع شوند. و البته ارتفاع ستون ها کاملاً نامشخصه.

برای روشن تر شدن صورت مسئله من چیزی که میخواستم رو با table پیاده کردم (فایل test3) اگر در هر یک از دو ستون مقداری اضافه بشه، ستون دیگر به نسبت کش میاد. چیزی که من میخوام دقیقاً همینه ولی با استفاده از تگ div.

تشکر
نبي

Ali_ix · May 8, 2007

سلام
پیشنهاد میکنم این رو مطالعه کنی: http://css.maxdesign.com.au/floatutorial

شما از float استفاده کردی و clearش نکردی! همین!

به نمونه test2 این هارو باید اضافه کنی:

به css

HTML:

.clear {
	clear: both;
}

قبل از خط 63:

HTML:

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

موفق باشی

echessdesign · May 8, 2007

دورد بر شما
یک ترفند کوچیک، بکگراند رو پس زمینه #content کن :

HTML:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 5</title>
<style type="text/css">
html, body, #wrp, #left, #right {
	padding:0; margin:0; border:0;
}
body {
	text-align:center;
	background:#000;
}
#wrp {
	width:740px;
	margin:0 auto;
	background:#fff url('images/back_right.gif') repeat-y right top;
}
#left, #right {
	width:545px;
	float:left;
}
#right {
	width:195px;
}
</style>
</head>

<body>
<div id="wrp">


<div id="left"><p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
</div>


<div id="right">
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>
<p>echessdesign.com</p>

</div>


</div>
</body>

</html>

فقط عکس رو در کنار این فایل قرار بده

پاینده باشی

echessdesign · May 8, 2007

Ali_ix گفت:
سلام
پیشنهاد میکنم این رو مطالعه کنی: http://css.maxdesign.com.au/floatutorial

شما از float استفاده کردی و clearش نکردی! همین!

به نمونه test2 این هارو باید اضافه کنی:

به css

HTML:

.clear { clear: both; }

قبل از خط 63:

HTML:

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

موفق باشی

دورد بر شما
سایت بسیار جالی معرفی کردی، سپاسگزارم.
متاسفانه متوجه رابطه توضیح شما با سوال پرسیده شده نشدم. لطفا واضح تر توضیح بدین.

Ali_ix · May 8, 2007

echessdesign گفت:
دورد بر شما
سایت بسیار جالی معرفی کردی، سپاسگزارم.
متاسفانه متوجه رابطه توضیح شما با سوال پرسیده شده نشدم. لطفا واضح تر توضیح بدین.

راه ديگه اي که به ذهنم رسيد استفاده از يک بک گراند ثابت که هر دو ستون رو پوشش بده بود که در اين صورت دو ستون div بدون بک گراند روي اون قرار خواهند گرفت. اما اين روش تنها در ie جواب ميده و در ff جواب نميده . فایل نمونه (test2)

مشکل اینکه این راه بالایی (که بهترین راه برای این حالت هست) با firefox (و سایر مرورگرهای استاندارد) جواب نمیداده clear نکردن float اون دوتا div بوده. که توضیح بنده این مشکل رو حل میکنه!

NabiKAZ · May 8, 2007

echessdesign گفت:
دورد بر شما
یک ترفند کوچیک، بکگراند رو پس زمینه #content کن :

ایده خوبی بود
اما روش شما هم برای اجرا در فایرفکس ، کدی که آقا علی در بالا توضیح دادند رو نیاز داشت!
یعنی اضافه کردن این:

کد:

<div style="clear:both;"></div>

قبل از خط 56

اینطور نیست؟

NabiKAZ · May 8, 2007

Ali_ix گفت:
مشکل اینکه این راه بالایی (که بهترین راه برای این حالت هست) با firefox (و سایر مرورگرهای استاندارد) جواب نمیداده clear نکردن float اون دوتا div بوده. که توضیح بنده این مشکل رو حل میکنه!

از راهنماییتون ممنونم . با اینکه اضافه کردن اون کد هضمش کمی برام مشکل بود، آخه اون تگ خارج از دو ستون هست و برام کمی عجیب بود که با اضافه کردن این کد مشکل حل بشه! البته اون div اضافی پایین رو میشه به footer تبدیل کرد...
بازم تشکر

اما در مورد اینکه گفتید بهترین راه است موافق نیستم. شاید تنها راه یا ساده ترین راه باشه، اما بهترین نیست. چون همیشه جزء تکرار شونده بکگراند دو ستون یکپارچه نیست ! یعنی شاید جزء تکرار شونده هم ارتفاع نباشند یا برای صفحات مختلف بکگراند ستون ها تغییر کنند و نشه در یک عکس واحد بهم متصلشون کرد. بنابراین اگر بکگراند دو ستون مستقل از هم باشند خیلی بهتر است.
در این باره هم اگر ترفندی به نظرتون رسید ممنون میشم راهنمایی کنید (منظور تکمیل فایل test1 است.)

تشکر
نبی

Ali_ix · May 8, 2007

NabiKAZ گفت:
از راهنماییتون ممنونم . با اینکه اضافه کردن اون کد هضمش کمی برام مشکل بود، آخه اون تگ خارج از دو ستون هست و برام کمی عجیب بود که با اضافه کردن این کد مشکل حل بشه! البته اون div اضافی پایین رو میشه به footer تبدیل کرد...
بازم تشکر
//

اما در مورد اینکه گفتید بهترین راه است موافق نیستم. شاید تنها راه یا ساده ترین راه باشه، اما بهترین نیست. چون همیشه جزء تکرار شونده بکگراند دو ستون یکپارچه نیست ! یعنی شاید جزء تکرار شونده هم ارتفاع نباشند یا برای صفحات مختلف بکگراند ستون ها تغییر کنند و نشه در یک عکس واحد بهم متصلشون کرد. بنابراین اگر بکگراند دو ستون مستقل از هم باشند خیلی بهتر است.
در این باره هم اگر ترفندی به نظرتون رسید ممنون میشم راهنمایی کنید (منظور تکمیل فایل test1 است.)

تشکر
نبی

خب. برای همین گفتم اون لینک رو بخون! بعد از مطالعه مرحله به مرحله توضیحاتی که در مورد float داده! دیگه تا آخر عمر یادت نمیره که همه floatها باید clear بشند مگر اینکه قبلا clear شده باشند!

اون div کار خاصی جز اعمال کلاس .clear انجام نمیده! و در شرایطی خاصی به طور حرفه ای تر میشه از br یا hr هم به جای div استفاده کرد.

//

برای این حالت (امتداد بک گراند هر دو کادر به اندازه هم) بهترین راهه!
برای حالتهای دیگه باید موقعیت و ساختارش مشخص باشه. الان چیز خاصی به ذهنم نمیرسه.
ولی برای یک موقعیت نسبتا پیچیده از این نوع قبلا (فقط به خاطر browser compatibility) به java script متوصل شدم! :|

موفق باشی

amirabbas_p30magazine · May 9, 2007

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

به این شکل

Ali_ix · May 9, 2007

amirabbas_p30magazine گفت:
البته یه شیوه دیگه هم هست که دن سدرهام اختراعش کرده. اسمش Faux Columns هست
اگر فرصت بشه مقالش رو می نویسم. شما میتونی در این روش دو تا ستون در چپ و راست صفحه داشته باشی که در پس زمینه این دو تا ستون میتونی عکس قرار بدی (البته با شرایط خاص) بعد با بزرگ و کوچیک کردن پنچره مرورگر این دو ستون درست هم اندازه ستون اصلی و وسطی هستند

به این شکل

ممنون امیر عباس جان،

این لینک مطلبی هستی که گفتند: http://alistapart.com/articles/fauxcolumns

البته روش متفاوتی نیست. اینجا هم (مثل test2) بک گراند کلی در نظر گرفته شده و به Body اختصاص داده شده. و در واقع بک گراند تا پایین ادامه داره و اون ستونه بازهم کوتاه و بلند هستند. که خب از نظر ظاهری درسته و اهمیتی نداره.

parsinet · Jun 7, 2008

سلام ،
دوستان عزیز من می خوام از تگ div استفاده کنم که هنگام بزرگ و کوچک کردن صفحه مرورگر جاش تغییر نکنه و در همه حالت
یکسان باشه ، لطفا راهنمایی کنید
ممنون

echessdesign · Jun 7, 2008

HTML:

 <div style="position: absolute; top: 10px; left: 5px; width: 240px; height: 150px; background-color: pink;">

چطور میشه از یکسان بودن دو ستون div در کنار یکدیگر اطمینان داشت

NabiKAZ

Well-Known Member

پیوست ها

Ali_ix

Well-Known Member

echessdesign

مدیر انجمن طراحی وب

echessdesign

مدیر انجمن طراحی وب

Ali_ix

Well-Known Member

NabiKAZ

Well-Known Member

NabiKAZ

Well-Known Member

Ali_ix

Well-Known Member

amirabbas_p30magazine

Member

Ali_ix

Well-Known Member

parsinet

Member

echessdesign

مدیر انجمن طراحی وب

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها