چند تا سوال ریز درمورد تگ div

NabiKAZ

NabiKAZ

Well-Known Member
echessdesign گفت:
در مورد جواب سوالی که پرسیدم چطوری میشه دو تا ستون به اندازه هم باشند. کدی که گذاشتید نه تو Ff و نه توی Ie کار نکرد ! شما خودت امتحانش کردید؟

لطفا بیشتر توضیح بدین
کلیک کنید تا باز شود...

حتما تست کردم که میگم.
مال شما چون ستون ها کوتاه بودند و چیزی توشون نوشته نشده بود کار میکرد ولی این کد رو ببینید:
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=windows-1256" />
<title>Untitled 2</title>
<style type="text/css">
.c1, .c2 {
	width:200px; 
	height:100%;  
	float:left; 
	background:#E0EFFC;
}
.c2 {
	background:#FFCCFF;
}
</style>
</head>
<body>
<div class="c1">dsfsd fsdfsdfs<br>dsfsd fsdfsdfs<br>dsfsd fsdfsdfs<br>dsfsd fsdfsdfs<br></div>
<div class="c2">dsfsd fsdfsdfs<br></div>
</body>

</html>

تشکر
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
سلام این آموزش لز طریق margin منفی هست.
مطمینن مشکلت حل می شه:
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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>
</html>
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
echessdesign گفت:
سلام این آموزش لز طریق margin منفی هست.
مطمینن مشکلت حل می شه:
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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>echessdesign.com</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text",  "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://javascript.echessdesign.com/stylefilters/">CSS Library</a></div>

</div>
</body>
</html>
کلیک کنید تا باز شود...
 
NabiKAZ

NabiKAZ

Well-Known Member
سلام
از پاسخت ممنونم ولي به جواب نرسيدم ،
من كد شما رو در اينترنت اكسپلورر باز كردم ولي ارتفاع دو ستون راست و چپ يكي نبود !!!

نبي
 
NabiKAZ

NabiKAZ

Well-Known Member
خب! یادش بخیر اینجا !
تاپیک خوبی شده بود...گرچه هنوز هم سوالات بی جواب درش به چشم میخوره.... شاید بشه دوباره زندش کرد!

آخرین پست مربوط به 11 آذر 1385 بود.
اکنون 21 شهریور 1386 است.

××××××××××××××××××××

یه سوال داشتم گفتم همینجا بگم.

به این کد یه نگاهی بندازید و در IE6 و FireFox مقایسه کنید:
HTML: 
<div style="width:700px; height:100px; background:#ccc;">
	<h1 style="font:10pt tahoma; margin:30px; background:#eee;">salam</h1>
</div>

یه ایراداتی در نحوه نمایش در FireFox به چشم میخوره.

حالا به این کد نگاه کنید:
HTML: 
<div style="width:700px; height:100px; background:#ccc; border:1px solid #fff;">
	<h1 style="font:10pt tahoma; margin:30px; background:#eee;">salam</h1>
</div>

میبینید که در IE6 و FireFox یکسان نمایش داده میشه !

وقتی دو کد رو مقایسه کنید میبینید که تفاوت تنها در border:1px solid #fff; است.

سوال اینجاست ، مگر این کد چیکار میکنه که در نحوه نمایش در FireFox تا این حد تاثیر گذاره ؟!
حالا اگر نخوایم از border استفاده کنیم تکلیف چیه ؟!

تشکر
نبی
 
آخرین ویرایش:
mossy

mossy

Member
border: none;​
بايد درست بشه بدون اينكه حاشيه رو نمايش بده اما اين هم اصولش نيست چرا كه بايستي حالت شناور بودن يك ديويژن حتما مشخص باشه . ربطي به المنتهاي استفاده شده نداره.
دليل اينه كه هر استايل فرمت خودش رو داره و بايستي مقدارهاش مشخص باشه و اگر مشخص نباشه ممكنه در برخي مرورگرها طور ديگري عمل كنه كه كنترل شده نيست.
 
