walid_8281500
03-23-2009, 07:27 PM
بسم الله الرحمن الرحيم..
هذا شرح طريقه عمل قائمه فيديو بلغه الـCss وهي تتمتع بالمرونه والسهوله..
العمل النهائي كالصوره التاليه :
أولا نبدأ بكود الـstyle ـ(Css)ـ ونشرح حبه حبه..
1 -
div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
هنا أنشئنا خصائص الخط الفاصل بين كل مقطع فيديو..
width: 565px; : طول الخط الفاصل..
padding: 10px 10px 10px 10px; : الفراغ الفاصل بين كل مقطع..
color:#B9B9B9; : لون الخطوط في الوصف والقائمه..
border-bottom:#666 1px dotted; هنا عرض ونوع ولون الخط الفاصل [ المنقط ]..
2 -
div.sr-picture,
div.sr-de******ion,
div.sr-information {
float:right;
width:125px;
}
هنا أتجاه الجدول والمساحه بين الجدول والفيديو..
float:right; : إتجاه الجدول..
width:125px; : هنا المساحه بين المقطع الفيديو والوصف..
.videode******ion**** {
font-size: 12px;
font-family:tahoma;
}
هنا حجم خط الوصف ونوعه..
font-size: 12px; : حجم الخط للوصف..
font-family:tahoma; : نوع الحجم..
div.sr-de******ion,
div.sr-information {
width:300px;
}
هنا حددنا المساحه بين الوصف بالجدول..
width:300px; : مقدار المساحه..
div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
width:120px; : هنا بعد المسافه بين الوصف والقائمه التي يمين..
min-height:80px; height:auto; height:100px; : طول خط القائمه..
padding: 3px 3px 3px 5px; : المسافه بين العمود والتاريخ+الوقت..
border-right:#4A4A4A 1px solid; : لون العمود وعرضه ونوعه..
div.sr-de******ion h3 {
margin: 5px;
padding: 0;
}
هنا البعد الطولي بين العمود والوصف..
margin: 5px; : هنا البعد بينهم..
padding: 0; : المسافه بين الوصف والعنوان..
div.sr-de******ion h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
هنا لون وحجم خط العنوان والبعد بينهم..
مايحتاج أشرحه لأن جميعها مكرره فقط الاختلاف بالمقدار..
div.sr-de******ion h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-de******ion p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
****-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
****-decoration: none;
}
div.clear {
clear:both;
}
لايحتاج الشرح أيضاً فجميع الأكواد قد ذكرت مسبقاً..
.
أخيراً الكود كامل + الـhtml..
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drakola</title>
<meta http-equiv="Content-Type" content="****/html; charset=windows-1256">
<style>
div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
div.sr-picture,
div.sr-de******ion,
div.sr-information {
float:right;
width:125px;
}
.videode******ion**** {
font-size: 12px;
font-family:tahoma;
}
div.sr-de******ion,
div.sr-information {
width:300px;
}
div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
div.sr-de******ion h3 {
margin: 5px;
padding: 0;
}
div.sr-de******ion h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
div.sr-de******ion h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-de******ion p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
****-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
****-decoration: none;
}
</style>
</head>
<body>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-de******ion">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videode******ion****">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-de******ion">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videode******ion****">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-de******ion">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videode******ion****">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
هذا شرح طريقه عمل قائمه فيديو بلغه الـCss وهي تتمتع بالمرونه والسهوله..
العمل النهائي كالصوره التاليه :
أولا نبدأ بكود الـstyle ـ(Css)ـ ونشرح حبه حبه..
1 -
div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
هنا أنشئنا خصائص الخط الفاصل بين كل مقطع فيديو..
width: 565px; : طول الخط الفاصل..
padding: 10px 10px 10px 10px; : الفراغ الفاصل بين كل مقطع..
color:#B9B9B9; : لون الخطوط في الوصف والقائمه..
border-bottom:#666 1px dotted; هنا عرض ونوع ولون الخط الفاصل [ المنقط ]..
2 -
div.sr-picture,
div.sr-de******ion,
div.sr-information {
float:right;
width:125px;
}
هنا أتجاه الجدول والمساحه بين الجدول والفيديو..
float:right; : إتجاه الجدول..
width:125px; : هنا المساحه بين المقطع الفيديو والوصف..
.videode******ion**** {
font-size: 12px;
font-family:tahoma;
}
هنا حجم خط الوصف ونوعه..
font-size: 12px; : حجم الخط للوصف..
font-family:tahoma; : نوع الحجم..
div.sr-de******ion,
div.sr-information {
width:300px;
}
هنا حددنا المساحه بين الوصف بالجدول..
width:300px; : مقدار المساحه..
div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
width:120px; : هنا بعد المسافه بين الوصف والقائمه التي يمين..
min-height:80px; height:auto; height:100px; : طول خط القائمه..
padding: 3px 3px 3px 5px; : المسافه بين العمود والتاريخ+الوقت..
border-right:#4A4A4A 1px solid; : لون العمود وعرضه ونوعه..
div.sr-de******ion h3 {
margin: 5px;
padding: 0;
}
هنا البعد الطولي بين العمود والوصف..
margin: 5px; : هنا البعد بينهم..
padding: 0; : المسافه بين الوصف والعنوان..
div.sr-de******ion h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
هنا لون وحجم خط العنوان والبعد بينهم..
مايحتاج أشرحه لأن جميعها مكرره فقط الاختلاف بالمقدار..
div.sr-de******ion h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-de******ion p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
****-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
****-decoration: none;
}
div.clear {
clear:both;
}
لايحتاج الشرح أيضاً فجميع الأكواد قد ذكرت مسبقاً..
.
أخيراً الكود كامل + الـhtml..
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drakola</title>
<meta http-equiv="Content-Type" content="****/html; charset=windows-1256">
<style>
div.sr-container {
width: 565px;
padding: 10px 10px 10px 10px;
color:#B9B9B9;
border-bottom:#666 1px dotted;
}
div.sr-picture,
div.sr-de******ion,
div.sr-information {
float:right;
width:125px;
}
.videode******ion**** {
font-size: 12px;
font-family:tahoma;
}
div.sr-de******ion,
div.sr-information {
width:300px;
}
div.sr-information {
width:120px;
min-height:80px; height:auto; height:100px;
margin-right:4px;
padding: 3px 3px 3px 5px;
border-right:#4A4A4A 1px solid;
}
div.sr-de******ion h3 {
margin: 5px;
padding: 0;
}
div.sr-de******ion h3 a {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #53ABD5;
}
div.sr-de******ion h3 a:hover {
margin: 0 0 5px 0;
padding: 0;
font-size: 20px;
color: #c60;
}
div.sr-de******ion p {
font-size: 12px;
}
span:hover#drakola
{
color:#f00;
font-size:14px;
}
span#drakola
{
color:#c60;
font-size:14px;
}
div.sr-picture img {
border:#fff 1px solid;
}
div.sr-information ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
font-family:tahoma;
}
div.sr-information a {
display: block;
color: #53ABD5;
****-decoration: none;
padding: 1px;
font-size: 11px;
}
div.sr-information a:hover {
color: #fff;
****-decoration: none;
}
</style>
</head>
<body>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-de******ion">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videode******ion****">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-de******ion">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videode******ion****">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="sr-container">
<div class="sr-picture"><img src="رابط الصوره" alt="drakola" width="100" height="100" /></div>
<div class="sr-de******ion">
<h3><a href="#">مثـال تجريبي </a></h3>
<div class="videode******ion****">رمضان كريم في هذه الأيام المباركة ندعو الله عز وجل أن يتقبل من سائر المسلمين صيامهم وقيامهم
شهر رمضان : من خصائص شهر رمضان: أن الله تبارك وتعالى أنزل فيه القرآن، قال تعالى: ... 2- ومن خصائص شهر رمضان: تفتح فيه أبواب الجنة، وتغلق أبواب النار، <span id="drakola">[drakola]</span></div></div>
<div class="sr-information">
<ul>
<li><strong>تاريخ : </strong> 10/31/06</li>
<li><strong>الساعة : </strong> 2:30</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>