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

NabiKAZ · Jul 4, 2006

سلام
يه مدته زديم تو کار div .
چند تا سوال کوچولو هست که ممنون ميشم راهنمايي کنيد.

1. تا چه حد استفاده از div رو بجاي table پيشنهاد ميکنيد. لطفا در اين باره کمي توضيح بديد و نظر بديد.

2. اول بگيد ببينم کدوم يکي از اين کد ها بيشتر با اصول طراحي همخوني داره.
البته در نظر بگيريد که مقصود جدول بندي بزرگ نيست ، بلکه هدف تراز بندي چند عکس و نوشته کم مي باشد.

HTML:

<table border="1" width="300" id="table2" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#000000">
		<tr>
			<td width="50%" align="center">a</td>
			<td width="50%" align="center">a</td>
		</tr>
</table>

HTML:

<center>
<div style="width:300px; border: 1px solid #000000;">
<div style="width:50%; float:right; border-left: 1px solid #000000;">a</div>
<div style="width:50%; float:right">a</div>
</div>
</center>

3. دو کد زير رو مقايسه کنيد، به نظر مياد با هم فرقي نميکنند. ولي اگر اجراشون کنيد تفاوت رو ميبينيد. به قسمت پايين تصوير توجه کنيد.
اين تفاوت از کجا ناشي ميشه.

HTML:

<div style="border: 1px solid #000000; width:150px;">
<img border="0" src="#" width="150" height="60">
</div>

HTML:

<div style="border: 1px solid #000000; width:150px;">
<img border="0" src="#" width="150" height="60"></div>

4. توسط table ها ميشه نوشته درونش رو middle کرد، در مورد div چطور ميشه اين خاصيت رو ست کرد (منظور valign=middle است)
اين دو کد رو با هم مقايسه کنيد:

HTML:

<table border="1" width="31%" id="table1" height="84" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#000000">
	<tr>
		<td valign="middle">salam</td>
	</tr>
</table>

HTML:

<div style="width:282px; height:100px; border: 1px solid #000000;">
salam
</div>

5. در مورد table ها ميشه ارتفاعي در حد چند پيکسل براي اونها قرار داد که در خيلي جاها ميتونه مفيد باشه ، اما در مورد div اينکار امکان پذير نيست، راه حل چيست؟
مقايسه کنيد:

HTML:

<table border="0" width="100%" id="table3" cellspacing="0" cellpadding="0" height="4" bgcolor="#F7F7F7">
	<tr>
		<td></td>
	</tr>
</table>

HTML:

<div style="height:4px; background-color:#F7F7F7;">
</div>

6. اين کد دو خروجي مشابه دارد، بفرمائيد کداميک اصولي تر است (هم از نظر نسبي و هم مطلق)
(تصویر ضمیمه است)

HTML:

<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<style>
INPUT {
	color: #000080; font-family: Tahoma; font-size: 10pt; border-style: solid; border-width: 1px; background-color: #D6EEFF; background-image: url('images/back_button.gif')
}
#input_en {
	direction: ltr; text-align: left; background-color: #F5FBFF; background-image: url('');
}
#input_fa {
	direction: rtl; text-align: right; background-color: #F5FBFF; background-image: url('');
}
</style>
</head>
<body>
	<br>
&nbsp;<form method="POST" action="../mozeh/admin.php">
<div align="center">
  <center>
<table border="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111" width="262" id="table1" height="167" dir="rtl">
    <tr>
      <td width="80%" colspan="2" height="20">
<img border="0" src="http://forum.majidonline.com/images/title_password.gif" width="264" height="54"></td>
    </tr>
    <tr>
      <td width="37%" height="36" bgcolor="#EFEFEF" style="border-right: 1px solid #000000">
      <p align="left" style="text-align: center"><font face="Tahoma" size="2">
		نام کاربری:</font></td>
      <td width="56%" height="36" bgcolor="#EFEFEF" style="border-left: 1px solid #000000">
  <p align="center" dir="ltr">
  <font face="Tahoma">
  <input name="User" size="18" id="input_en" style="float: right"></font></p>
      </td>
    </tr>
    <tr>
      <td width="37%" height="32" bgcolor="#EFEFEF" style="border-right: 1px solid #000000">
  <p align="left" style="text-align: center"><font face="Tahoma" size="2">کلمه 
	عبور:</font></td>
      <td width="56%" height="32" bgcolor="#EFEFEF" style="border-left: 1px solid #000000">
		<p dir="ltr"><font face="Tahoma">
      <input name="Pass" size="18" type="password" id="input_en" style="float: right"></font></td>
    </tr>
    <tr>
      <td width="80%" colspan="2" bgcolor="#F7F7F7" style="border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000">
  <p align="center" style="text-align: center">
  <input type="submit" value="   ورود...   " style="border:1px solid #646464; font-family: Tahoma; font-size: 10pt; background-color:#EFEFEF"></td>
    </tr>
  </table>
  <p align="center">&nbsp;</p>
  
