آموزش div [بایگانی] - برنامه نویس

behruz999

سه شنبه 25 بهمن 1390, 12:52 عصر

سلام
کسی میتونه در خصوص div ونحوه کارش و پارامترهائی که میگیره یه آموزش جامع بده؟
با سپاس:قلب:

shmata

یک شنبه 30 بهمن 1390, 11:21 صبح

این مقاله (http://www.w3schools.com/tags/tag_div.asp)را مطالعه بفرمایید

khanlo.javid

دوشنبه 01 اسفند 1390, 11:20 صبح

سلام .

این مقاله ای که گذاشتن محتواش انگلیسی هستش و من فکر کردم که شاید شما یه خورده تو زبان مشکل داشته باشید به خاطر همین واسه شما فارسی توضیح میدم.

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

به مثال زیر توجه کن:

<html>
<head>
<title>
test div tag
</title>
</head>
<body>
<center> < --! تگی برای وسط چین کردن تمامی عناصر یه صفحه -- >
<div style="width:850px">< !--تگ اصلی قاب یه سایت -- >
<div style="float:right;width:200px">< --!برای اینه که وقتی خواستی جدول بندی کنی جدول این جدول از سمت راست بچسبه به به تگ دایو بقلی float پارامتر -- >
<p>Div Tag 1</p>
</div>
<div style="float:right;width:400px">< --! جزء پارامتر های اصلی این تگه float پارامتر -- >
<p>Div Tag 2</p>
</div>
</div>
</center>
</body>
</html>

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

موفق باشی رفیق.

behruz999

دوشنبه 01 اسفند 1390, 11:27 صبح

سپاسگزارم دوست گرامی

jaafar1363

سه شنبه 14 شهریور 1391, 23:00 عصر

سلام دوست عزيز
من نحوه ايجاد Divهاي تو در تو رو مي خوام ياد بگيرم.
مثلا يه جدول داريم شامل 4 سطر(Row).و در سطر اول مثلا، 1 ستون / در سطر دوم، 3 ستون / در سطر سوم، 2 ستون و در سطر چهارم، 4 ستون داريم.

اينو با Div چطوري نمايش بدم؟

همانطور كه ميدونيد ايجاد اين جدول با Table خيلي ساده است(منظورم يا Rowspan و Colspan هست.)

سوال من اينه:
در طراحي با Div كه [Rowspan و Colspan ] نداريم، از چه كدي استفاده كنيم؟

فك كنم سوالم كامل و جامع بود.ممنون ميشم كمكمون كنيد.

zigoratsoft

چهارشنبه 15 شهریور 1391, 03:22 صبح

باید خاصیت float رو توسط css به دایو هاتون بدید.

جدولی که فرمودید رو من براتون نوشتم.

کدشو میذارم اگه دقت کنید کاملاً متوجه خواهید شد.

موفق باشید.

<center>
<div style="width:600px;">
<div style="width:600px; background-color:brown;">1</div>

<!***********************************************/>

<div style="float:right; width:200px; background-color:red;">2.1</div>
<div style="float:left; width:100px; background-color:blue;">2.3</div>
<div style="background-color:green;">2.2</div>

<!***********************************************/>

<div style="float:right; width:300px; background-color:blue;">3.1</div>
<div style="background-color:red;">3.2</div>

<!***********************************************/>

<div style="float:right; width:150px; background-color:red;">4.1</div>
<div style="float:right; width:150px; background-color:brown;">4.2</div>
<div style="float:left; width:150px; background-color:blue;">4.4</div>
<div style="background-color:green;">4.3</div>
</div>
</center>

khanlo.javid

چهارشنبه 15 شهریور 1391, 08:52 صبح

باید خاصیت float رو توسط css به دایو هاتون بدید.

جدولی که فرمودید رو من براتون نوشتم.

کدشو میذارم اگه دقت کنید کاملاً متوجه خواهید شد.

موفق باشید.

<center>
<div style="width:600px;">
<div style="width:600px; background-color:brown;">1</div>

<!***********************************************/>

<div style="float:right; width:200px; background-color:red;">2.1</div>
<div style="float:left; width:100px; background-color:blue;">2.3</div>
<div style="background-color:green;">2.2</div>

<!***********************************************/>

<div style="float:right; width:300px; background-color:blue;">3.1</div>
<div style="background-color:red;">3.2</div>

<!***********************************************/>

<div style="float:right; width:150px; background-color:red;">4.1</div>
<div style="float:right; width:150px; background-color:brown;">4.2</div>
<div style="float:left; width:150px; background-color:blue;">4.4</div>
<div style="background-color:green;">4.3</div>
</div>
</center>

دوست عزیز دقت کنید که تگ center منسوخ شده و به جای اون میتونید از margin:auto برای وسط چین کردن استفاده کنید.

موفق باشید.

zigoratsoft

چهارشنبه 15 شهریور 1391, 16:09 عصر

دوست عزیز دقت کنید که تگ center منسوخ شده و به جای اون میتونید از margin:auto برای وسط چین کردن استفاده کنید.

موفق باشید.

حق با شماست ولی خواستم کمتر از css استفاده کنم که دوستمون که تازه داره دایو رو یاد میگیره هم گیج نشه

khanlo.javid

چهارشنبه 15 شهریور 1391, 16:39 عصر

حق با شماست ولی خواستم کمتر از css استفاده کنم که دوستمون که تازه داره دایو رو یاد میگیره هم گیج نشه

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

zigoratsoft

چهارشنبه 15 شهریور 1391, 16:50 عصر

باشه اسلاحش کردم

<div style="width:600px; margin:0 auto;">
<div style="width:600px; background-color:brown;">1</div>

<!***********************************************/>

<div style="float:right; width:200px; background-color:red;">2.1</div>
<div style="float:left; width:100px; background-color:blue;">2.3</div>
<div style="background-color:green;">2.2</div>

<!***********************************************/>

<div style="float:right; width:300px; background-color:blue;">3.1</div>
<div style="background-color:red;">3.2</div>

<!***********************************************/>

<div style="float:right; width:150px; background-color:red;">4.1</div>
<div style="float:right; width:150px; background-color:brown;">4.2</div>
<div style="float:left; width:150px; background-color:blue;">4.4</div>
<div style="background-color:green;">4.3</div>
</div>

jaafar1363

پنج شنبه 16 شهریور 1391, 23:14 عصر

باید خاصیت float رو توسط css به دایو هاتون بدید.

جدولی که فرمودید رو من براتون نوشتم.

کدشو میذارم اگه دقت کنید کاملاً متوجه خواهید شد.

موفق باشید.

ممنونم ازت.ولي تو بعضي قالب ها ديدم كه بعد از چند تا دايو، كد زير هستش.اين كد چه كاري ميكنه؟

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

تشكر ويژه از khanlo.javid (http://barnamenevis.org/member.php?242715-khanlo.javid) و zigoratsoft (http://barnamenevis.org/member.php?256535-zigoratsoft)

zigoratsoft

جمعه 17 شهریور 1391, 00:45 صبح

خواهش میکنم دوست عزیز
این تگ برای ایجاد یک دایو خالی و در حقیقت یک فاصله به کار برده میشه
ولی اگه نمیدونید استایل clear:both چیه و چه کاری انجام میده به تاپیک زیر مراجعه کنید.
http://barnamenevis.org/showthread.php?125014

MsMahtab

پنج شنبه 29 فروردین 1392, 01:59 صبح

kheili mamnon tozihe khobi bod
ye pishnahad be dostan ,afzone ye fire bog ro to moror gare fire fix nasb konid ta betonid ba code haye html va css va ... site haye mokhtalef ashna shid.
shad o salamat o moafagh bashid