PDA

View Full Version : سوال: برای طراحی tabel less از تگ li استفاده می کنید یا تگ div ؟


idocsidocs
دوشنبه 23 آبان 1390, 12:12 عصر
برای طراحی tabel less از تگ li استفاده می کنید یا تگ div ؟
Saber Mogaddas
دوشنبه 23 آبان 1390, 13:48 عصر
سلام
به نظر من table یه چیزه بسیار آشفته ایه..
فقط div less راحت مطمئن و پرآوزه..
idocsidocs
دوشنبه 23 آبان 1390, 14:29 عصر
فقط div less راحت مطمئن و پرآوزه.. مطمئنید که اسمش div less هست؟ شبیه به tabel less می مونه !

من خیلی جاها دیدم که از li استفاده می کنن. ایا دلیلی داره که از li استفاده می کنن؟
aliyeh
دوشنبه 23 آبان 1390, 14:41 عصر
استفاده از div و li در کنار هم مشکلی پیش نمیاره. تا جایی که من می دونم ترکیب این دو تا با هم هست. از div برای قسمت بندی صفحات و از li برای منوهای افقی و عمودی و همینطور متنهای فهرست وار استفاده میشه.
Saber Mogaddas
دوشنبه 23 آبان 1390, 14:49 عصر
نه من ظورم این بود که از Div استفاده کنید table منسوخ شده هست..فقط تو جدول های آماده مثل telerik استفاده میشه..
li یا همون لیست هم یکی از امکانات html هست واسه راحتی کار و جاهایی که به درد می خوره استفاده می شه..حتا میشه گروهی از div هارو با دستور display تو css به li لیست تبدیل کرد..امکان گزینه ایه ..
idocsidocs
دوشنبه 23 آبان 1390, 15:23 عصر
li یا همون لیست هم یکی از امکانات html هست واسه راحتی کار و جاهایی که به درد می خوره استفاده می شه..حتا میشه گروهی از div هارو با دستور display تو css به li لیست تبدیل کرد..امکان گزینه ایه .. من می خوام بدونم که توی طراحی بدون جدول، استفاده از دایو بهتره یا li ؟
Saber Mogaddas
دوشنبه 23 آبان 1390, 15:26 عصر
div و li شباهتی به هم ندارن ..
برای طراحی از div استفاده کنید..
idocsidocs
دوشنبه 23 آبان 1390, 16:18 عصر
div و li شباهتی به هم ندارن ..
برای طراحی از div استفاده کنید.. li خوبیش اینه که راحت می شه بهش پهنا و ارتفاع داد. انگار یه عنصر اینلاین و بلوک هست. ولی هنوز نمی دونم که چرا از li استفاده می شه ؟
Saber Mogaddas
دوشنبه 23 آبان 1390, 16:44 عصر
عزیز li همون به فارسی لیست هستش .. شما مثلا چند تا گزینه دارید مثل منو می تونید اینارو با li بنویسید..ولی کل سایتو که نمی شه با li درست کرد..شما داخل تگ های دیو جهایی لازم هست که بصورت گزینه ایی باشه لیستی از موضوعات باشه استفاده کنید..
ما li رو تو microfoft word هم داریم..به نظرم یه search بزن در مورد li تو گوگل و مطالعه کن در موردش..
موفق باشی..
idocsidocs
دوشنبه 23 آبان 1390, 18:05 عصر
ما li رو تو microfoft word هم داریم..به نظرم یه search بزن در مورد li تو گوگل و مطالعه کن در موردش..منکه نگفتم نمی دونم li چیه؟
خیلی جاها دیدم که برای طراحی بدون جدول از لیستها استفاده می شه.

البته فرم ها رو با لیست و بدون جدول طراحی می کنن. می خوام بدونم که چرا از دایو استفاده نمی کنن. شاید دلیلی دارن که اینکار رو می کنن.
Saber Mogaddas
دوشنبه 23 آبان 1390, 18:20 عصر
هر کس نسبت به اون قدری که اطلاعات داره استفاده می کنه..
کار درستی نیست..قالبندی با دیو بهتره و استاندارد تره..
idocsidocs
دوشنبه 23 آبان 1390, 18:57 عصر
کار درستی نیست..قالبندی با دیو بهتره و استاندارد تره.. وقتی از float استفاده می کنیم، ارتفاع عناصر فرزند در نظر گرفته نمی شه و ارتفاع تگ والد به صفر می رسه.

این مشکل رو شما چطور حل می کنید؟
Saber Mogaddas
دوشنبه 23 آبان 1390, 19:35 عصر
دستور زیر رو تست کنید برای li ها



line-height:10px;
idocsidocs
دوشنبه 23 آبان 1390, 19:51 عصر
دستور زیر رو تست کنید برای li ها