<div align="center">
<img border="0" src="http://forum.majidonline.com/images/title_password.gif" width="264" height="54"><div style="width:264px; border-left:1px solid #000000; border-right:1px solid #000000; border-bottom:1px solid #000000; background-color:#F7F7F7;">
<div style="height:8px; background-color:#EFEFEF;">
</div>
<div style="width:37%; height:30px; float:right; background-color:#EFEFEF;">
<font face="Tahoma" size="2">نام کاربری:</font></div>
<div style="width:63%; height:30px; float:right; background-color:#EFEFEF;">
<input name="User" size="18" id="input_en" style="float: right"></div>

<div style="width:37%; height:30px; float:right; background-color:#EFEFEF;">
<font face="Tahoma" size="2">کلمه عبور:</font></div>
<div style="width:63%; height:30px; float:right; background-color:#EFEFEF;">
<input name="User" type="password" size="18" id="input_en" style="float: right"></div>

<div style="height:8px; background-color:#F7F7F7;"></div>


<div style="height:33px; width:262px">
<input type="submit" value="   ورود...   "></div>

</div>
</div>

  </center>
</div>
  <p align="center">
  <font face="Tahoma" size="2">
	&nbsp;<input type="hidden" value="login" name="Flag"></font></p>
</form>
</div>
</center>

</body>

</html>

باتشکر
نبي

echessdesign · Jul 5, 2006

دوست عزیز, سوالهایتان را یه تر تیب جواب میدهم
1- استفاده از CSS برای تعیین Layout صفحه نسبت به بقیه روش ها, مثل جداول, مزایاس بیشتری دارد. اول اینکه CSS برای ساختن Layouts liquid بسیار مفید است. منظور از Liquid Layouts, Layout هایی هستند که بنا به اندازه مانیتور کاربر گسترش یافته و یا جمع می شوند. به علاوه, جداکردن دستورات تعیین کننده Layout از محتویات صفحه بدین معنی است که میتوان آن Layout را به کل صفحات موجود در یک وب سایت اعمال کرد. بدین ترتیب با تغییر دادن آن فایل CSS می توانیید Layout کل وب سایت را تغییر دهید. استفاده از CSS به همراه HTML حجم صفحات وب را کاهش می دهد.
عیب اصلی CSSو خصوصا در باره Layout صفحه , این است که برنامه های مرورگر قدیمی از آن پشتیبانی نمی کنند و یا آن را بد تشخیص میدهند. به خصوص Netscape 4.x با صفحاتی که به وسیله CSS طراحی می شوند سازگاری ندارند. و حتی برنامه های مرورگر فعلی نیز در بعضی از موارد اشتباه میکنند و یا نسبت به آنچه که صحیح هست دچار شک و شبه می شوند.

2- کد دوم که با CSS برای طراحی وب با انگیزه CSS .بهتر است. اما کامل نیست و اشتباهات زیادر در آن است
مثلا شما اگر هدفتا این است که div مورد نظر شما center شود باید اینگونه بنویسید:

HTML:

 <div align:center>

و اینکه شما برای تعیین موقعیت المان به صورت کامل, حالات relative و یا aboulute را مشخص نکردید.
برای تراز کردن در حالت center شما می توانید به این شکل هم عمل کنید:

HTML:

 <div style="margin:0 auto;></div>"

3- به علت اینکه شما تگ div را در خط بعدی بستید به این شکل در آمده. البته این موضوع رو هم باید متذکر شوم که هدف شما از تعریف این نوع Style چی بود؟ زیرا که من در طراحی CSS هایه شما مشکلات عدیده ای, ناشی از کمبود اطلاعات شما در این زمینه میبینم.

4- برای به وجود آوردن حالت middle در CSS ها چندین روش وجود دارد. مثلا یک روش این است که شما padding مساوی میدهید. به مثال زیر توجه کنید:

HTML:

 <div style="margin:0px auto;width:312px;text-align:center;border:1px solid black;background:gold;"><img src="#" width="300" height="50" style="border:6px solid gold;"></div>

HTML:

 <img src="#" style="padding:5px;background:gold;border:1px solid black;">

5- اگر منظور شما ایجاد فاصله در اطراف div مورد نظر هست, شما می توانید از padding استفاده کنید:

HTML:

 <div style="padding:4px 0 0 0; background-color:red;">
</div>

6- در فرم دومی که طراحی کردید با CSS ضعف های بسیاری دیده می شود. شما از تگ هایی استفاده کردید که از رده خارج شده و W3C.org استفاده از آن را به صورت استاندارد مجاز نمیداند. مثلا:

HTML:

 background-color: #D6EEFF; background-image: url('images/back_button.gif')  <table height="167">

و اینکه شما برای تگ های img وضعیت alt="" را مشخص نکردید. بهتر هست برای دکمه ها, نشان دادن دست را طبق استاندارد W3C.org به صورت: cursor

ointer و برای IE به صورت cursor:hand در نظر بگیرید. توجه داشته باشید که نوشتن هر دو ضروری است.

شما می توانیید برای خطا یابی CSS خود, از سایت مرجع: http://jigsaw.w3.org/css-validator/ استفاده کنید.
بزودی جهت رفاه حال دوستان, آموزش حرفه ای CSS را شروع خواهم کرد. هر کدام از دوستان که تمایل به همکاری دارند, می توانیم تجربایت خود را به دوستان دیگر عرضه کنیم. موفق باشید.

NabiKAZ · Oct 20, 2006

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

3. هدف ایجاد یه کادر با حاشیه بوده که توی اون عکس یا نوشته قرار بگیره، درست کاری که table انجام میده.
اطلاعات من هم کمه ولی دارم از شما کسب تجربه میکنم. همچنین اگر منبع مفیدی داشتید ممنون میشم بگید تا استفاده کنیم.

4. به نظرم توضیحی که برای حالت middle دادید کمی غیر اصولیه. شما با استفاده از border همرنگ زمینه سعی کردید تصویر رو در مرکز div قرار بدید ؟! منظور من از middle تساوی top و bottom نسبت به div بود. یعنی بالا پایین برابر باشند ولی فاصله از چپ و راست دست خودمون باشه...

6. در مورد منعیاتی که فرمودید بهتر بود تصحیحات رو هم میفرمودید!

در مورد cursor:hand متوجه نشدم برای چی مطرحش کردید، یادم نمیاد در کدهام لزومی به این متد بوده باشه !
آموزش حرفه ای css هم من که پایم چون خیلی بهش علاقه پیدا کردم. شما وعدشو دادید ولی الان که 3 ماه گذشته فعلا که خبری نیست !

باز هم از وقتی که گذاشتید ممنونم
نبی

NabiKAZ · Oct 20, 2006

دو تا سوال دیگه ...

اولی...
تفاوت نمايش کد زير در IE و FireFox (منظور حاشيه اضافي سمت چپ است) از کجا ناشي ميشه و راه حذف اين حاشيه چيست؟

HTML:

	<table border="1" width="100%" style="border-collapse: collapse; margin: 0px;" bordercolor="#000000">
		<tr>
			<td>
				<ul style="list-style-type: none; margin: 0px;">
					<li style="FLOAT: left;">aaaaa</li>
					<li style="FLOAT: left;">bbbbb</li>
					<li style="FLOAT: left;">ccccc</li>
				</ul>
			</td>
		</tr>
	</table>

دومی...
به کد زير يه نگاهي بندازيد. زماني که عرض پنجره مرورگر را خيلي کم ميکنيم بلوک سمت راست به زير بلوک سمت چپ ميرود. چطور ميشه ترتيبي داد تا درست در لحظه اي که بلوک چپ و راست به يکديگر ميرسند به همان شکل در کنار هم باقي بمانند در عوض اسکرول پنجره مرورگر ظاهر شود.
ترجيحا شيوه قرار گيري div ها مانند نمونه باشد.

HTML:

<div style="width:100%; height: 180px; background-color:#C1FFA4">

	<div style="FLOAT: left; width:350px; height:180px; background-color:#0A065B">
	<font size="7" color="#FFFFFF">چپ</font></div>
	
	<div style="FLOAT: right; width:350px; height:180px; background-color:#0A065B">
	<p align="right"><font size="7" color="#FFFFFF">راست</font></div>