NabiKAZ

NabiKAZ

Well-Known Member
mossy گفت:
border: none;​
بايد درست بشه بدون اينكه حاشيه رو نمايش بده اما اين هم اصولش نيست چرا كه بايستي حالت شناور بودن يك ديويژن حتما مشخص باشه . ربطي به المنتهاي استفاده شده نداره.
دليل اينه كه هر استايل فرمت خودش رو داره و بايستي مقدارهاش مشخص باشه و اگر مشخص نباشه ممكنه در برخي مرورگرها طور ديگري عمل كنه كه كنترل شده نيست.
کلیک کنید تا باز شود...
نه نمیشه
قبلاً امتحانش کرده بودم ، البته border:0 رو . در هر حال هیچکدومش مشکل رو حل نکرد.

تشکر
 
tabib_m

tabib_m

Member
بهش که ور رفتم، فهمیدم که Firefox دنبال یک مبدأی برای شروع margin: 30px میگرده.
در صورتی که توی div مربوطه هیچ عبارتی وجود نداشته باشه و برای div هم هیچ border ی (مرزی) تعیین نشده باشه، فایرفاکس هیچ مبدأی برای ایجاد فاصله پیدا نمیکنه! که فکر میکنم این یک ایراد از طرف فایرفاکس باشه (جستجو نکردم، رو حساب فکر میگم!)
البته راه حل که داره، ولی خوب ایرادی هست که بررسیش خوبه :)
برای مثال میشه border رو transparent داد.

موفق باشید.
 
amirabbas_p30magazine

amirabbas_p30magazine

Member
اپرا هم مثل فایر فاکس نشونش میده
فقط IE اون margin رو به حساب میاره. من هر چی گشتم نتونستم چیزی پیدا کنم.
من این مشکل رو تو سایت سایت پوینت مطرح کردم. شاید اونجا کسی جواب بده
 
echessdesign

echessdesign

مدیر انجمن طراحی وب
درود بر شما
به نظر من IE کد ها را به اشتباه تفسیر می کنه، به صورت عادی، تفسیر درست کد ها همونی هست که OP, FF نشون میدهند.
اما اینجا خصیصه Border چه تاثیری داره برای من جای تعجب داره....
 
amirabbas_p30magazine

amirabbas_p30magazine

Member
خیلی جالب شد. تو CSS ما margin collapsing داریم ولی فکر نمی کردم margin collapsing روی عناصری که داخل هم قرار گرفته باشند هم عمل کنه. اینجا هم margin collapsing اتفاق میافته. این دو تا مقاله خیلی میتونه کمک کنه

http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php
و
http://www.search-this.com/2007/05/07/wheres-my-margin-gone-or-why-111/

برای رفع مشکل باید به اون div یک پیکسل padding اضافه کرد که margin های دو عنصر (0 برای div و 30 برای h1) با هم تماس نداشته باشند. اون border هم دقیقا همین کار رو می کرد و اجازه تماس margin ها با هم رو نمی داد تا margin collapse اتفاق بیافته. کد رو اگر اینطوری کنیم مشکل حل میشه

کد: 
<div style="width:700px; height:100px; background:#ccc; padding: 1px 0;">
	<h1 style="font:10pt tahoma; margin:29px 30px; background:#eee;">salam</h1>
</div>

دلیل اینکه IE صفحه رو به شکل دلخواه ما نشون میده برای اینه که این خودش یه باگ توی IE هستش. IE وقتی یه عنصری HasLayout داشته باشه ، margin اون عنصر collapse نمیشه. وقتی شما به یه عنصری width میدی اون عنصر از دید IE دارای haslayout میشه. حالا شما اگر اون width رو حذف کنی توی IE هم margin ها جمع میشن
 
NabiKAZ

NabiKAZ