line-height:10px;

از این کد نمی شه برای تگهای دایو استفاده کرد؟
Saber Mogaddas
دوشنبه 23 آبان 1390, 20:09 عصر
بله میشه..ولی درست نیست برای div می تونید از margin-top یا margin-bottom بجاش استفاده کنید..
و یا می تونیم به گروهی از div ها که داخل یه div اصلی هستند display:inline; بدیم و بعد از line-height استفاه کنیم..
idocsidocs
دوشنبه 23 آبان 1390, 20:44 عصر
بله میشه..ولی درست نیست برای div می تونید از margin-top یا margin-bottom بجاش استفاده کنید..
طبق گفته شما الان از کدهای زیر استفاده می کنم ولی رنگ پس زمینه تگ والد مشخص نیست. شما برای این مشکل چیکار می کنید؟ البته باید بگم که ارتفاع تگ نامشخصه و نمی شه ارتفاع براش تعیین کرد.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabel less</title>
<style type="text/css">
.d1 { width:400px; background-color:#000; }
.d2 { float:left; width:200px; background-color:#F00; margin-top:5px; }
.d3 { float:right; width:200px; background-color:#00F; margin-top:5px; }
</style>
</head>

<body>
<div class="d1">
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
</div>
</body>
</html>

از کدهای زیر هم که استفاده کنم، ترتیب تگها به هم می خوره.



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabel less</title>
<style type="text/css">
.d1 { width:400px; background-color:#000; }
.d2 { float:left; width:200px; background-color:#F00; margin-top:5px; }
.d3 { float:right; width:200px; background-color:#00F; margin-top:5px; }
</style>
</head>

<body>
<div class="d1">
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2<br /><br /><br /><br /><br /></div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
</div>
</body>
</html>
Saber Mogaddas
دوشنبه 23 آبان 1390, 21:11 عصر
شما دقیقا چه چیزیی می خوایین داشته باشید؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
idocsidocs
دوشنبه 23 آبان 1390, 22:28 عصر
شما دقیقا چه چیزیی می خوایین داشته باشید؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

برای ارتفاع تگ والد باید چیکار کنم؟ چطور باید کاری کرد که ارتفاعش 0 نباشه؟
Saber Mogaddas
سه شنبه 24 آبان 1390, 16:22 عصر
سلام
شما یه مثال از چیزی که می خواهید و ضمیمه کنید من ارتفاع شو حل کنم..
idocsidocs
سه شنبه 24 آبان 1390, 16:44 عصر
سلام
شما یه مثال از چیزی که می خواهید و ضمیمه کنید من ارتفاع شو حل کنم..
همین کدی که قبلا دادم، فرض کنید تعداد (جفت) تگهای دایو فرزند داینامیک هستن و می تونن کم و زیاد بشن.



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabel less</title>
<style type="text/css">
.d1 { width:400px; background-color:#000; }
.d2 { float:left; width:200px; background-color:#F00; margin-top:5px; }
.d3 { float:right; width:200px; background-color:#00F; margin-top:5px; }
</style>
</head>

<body>
<div class="d1">
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
<div class="d2">d2</div><div class="d3">d3</div>
</div>
</body>
</html>
Saber Mogaddas
سه شنبه 24 آبان 1390, 17:06 عصر
الان فهمیدم منظورتو..
به d1 زیر رو اضافه کن..


overflow: hidden;


موفق باشی..
idocsidocs
سه شنبه 24 آبان 1390, 19:14 عصر
به d1 زیر رو اضافه کن..اگر ارتفاع تگهای در بر گیرنده کمتر از تگ والد باشن، این کد تاثیری نداره. من یه جالت کلی می خوام.
Saber Mogaddas
سه شنبه 24 آبان 1390, 19:21 عصر
منظورت رو متوجه نشدم..یعنی میگین اگه d2 , d3 کمو زیاد شن؟؟ یکم واضح تر..
idocsidocs
سه شنبه 24 آبان 1390, 20:20 عصر
منظورت رو متوجه نشدم..یعنی میگین اگه d2 , d3 کمو زیاد شن؟؟ یکم واضح تر..

تگ والد d2 , d3 ارتفاعش طوری باشه که رنگ پس زمینه نمایش داده بشه.
Saber Mogaddas
سه شنبه 24 آبان 1390, 20:39 عصر
ذاتا نمایش داده میشه..پس زمینه سیاه بین d2 d3 هست
hamid.shekasteh
سه شنبه 24 آبان 1390, 22:44 عصر
سلام.من متن گفتگو رو خوندم.

فکر می کنم چیزی که می خواین با تغییر d1 به صورت زیر حاصل بشه.



.d1
{
width: 400px;
background-color: #000;
float :left;
}