</div>

مورد بالا فقط زماني رخ ميده که دو بلوک div باشند در صورتي که از تصوير استفاده بشه مثل کد زير مشکلي نيست(البته مشکل که هست چون فقط توی IE درسته ، توی FiewFox به هیچ صراطی مستقیم نیست و تحت هر شرایطی عکس اول زیر عکس دیگر میرود!!!) :

HTML:

<div style="width:100%; height: 180px; background-color:#C1FFA4">
	<img border="0" src="pic1.gif" width="400" height="190" align="left"><img border="0" src="pic1.gif" width="400" height="190" align="right"></div>

تشکر
نبی

NabiKAZ · Oct 22, 2006

پاسخ سوال آخرم رو پیدا کردم:

کد:

 body {
min-width: 760px;
}

البته متاسفانه تنها روی FireFox خوب کار میکنه و با IE سازگار نیست !

NabiKAZ · Oct 22, 2006

سلام ،

اسم این تاپیک رو کاملا مناسب انتخاب کردم ، تاپیک سوالات... ! دقت کنید تاپیک سوال و جواب نیست ها !!! چون با احترام به آقا احسان فقط توش سوال پرسیده میشه ولی از جواب خبری نیست !!!

یه سوال دیگه ...

زمانی که دو تا div کنار هم قرار دارند، چطور میشه یکی خود به خود به اندازه دیگری به صورت عمودی کشیده بشه تا اندازه دیگری بشه.
مثلا این کد رو ببینید:

HTML:

<div>

<div id= "c1" style="width:200px; height:100%;  float:left; background-color:#E0EFFC">
menu
</div>