Well-Known Member
خب! میبینم که ذهن همه اساتید رو به خودش مشغول کرده ، اصولاً من توی پیدا کردن اینجور ایرادات ریز و باگ های عجیب و غریب تبحر خاصی دارم :-D قبلاً یه اشکال عجیب توی اکسز پیدا کرده بودم که همه بعد از کلی تعجب اعتراف کردند باگ مایکروسافته. یا در مورد یکی از کمپوننت های vb ، ...
خب خود شیرینی بسه ;-)


طبیب جان border:1px transparent جواب نمیده ، اما border:1px solid #fff جواب میده ، که میشه رنگ حاشیه رو همرنگ زمینه انتخاب کرد، ولی فضای 1 پیکسلی که اشغال میکنه خیلی ستمه !!!

ولی خودم یه راه باحال پیدا کردم ولی خداییش بعد از اینکه دیدم جواب داد ، خودم کلی خندم گرفت ! :))
HTML: 
<div style="width:700px; height:100px; background:#ccc;"><span style="font-size:0;">&nbsp;</span>
	<div style="font:10pt tahoma; margin:30px; background:#eee;">salam</div>
</div>

شاید راه بهتری هم باشه.

تشکر
نبی
 
NabiKAZ

NabiKAZ

Well-Known Member
ببخشید پست آخر آقای امیرعباس رو بعد از اینکه اون پست بالایی رو نوشتم دیدم !
روش ایشون هم خوب بود. ولی حداقل مزیتی که روش من داشت این بود که نیازی نیست خودتون رو درگیر جمع و تفریق margin و padding کنید.
اون مقالات هم با اینکه فقط عکساشو دیدم به نظر جالب می اومدند. مخصوصاً از عکس اون کولیس دیجیتالیه خیلی خوشم اومد :D

تشکرات
 
amirabbas_p30magazine

amirabbas_p30magazine

Member
هم اون روشی که من گفتم و هم اون روشی که شما پیدا کردی هر جفتش این کار رو میکنه که اجازه نمیده مارجین دو تا عنصر با هم تماس داشته باشند. ایرادی که اضافه کردن تگ span هست اینه که این تگ span دیگه semantic نیست. شما کدی به صفحه اضافه می کنید که فقط برای نمایش ظاهر صفحه هست در صورتی که بر اساس طراحی استاندارد باید content از presentation جدا باشه.

مخصوصاً از عکس اون کولیس دیجیتالیه خیلی خوشم اومد
کلیک کنید تا باز شود...

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

خودش:
کد: 
http://www.iconico.com/caliper

شماره سریالش:
کد: 
8289-1412-2942
8138-4413-7426

و یه چیز به درد بخور دیگه هم داره که حین استفاده از این کولیس به درد می خوره اون هم ذره بینه

این هم لینک دانلود ذره بینش که مجانی هم هست
کد: 
http://www.iconico.com/magnifier/
 
آخرین ویرایش:
mossy

mossy

Member
اين كاليپر چه باحاله!
ممنون از اينكه معرفي كردي.
منم با اسپن و استايل داخل صفحه موافق نيستم!
پرزنت هميشه بايد از استايل جدا باشه كه به اميد خدا و لطف رزمندگان وب 2 انشاء الله اچ تي ام ال در آينده اي نه چندان دور ديگه از اين مدل غلط چيدمان در صفحات وب پشتيباني نخواهد كرد.
پس بكوشيد در تحصيل علوم آينده كه آخرت نزديك است:oops:
موفق باشيد
 
NabiKAZ

NabiKAZ

Well-Known Member
سلام ؛

در مورد این کد:

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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>title</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	list-style-type: none;
}
</style>
</head>

<body>

<ul>
	<li>title</li>
	<li>
		<ul>
			<li>item1</li>
			<li>item2</li>
		</ul>
	</li>
</ul>

</body>

</html>

آیا اینجا هم margin collapsing اتفاق می افتد؟
و یا یک bug IE است؟

اگر نخواهیم کلاس اختصاصی برای تگها تعریف کنیم راه حل چیست؟

متشکرم
نبی
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

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

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

بالا