توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : سوال ایجاد جدول css
ndr053
02-18-2012, 05:38 PM
سلام
آشنایی چندانی با css ندارم
آیا ممکن چنین جدولی رو روی ادیتور پیاده کنم؟
<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>
در واقع این جدول یه index داره که کد head و body توشه و یه فایل css جدا داره
sepastian
02-18-2012, 05:59 PM
سلام
آشنایی چندانی با css ندارم
آیا ممکن چنین جدولی رو روی ادیتور پیاده کنم؟
<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>مجموعه-جداول-لیست-قیمت-های-css-زیبای-وب/
در واقع این جدول یه index داره که کد head و body توشه و یه فایل css جدا داره
میتونی از کد های ایندکس و استایل اینها در سورس قالب سایت خودت یا نوشته ی مطلب خودت تو جوملا استفاده کنی
ndr053
02-18-2012, 06:37 PM
میتونی از کد های ایندکس و استایل اینها در سورس قالب سایت خودت یا نوشته ی مطلب خودت تو جوملا استفاده کنی
مرسی از شما
در واقع این نوع جدولو تو بعضی از مطالب میخوام بکار ببرم نه در جایی مشخص
shmata
02-18-2012, 06:52 PM
مرسی از شما
در واقع این نوع جدولو تو بعضی از مطالب میخوام بکار ببرم نه در جایی مشخص
این امکان (ایجاد Table) در ادیتور پیش فرض جوملا (Tiny MCE)گنجانده شده است
برای استفاده از این امکان شما باید ادیتور جوملا تون رو در حالت پیشرفته ست کنید.برای قرار دادن ادیتور در حالت پیشرفته باید :
به مدیریت پلاگین ها بروید و پلاگین Editor - TinyMCE 2.0 بعد از قسمت پارامترها درفیلد تابعی برروی توسعه یافته ست کنید .
بعد از آن به مدیریت مطالب بروید و دکمه Insert a new table یکی از امکانات این ادیتور است که فعال میشود
ndr053
02-18-2012, 07:06 PM
این امکان (ایجاد Table) در ادیتور پیش فرض جوملا (Tiny MCE)گنجانده شده است
برای استفاده از این امکان شما باید ادیتور جوملا تون رو در حالت پیشرفته ست کنید.برای قرار دادن ادیتور در حالت پیشرفته باید :
به مدیریت پلاگین ها بروید و پلاگین Editor - TinyMCE 2.0 بعد از قسمت پارامترها درفیلد تابعی برروی توسعه یافته ست کنید .
بعد از آن به مدیریت مطالب بروید و دکمه Insert a new table یکی از امکانات این ادیتور است که فعال میشود
خیلی ممنون از پاسخ شما
بله من این ادیتور فعال کردم و مشکلی بابت اینسرت کرد table معمولی ندارم
ولی من میخوام دقیقا table که در پست اول لینک دادم درست بشه
همانطوری که گفتم این فایل یه فایل html داره که اینطوری نوشته شده:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>">
<html xmlns="<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>" xml:lang="en">
<head>
<title>Pricing Tables</title>
<meta <b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>"content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<!-- pricing table style (style_1.css - style_12.css) -->
<link rel="stylesheet" type="text/css" href="styles/style_1.css"/>
</head>
<body>
<!-- pricing table -->
<div class="p_table">
<!-- caption column -->
<div class="caption_column">
<ul>
<!-- column header -->
<li class="header_row_1 align_center radius5_topleft"></li>
<li class="header_row_2"><h2 class="caption">choose <span>your</span> plan</h2></li>
<!-- data rows -->
<li class="row_style_4"><span>Amount of space</span></li>
<li class="row_style_2"><span>Bandwidth per month</span></li>
<li class="row_style_4"><span>No. of e-mail accounts</span></li>
<li class="row_style_2"><span>No. of MySql databases</span></li>
<li class="row_style_4"><span>24h support</span></li>
<li class="row_style_2"><span>Support tickets per mo.</span></li>
<!-- column footer -->
<li class="footer_row"></li>
</ul>
</div>
<!-- column style 1 -->
<div class="column_1">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center"><h2 class="col1">starter</h2></li>
<li class="header_row_2 align_center"><h1 class="col1">$<span>10</span></h1><h3 class="col1">per month</h3></li>
<!-- data rows -->
<li class="row_style_3 align_center"><span>10GB</span></li>
<li class="row_style_1 align_center"><span>100GB</span></li>
<li class="row_style_3 align_center"><span>1</span></li>
<li class="row_style_1 align_center"><span>1</span></li>
<li class="row_style_3 align_center"><span>Yes</span></li>
<li class="row_style_1 align_center"><span>1</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
<!-- column style 2 -->
<div class="column_2">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center"><h2 class="col2">econo</h2></li>
<li class="header_row_2 align_center"><h1 class="col2">$<span>30</span></h1><h3 class="col2">per month</h3></li>
<!-- data rows -->
<li class="row_style_4 align_center"><span>30GB</span></li>
<li class="row_style_2 align_center"><span>200GB</span></li>
<li class="row_style_4 align_center"><span>10</span></li>
<li class="row_style_2 align_center"><span>10</span></li>
<li class="row_style_4 align_center"><span>Yes</span></li>
<li class="row_style_2 align_center"><span>3</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
<!-- column style 3 -->
<div class="column_3">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center"><h2 class="col3">standard</h2></li>
<li class="header_row_2 align_center"><h1 class="col3">$<span>59</span></h1><h3 class="col3">per month</h3></li>
<!-- data rows -->
<li class="row_style_3 align_center"><span>100GB</span></li>
<li class="row_style_1 align_center"><span>500GB</span></li>
<li class="row_style_3 align_center"><span>50</span></li>
<li class="row_style_1 align_center"><span>50</span></li>
<li class="row_style_3 align_center"><span>Yes</span></li>
<li class="row_style_1 align_center"><span>5</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
<!-- column style 4 -->
<div class="column_4">
<!-- ribbon (optional) -->
<!--<div class="column_ribbon ribbon_style1_new"></div>-->
<!-- /ribbon -->
<ul>
<!-- column header -->
<li class="header_row_1 align_center radius5_topright"><h2 class="col4">professional</h2></li>
<li class="header_row_2 align_center"><h1 class="col4">$<span>99</span></h1><h3 class="col4">per month</h3></li>
<!-- data rows -->
<li class="row_style_4 align_center"><span>Unlimited</span></li>
<li class="row_style_2 align_center"><span>1000GB</span></li>
<li class="row_style_4 align_center"><span>Unlimited</span></li>
<li class="row_style_2 align_center"><span>Unlimited</span></li>
<li class="row_style_4 align_center"><span>Yes</span></li>
<li class="row_style_2 align_center"><span>10</span></li>
<!-- column footer -->
<li class="footer_row"><a href="" class="sign_up radius3">sign up!</a></li>
</ul>
</div>
</div>
</body>
</html>
و دو فایل css به اسم style و main
shmata
02-18-2012, 07:12 PM
خوب این cssها را میخواهید به page تون لینک کنید ؟
ndr053
02-18-2012, 07:18 PM
خوب این cssها را میخواهید به page تون لینک کنید ؟
لینک نه دقیقا مثل همین توی خبر بزارم
shmata
02-18-2012, 07:26 PM
خوب اگر بخواهید در مطلب تون table بزنید که از مدیریت مطالب باید این اتفاق بیوفته
اگر برای تمام مطالب میخواهید یک چهار چوبی رو مشخص کنید.
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr>
<td><jdoc:include type="modules" name="right" style="xhtml"/></td>
<td><jdoc:include type="component" /></td>
<td><jdoc:include type="modules" name="left" style="xhtml"/></td>
</tr>
</table>
این دقیقا کاریست که در اون لینکی که در پست اولتون گذاشتید انجام شده
ndr053
02-18-2012, 07:38 PM
خوب اگر بخواهید در مطلب تون table بزنید که از مدیریت مطالب باید این اتفاق بیوفته
دقیقا منظورم همین بوده و منظور شمارو کامل متوجه شدم
ولی این یه table معمولی که نیست مثلا من با کدهای css که در فایل style.css قرار داره چکار کنم؟
shmata
02-18-2012, 07:42 PM
دقیقا منظورم همین بوده و منظور شمارو کامل متوجه شدم
ولی این یه table معمولی که نیست مثلا من با کدهای css که در فایل style.css قرار داره چکار کنم؟
اون کدها به صفحه لینک کنید
و در table از کلاسها و id های اون فایل css استفاده کنید .
ndr053
02-22-2012, 07:11 AM
کلی سر و کله زدم نتونستم
مثلا نمونه کدهای html و css زیرو دارم
دقیقاً کجا بزارم؟
و چطوری لینک کنم به هم؟
کد html:
<table class="pretty-table" summary="This table shows the sales figures for the four products in the Widget product line in 2007. The figures are broken down by quarter."> <caption>Widget sales figures, 2007</caption> <tr> <th scope="col">Product</th> <th scope="col">1st quarter</th> <th scope="col">2nd quarter</th> <th scope="col">3rd quarter</th> <th scope="col">4th quarter</th> </tr> <tr> <th scope="row">SupaWidget</th> <td>$9,940</td> <td>$10,100</td> <td>$9,490</td> <td>$11,730</td> </tr> <tr class="alt"> <th scope="row">WonderWidget</th> <td>$19,310</td> <td>$21,140</td> <td>$20,560</td> <td>$22,590</td> </tr> <tr> <th scope="row">MegaWidget</th> <td>$25,110</td> <td>$26,260</td> <td>$25,210</td> <td>$28,370</td> </tr> <tr class="alt"> <th scope="row">HyperWidget</th> <td>$27,650</td> <td>$24,550</td> <td>$30,040</td> <td>$31,980</td> </tr> </table>
کد css:
.pretty-table { padding: 0; margin: 0; border-collapse: collapse; border: 1px solid #333; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; color: #000; background: #bcd0e4 url("widget-table-bg.jpg") top left repeat-x; } .pretty-table caption { caption-side: bottom; font-size: 0.9em; font-style: italic; text-align: right; padding: 0.5em 0; } .pretty-table th, .pretty-table td { border: 1px dotted #666; padding: 0.5em; text-align: left; color: #632a39; } .pretty-table th[scope=col] { color: #000; background-color: #8fadcc; text-transform: uppercase; font-size: 0.9em; border-bottom: 2px solid #333; border-right: 2px solid #333; } .pretty-table th+th[scope=col] { color: #fff; background-color: #7d98b3; border-right: 1px dotted #666; } .pretty-table th[scope=row] { background-color: #b8cfe5; border-right: 2px solid #333; } .pretty-table tr.alt th, .pretty-table tr.alt td { color: #2a4763; } .pretty-table tr:hover th[scope=row], .pretty-table tr:hover td { background-color: #632a2a; color: #fff; }
shmata
02-22-2012, 08:09 AM
کدهای css را در فایل template.css یا template_rtl.css قالبتون
و کدهای html در هر جایی که تمایل دارید این جدول را ایجاد کنید (میتونه داخل index.php قالبتون باشه یا در یک ماژول html سفارشی)
ndr053
02-22-2012, 08:27 AM
دقیقاً همین کارو کردم
یعنی کد css به آخر template.css اضافه کردم
ولی متاسفانه یه table معمولی نشون میده
vBulletin® v4.2.5, Copyright ©2000-2026, Jelsoft Enterprises Ltd.