<div id= "c2" style="width:200px; float:left; background-color:#FFCCFF">
ojsf g[sojfd gso[j dfgosj odfjg [sojdf[gjsodjfg[ojs[dfjg[ sjd[fog[sjdfogjs [dfjg 
[sjodfgj [sjdfogjs[dfjgsojdf[gjs ojdf og[sj[df jg[sodjf gsihdfgios 
herioghseorgha egu ihergiospehr</div>

</div>

ستون c1 مربوط به منوهای سایت است میخوایم به اندازه c2 به صورت عمودی کشیده بشه تا هر دو ار نظر ارتفاعی یکسان بشن.

یه سرچ کردم یه کد جالب پیدا کردم ، این لینکش:
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

یه کد جاوا معرفی کرده که کارش کشیدن یک ستون به اندازه دیگریه ! اینم نمونش در ستون های مختلف:
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm

ولی آیا راه ساده تری وجود نداره ؟!

تشکر
نبی

NabiKAZ · Oct 22, 2006

در ادامه سوال آخر...

از اینم میشه استفاده کرد:

HTML:

<script type=text/javascript>
document.getElementById("c1").style.height=document.getElementById("c2").offsetHeight+"px";
</script>

اما آیا باید از جاوا استفاده کرد؟ استایلی وجود ندارد ؟!

NabiKAZ · Oct 22, 2006

و باز هم سوال !

چرا این کار نمیکنه:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<div style="margin:200; ">
oo [r pkw er[gwk [rgwi ehjr iej'ierjg 'ier 'ig 'eripogj'ose g'pojergouj er oguj  eorgdlf jgoerogjsldfjgoergj'seorjg's djfgoie hrg'ierg</div>

ولی این کار نمیکنه:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div style="margin:200; ">
oo [r pkw er[gwk [rgwi ehjr iej'ierjg 'ier 'ig 'eripogj'ose g'pojergouj er oguj  eorgdlf jgoerogjsldfjgoergj'seorjg's djfgoie hrg'ierg</div>

با استاندارد ها تناقض نداره اگر از همون کد دومی استفاده کنیم ؟
کد اولی رو میشه مشکلش رو رفع کرد؟

تشکر
نبی

NabiKAZ · Oct 23, 2006

سلام

چرا هیچکسی اینجا تحویل نمیگیره ؟!!!
حداقل یکی پیدا بشه بگه بلد نیستم که بفهمیم این تاپیک باز میشه !

خب...

بازم یه سوال دیگه ،

چرا این کد باید درست کار کنه:

HTML:

<div style="line-height:300%">							
	aaaaaa<br>
	bbbbbb<br>
</div>

ولی این کد درست کار نمیکنه:

HTML:

<div style="line-height:300%">							
	aaaaaa<img border="0" src="#" width="15" height="15"><br>
	bbbbbb<img border="0" src="#" width="15" height="15"><br>
</div>

مشکل فقط با IE است ، با FireFox هیچکدوم مشکل ندارند.

این بد قلقی های div دیگه داره عذاب آور میشه ، ولی شاید ارزشش رو داشته باشه ، نظر شما هم همینه؟!

تشکر
نبی

tabib_m · Oct 23, 2006

چرا هیچکسی اینجا تحویل نمیگیره ؟!!!
حداقل یکی پیدا بشه بگه بلد نیستم که بفهمیم این تاپیک باز میشه !

اول بگم که من بلد نیستم

آخه این همه سوال رو همینجا نوشتی ، وقتی من نوعی میام اینا رو می بینم ، از ترسم از این همه سوال جواب نمیدم.
جدا جدا بذار ، تا روشون فکر بشه

موفق باشید

echessdesign · Oct 23, 2006

دو تا سوال دیگه ...
تفاوت نمايش کد زير در IE و FireFox (منظور حاشيه اضافي سمت چپ است) از کجا ناشي ميشه و راه حذف اين حاشيه چيست؟
جواب شما

HTML:

 <style type="text/css"> html, body {padding:0; margin:0;}  ul, li {padding:0; margin:0;} li {text-align:left;} </style>

زماني که عرض پنجره مرورگر را خيلي کم ميکنيم بلوک سمت راست به زير بلوک سمت چپ ميرود. چطور ميشه ترتيبي داد تا درست در لحظه اي که بلوک چپ و راست به يکديگر ميرسند به همان شکل در کنار هم باقي بمانند...
جواب شما:
در صورتی که BOX اولی که شما طراحی می کنید که LeftBox و RightBox را در بر می گیرد، بر حسب 100% باشد، شما باید 2 Box دیگر را نیز بر حسب 100% بگیرید. اگر بر حسب Pixel باشد، 2 Box دیگر نیز باید بر حسب Pixel باشد.

HTML:

  <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<title>Untitled 2</title>
<style type="text/css">
#wrp {
	width:100%;
	background:silver;
	padding:0;
	margin:0;
}
#wrp .LeftBox, #wrp .RightBox {
	padding:0;
	margin:0;
	width:30%;
	height:150px;
	background:green;
	float:left;
}
#wrp .RightBox {
	background:blue;
	float:right;
}
</style>
</head>
<body>
<div id="wrp">
   <div class="LeftBox"></div>
   <div class="RightBox"></div>
</div>
</body>

</html>

و یا :

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">
#wrp {
	width:740px;
	background:silver;
	padding:0;
	margin:0;
}
#wrp .LeftBox, #wrp .RightBox {
	padding:0;
	margin:0;
	width:200px;
	height:150px;
	background:green;
	float:left;
}
#wrp .RightBox {
	background:blue;
	float:right;
}
</style>
</head>
<body>
<div id="wrp">
   <div class="LeftBox"></div>
   <div class="RightBox"></div>
</div>
</body>

</html>

زمانی که دو تا div کنار هم قرار دارند، چطور میشه یکی خود به خود به اندازه دیگری به صورت عمودی کشیده بشه تا اندازه دیگری بشه؟
جواب شما: بسیار سادست، خصوصیاتی که برای c1 در نظر گرفته اید، به c2 نیز خصیصه مشترک اعمال کنید:

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"></div>
<div class="c2"></div>
</body>

</html>

------------------------
چرا این کار نمیکنه:

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<div style="margin:200; ">
oo [r pkw er[gwk [rgwi ehjr iej'ierjg 'ier 'ig 'eripogj'ose g'pojergouj er oguj  eorgdlf jgoerogjsldfjgoergj'seorjg's djfgoie hrg'ierg</div>

دوست عزیز، شما به جای اینکه وقت خود را، سعی در طرح پی در پی سوالهای کم توجه کنید، بیشتر به کدی که می نوسید توجه کنید. همین بی توجه هی های کوجک، شما را از انجام امور بزرگ باز می دارد. سپاس گزارم.
جواب شما:
شما اصلا مشخص نکردید که مقداری که برای خصیصه margin در نظر گرفته ای، بر حسب Pixel هست یا % درصد !!!!

echessdesign · Oct 23, 2006

بازم یه سوال دیگه ،

چرا این کد باید درست کار نمیکنه:

HTML:

 <div style="line-height:300%">							
	aaaaaa<img border="0" src="#" width="15" height="15"><br>
	bbbbbb<img border="0" src="#" width="15" height="15"><br>
</div>

جواب شما:

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">
body {
	line-height:300%;
}
img {
	border:0;
} 
</style>
</head>
<body>
					
	aaaaaa &nbsp; <img src="echessdesign.com" alt="" /> <br />
	bbbbbb &nbsp; <img src="echessdesign.com" alt="" /> <br />
</body>
</html>

NabiKAZ · Oct 25, 2006

tabib_m گفت:
اول بگم که من بلد نیستم

آخه این همه سوال رو همینجا نوشتی ، وقتی من نوعی میام اینا رو می بینم ، از ترسم از این همه سوال جواب نمیدم.
جدا جدا بذار ، تا روشون فکر بشه

موفق باشید

بازم معرفت شما که یه جوابی دادی

NabiKAZ · Oct 25, 2006

ظاهرا قالب تغییر کرده و دکمه تشکر در زیر پستها رو نمیبینم.
خواستم از آقا احسان تشکر کنم ...
روشون کار میکنم مشکلی بود باز مزاحم میشم.
ضمنا فکر میکنم جواب تمامی سوالام در صفحه قبل داده نشده ... حالا !

تشکر
نبی

NabiKAZ · Nov 2, 2006

سلام .

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

در مورد جواب سوالی که پرسیدم چطوری میشه دو تا ستون به اندازه هم باشند. کدی که گذاشتید نه تو FF و نه توی IE کار نکرد ! شما خودت امتحانش کردید؟

در مورد ایجاد فاصله بین خطوط و line-height:300% هم کدی که دادید تنها در FF کار میکنه و در IE کار نمیکنه. البته در همین راستا این کد هم ببینید:

HTML:

<ul style="list-style-image: url('dot.gif'); line-height:300px;">
	<li>asdasd</li>
	<li>asdasd</li>
	<li>asdasd</li>
</ul>

مسیر عکس رو خودتون درست کنید. میبینید که در IE تصویر هم تراز با نوشته نیست !!!

تشکر
نبی

NabiKAZ · Nov 2, 2006

یه سوال کوچیک دیگه.

چرا باید این کد در FF و IE نتیجه متفاوت داشته باشه !

HTML:

<body style="margin:0px;">
<div><p>majidonline</p></div>

در FF یک خط خالی اضافه میده !
چطور میشه این خط اضافه رو حذف کرد.

نبی

echessdesign · Nov 3, 2006

سلام نبی جان متوجه منظور شما شدم.
وقتی شما در این حالت یک عکس رو list-style-image قرار میدی، line-height برای اون صدق نمی کنه. یعنی بر روی عکس تعصیری نمیزاره.
شما باید این روش رو انجام بدی:

HTML:

   <style type="text/css">  ul, li {paddng:0; margin:0; list-styel:none; }  li { padding-left:10px; background: transparent url('echess.jpg') left center no-repeat;   </style>

چرا باید این کد در FF و IE نتیجه متفاوت داشته باشه !
جواب شما:

HTML:

  <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>asdasd</title>
<style type="text/css">
p, body {margin:0; padding:0;}
</style>
</head>

<body>
<div><p>majidonline</p></div>
</body>

</html>

echessdesign · Nov 3, 2006

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

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

mossy · Nov 3, 2006

سلام

شرمنده پا برهنه میپرم وسط بحث!
سوالات خوبیه اما ترتیب نداره و خیلی زیاده و برای همین پاسخ هر چقدر هم که کامل باشه وقت زیادی میگیره از شما
بهتون پیشنهاد میکنم ماکرومدیا دریم ویور رو بگیرید و نصب کنید macromedia dreamviewer
بهترین ابزار طراحی صفحات سی اس اس میتونه باشه به نظر من
هم ولیدتور داره هم اینکه اشکالات رو برات تسطیح میکنه و هم اینکه کدها رو وقتی خط به خط مینویسی ساجستور داره که خیلی کارت رو راحت میکنه

حتما یه امتحانی بکن
من ورژن 8 رو دارم خیلی کارم رو راه میندازه
نه فقط برای سی اس اس بلکه برای کلیه ی زبانهای برنامه نویسی آنلاین و صفحات اچ تی ام ال روشهای جالب و استانداردی رو مطابق w3c ارائه کرده که نون بقیه ادیتور ها رو آجر کرده

موفق باشید
یا علی