أنا بجد هتجنن الواحد يعمل كود معين يطلع شكل تانى اأرجو المساعدة

#112 سبتمبر 2006 في 02:25 صاحب الموضوع

السلام عليكم

أرجو المساعدة يا أخوانى لو سمحت وأستحملونى لان أنا لسة بتعلم البرمجة معلش خليها عليكم

دلواتى أنا أعمل صفحة كأختبار لنفسى وأستخدمت بها لغة HTML مع CSS والمشكلة أن أنا لسة فى بداية الاختبار القى

نفسى وقعت فى مشكلة وأنا لسة فى البداية .

أنا كتبت هذا الكود :

هذا كود الـ HTML :-

<html dir="rtl">
<head>
<title>  مشروع التخرج </title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<table width="100%" height="100%" border="1">
  <tr>
	<td>

<table width="100%" height="100%" border="1">
  <tr>
	<td width="100%" height="130" class="back" align="center"></td>
  </tr>
</table>

<table width="100%" height="39" border="1">
  <tr>  
	<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
  </tr>
</table>
<br>
<table width="20%" height="400" align="right" border="1">
  <tr>  
	<td>   </td>
  </tr>
  <tr>  
	<td>   </td>
  </tr>
  <tr>  
	<td>   </td>
  </tr>
  <tr>  
	<td>   </td>
  </tr>
  <tr>  
	<td>   </td>
  </tr>
  <tr>  
	<td>   </td>
  </tr>

</table>

<table width="78%" height="400" border="1">
  <tr>
	<td>   </td>
  </tr>
</table>
<br>
<table height="40" width="100%" border="1">
  <tr>
	<td>   </td>
  </tr>
</table>



	</td>
  </tr>
</table>

</body>
</html>

وهذا كود الـ Css

.back
{
background-image: url(images/banner.jpg);
}

وهذة صورة للتقسيمات التى وضعتها للصفحة والمفروض تطلع فى النهاية بهذا الشكل

ولكن بعد كل هذا طلع النتيجة هذا الشكل

واللهى الواحد هيتجنن معرفش أنا غلطان فى اية عشان يحدث هذة المشكلة فى الصفحة

الرجاء إخوانى أعطونى ما الخطا فى هذة الاكواد حتى أعرف ما السبب

أنتظر الرد ....... :rolleyes: ..... :rolleyes:

تم تعديل هذه المشاركة بواسطة حبيب الله في 12 سبتمبر 2006 في 02:38

||||||||||||||||||||||||||||||||||||

#212 سبتمبر 2006 في 02:55

<html>
<head>
<title>  مشروع التخرج </title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<table width="100%" height="100%" border="0" cellpadding=0 cellspacing=0>
  <tr>
	<td width="100%" height="150" align='center'>
	<table width="100%" height="100%" border=1><tr><td align='center'>header</td></tr></table>
	</td>
  </tr>
  <tr>
	<td align='center' valign='top'>
	<table width="100%" height=30 border=1>
	<tr>
		<td align='center'>link1</td>
		<td align='center'>link2</td>
		<td align='center'>link3</td>
		<td align='center'>link4</td>
	</tr>
	</table>
	</td>
  </tr>
  <tr>
	<td valign='top' height=100%>
	<table width="100%" height=100% border=0>
	<tr>
		<td align='center' width=80% style='padding:25px,5px,25px,0px;'>
		<table width=100% height=100% border=1>
		<tr>
			<td align='center'>main body</td>
		</tr>
		</table>
		</td>
		<td align='center' width=20% style='padding:25px,0px,25px,5px;'>
		<table width=100% height=100% border=1>
		<tr>
			<td align='center'>section1</td>
		</tr>
		<tr>
			<td align='center'>section2</td>
		</tr>
		<tr>
			<td align='center'>section3</td>
		</tr>
		<tr>
			<td align='center'>section4</td>
		</tr>
		</table>
		</td>
	</tr>
  </tr>
</table>

</body>
</html>

مثال لو اردت الاستفادة منه, عندما تريد استخدام الجداول عليك ان تضع جدول رئيسي, ثم تبدا تقسمه الى خلايا رئيسية, ثم تضع ما تريد في هذه الخلايا ولتكن جداول اخرى وبنفس الطريقة خلايا رئيسية وهكذا.. فكر واكتب, لا تعتمد على البرنامج الذي تستخدمه الا لو اردت ان تبقى مرتبطا به مدى حياتك, الكود في الاعلى كتبته بالمفكرة.

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#312 سبتمبر 2006 في 06:48

السلام عليكم

جميل جدا اخوي Xacker

انا فقد اريد التعليق على كود الأخ حبيب الله

المشكله اخوي حبيب الله انه كنت واضع ال height تبع الجدول الاول الموجود داخل الجدول الرئيسي يساوي 100% اي ان ارتفاعه سيكون 100% من الارتفاع المتاح داخل الجدول

وبما ان الجدول الرئيسي مخصص له ارتفاع محدد والجدول الابن هو اول جدول فسيكون الارتفاع يساوي ارتفاع الجدول الرئيس

فلحل المشكلة تستطيع عمل اي من التالي

عدم تخصيص ارتفاع للجدول الرئيسي (لأن رتفاع الجدول الابن 100%)

عدم تخصيص ارتفاع للجدول الابن 100%

اسعمل الطريقة التي اشار اليها الأج Xacker

بتقسيم الجدول الرئيسي الى خلايا ووضع الجداول داخل خلايا منفصلة

والله اعلم

تم تعديل هذه المشاركة بواسطة Mo7eb_Alrasool في 12 سبتمبر 2006 في 06:49

سبحانك اللهم وبحمدك أشهد ان لا اله الا أنت

أستغفرك وأتوب اليك

الهم صلي وسلم وبارك على سيدنا وحبيبنا محمد

#412 سبتمبر 2006 في 14:33

أخوانى الاعزاء

جزاكم الله كل خير على هذة المساعدة الجميلة منكم فعلا أنا قد أخطأت فى وضع طول الجدول 100%

ولكن أنا أضاع مساحة 100% عشان أنا أريد أن يتمدد مساحة الجدول مع دقة شاشة المستخدم

أنا أستخدم طريقة كتابة الجدول بهذة الطريقة التى كتبتها هل أغيرها إلى مثل ما كتبة الاخ Xacker

لان أنا متلخبط شواية بالنسبة لطريقة الاخ Xacker فى كتابة الجداول

على العموم تشكر أخى Xacker وتشكر أخى Mo7eb_Alrasool على الرد

تم تعديل هذه المشاركة بواسطة حبيب الله في 12 سبتمبر 2006 في 14:35

||||||||||||||||||||||||||||||||||||

#512 سبتمبر 2006 في 15:53

ما كتبته لا يختلف كثيرا عما وضعته انت, فقط طريقة تنظيم وبناء اخرى بعيدا عن التخبيص الذي تضعه برامج تصميم المواقع.

لاحظ اني استخدمت النسبة المئوية ايضا الا في ارتفاع جدولين تستطيع تغييرهما الى نسبة مئوية ايضا.

ما قمت به في الاعلى للتوضيح:

1- جدول رئيسي (1) على كامل الصفحة بدون اطار.

هذا الجدول مقسم الى 3 خلايا شاقولية, الاولى تضم الـ header, الثانية تضم الروابط او الشريط الاعلاني..

الثالثة تضم القائمة الى اليمين والنافذة الرئيسية الى اليسار.

هذه الخلايا هي الخلايا الرئيسية.

2- في الخلية الرئيسية العلوية قمت بتشكيل جدول باطار ليضم الـ header

3- في الخلية الرئيسية اسلفه قمت بتشكيل جدول فيه ثلاث خلايا افقية تحوي الروابط.

4- في الخلية الاخيرة من الاسفل قمت بتشكيل جدول مقسوم الى خليتين رئيسيتين.

الخلية الرئيسية الى اليمين تضم جدول فيه القوائم ضمن خلايا شاقولية.

الخلية الى اليسار تضم جدول ستظهر فيه الصفحة عند اختيارها.

راجع هذه الخطوات خطوة خطوة وبتمهل لتدرك ما قمت به. هذه افضل طريقة في بناء الجداول, التحليل اولا.

السلام عليكم

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#612 سبتمبر 2006 في 17:09

تسلم واللهى أخى على الشرح الجميل وسرعة الرد وأستمرارك معى فى المساعدة

جزاك الله كل خير أخى

---------------------------------------------

دلواتى أنا كملت المشروع التجريبى الذى اعملة حاليا على الكود الاصلى الخاص بى الموجود فى أول الصفحة

لكن واجهتنى مشكلة أخرى كما فى الصورة

هل شاهدت المشكلة كما فى الصورة الازرار بعيدة عن بعض بمسافة كبيرة .

سؤالى الان ما هو الكود المخصص بالتحكم فى تقريب وتبعيد المسافة بين كل زر فى HTML والـ Css

علما بأن كل زر فى خلية خاصة بة او tr و td خاص بة

فما الكود الذى يتحكم فى المسافات فى HTML و Css

أعتقد ان هذا الكود ينفع فى هذة المشكلة كود CSS

.margin
{
margin-bottom: -10px;
}

ثم أستدعاء الـ Margin فى وسم الصورة الخاص بالازرار <img>

<img src="images/button-menu.gif" class="margin">

هذة الطريقة حلت لى المشكلة لكن هل هذة الطريقة هى الطريقة الاساسية المستخدمة مع الجميع

ويوجد شئ أخر وهو

كي كيف يمكن إزالة اامسافة الموجودة بين حافة الصفحة والتصميم بحيث يكون التصميم بكامل الصفحة لا يوجد مسافة نهائى

واللهى أخى أنا حاسس أنى فشلت فى هذا المشروع التجريبى الذى فعلتة ونفسيتى ضعفت :^)

تم تعديل هذه المشاركة بواسطة حبيب الله في 12 سبتمبر 2006 في 18:24

||||||||||||||||||||||||||||||||||||

#712 سبتمبر 2006 في 20:13

السلام عليكم

اقتباس
واللهى أخى أنا حاسس أنى فشلت فى هذا المشروع التجريبى الذى فعلتة ونفسيتى ضعفت

اخي الكريم ما في حدا بينجح من اول مرة(تقريبا)

لازم يكون اخطاء ومشاكل ولا كيف راح تتعلم بدون ما تصافكءمشاكل وتتعلم حلها?هذها شيئ طبيعي

امااذا نفسك ضعفت وقلت عمري ما راح اقدر اتعلمها وهي صعبة فما راح تتعلم فعلا

لما تصلطفك مشاكل حاول حلها واذا ما قدرت اسئل عنها بس ما توخذ الحل بدون ما تفهمه واذا مالقيت الحل مش مشكلة كمل وان شاء الله لما تتمكن من اللغة بكون سهل عليك حلها

بالنسبة للصور جرب عدم تخصيص ارتفاع للجدول زيل height="400" وتأكد من عدم وجود padding لل td التي تحتوي الصور

اقتباس
كي كيف يمكن إزالة اامسافة الموجودة بين حافة الصفحة والتصميم بحيث يكون التصميم بكامل الصفحة لا يوجد مسافة نهائى

تستطيع استخدام ال margin

body{margin:0 0 0 0}

او

<body rightmargin=0 topmargin=0 leftmargin=0 bottommargin=0>

ذكر حاول تفهم الحلول دائما

في عندك

margin-bottom

margin:0,0,0,0

rightmargin=0 topmargin=0 leftmargin=0 bottommargin=0

ارجو ان تكون ما وظيفة الخاصية margin الان

حتى اذا في المستقبل واجهتك مشكلة من هذا النوع

تعرف انك ستستعمل هذا الحل

والله اعلم

تم تعديل هذه المشاركة بواسطة Mo7eb_Alrasool في 12 سبتمبر 2006 في 20:16

سبحانك اللهم وبحمدك أشهد ان لا اله الا أنت

أستغفرك وأتوب اليك

الهم صلي وسلم وبارك على سيدنا وحبيبنا محمد

#812 سبتمبر 2006 في 21:59

جزاك الله كل خير أخى العزيز تسلم واللهى أخى على المساعدة

وعلى هذا الشرح الجميل .

||||||||||||||||||||||||||||||||||||

#912 سبتمبر 2006 في 22:46

وبخصوص الفراغات المحيطة بالجدول الأب الرئيسي.. اتصور ستضطر الى استخدام Margin لكن بقيمة سالبة لازاحة الجدول الى اليسار وتمدده الى اليمين بنفس الزيادة بالقيمة على النسبة المئوية..

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#1013 سبتمبر 2006 في 01:03

السلام عليكم

أخوانى الاعزاء وبعد عناء شديد وتعب وارهاق أقدم لكم النيجة التى استمرت يومين فى كتابة الكود وتصميم الوجهة البسيطة هذة

وأنا أضعها هنا للنقد بالنسبة للتصميم والبرمجة وهذا هو أول عمل لى فى البرمجة بالـ HTML مع Css

أنا أعلم أنها كلها على بعضها تصميم وبرمجة ما تأخذش معاكم نصف ساعة أو أقل لكن هذا العمل بالنسبة لى كأنة مجهود عظيم

هذة هى الصورة النهائية :-

أما بالنسبة إلى الكود فهو كالاتى :-

أولا كود HTML

<html dir="rtl">
<head>
<title>  مشروع التخرج </title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<table width="100%" height="100%" border="0" align="center">
  <tr>
	<td>

<table width="100%" height="130" border="0" align="center" cellspacing="0">
  <tr  class="header_back">
	<td width="100%" height="130" align="center"><img src="images/logo.gif"></td>
  </tr>
</table>

<table width="100%" height="39" border="0" cellspacing="2">
  <tr class="width-menu">  
	<td>   </td>
<td width="20%" > المنتدى </td>
<td width="20%" > مركز التحميل </td>
<td width="20%" > البحث </td>
<td width="20%" >  معلومات عنا </td>
  </tr>
</table>
<br>
<table width="150" height="400" align="right" border="0" cellspacing="0">
  <tr>  
	<td height="50" align="center"><img src="images/button-menu.gif" border="0" class="menu">   </td>
  </tr>
  <tr>  
	<td height="50" align="center"><img src="images/button-qurain.gif" class="menu">  </td>
  </tr>
  <tr>  
	<td height="50" align="center"><img src="images/button-hades.gif" class="menu">   </td>
  </tr>
  <tr>  
	<td height="50" align="center"><img src="images/button-droos.gif"class="menu">   </td>
  </tr>
  <tr>  
	<td height="50" align="center"><img src="images/button-mkallat.gif" class="menu">   </td>
  </tr>
  <tr>  
	<td height="50" align="center"><img src="images/button-photo.gif" class="menu">   </td>
  </tr>
  <tr>
	<td height="50" align="center"><img src="images/button-flash.gif" class="menu">   </td>
  </tr>
  <tr>
	<td height="50" align="center"><img src="images/button-send.gif">   </td>
  </tr>  

</table>

<table width="84%" height="450" border="0">
  <tr class="body_back" valign="top" >
	<td>   </td>
  </tr>
</table>
<br>
<table height="50" width="100%" border="0" class="foter_img">
  <tr>
	<td align="center" style="font-weight: bold"> جميع الحقوق محفوظة إلى كل مسلم   </td>
  </tr>
</table>

	</td>
  </tr>
</table>

</body>
</html>

ثانيا كود الـ CSS

.header_back
{
background-image: url(images/banner.jpg);
text-align:top;
}

.body_back
{
background-image: url(images/background.gif);
margin-left: 20px
}

.width-menu
{
background-image: url(images/width-menu.jpg);
text-align: center;
font-size:15pt;
font-weight:bold;
color:#FFFFFF;
}

body
{
margin: 0,0,0,0;
}

.menu
{
margin-bottom: -15px;
}

.foter_img
{
background-image: url(images/footer.jpg);
border: groove;
}

والان عرضت لكم كل ما فعلتة فى هذا العمل من تصميم وكود برمجى

والان دوركم فى النقد وتعريفى بالاخطاء التى فى الكود أو التصميم

أنتظر النقد ......... وأنا أعرف أن كل شئ سوف يكون نقد فيما فعلتة

تم تعديل هذه المشاركة بواسطة حبيب الله في 13 سبتمبر 2006 في 01:24

||||||||||||||||||||||||||||||||||||

#1113 سبتمبر 2006 في 13:30

أية يا أخوانى أنو رحتو فين أنا عاوز النقد فى العمل السابق .

أنتظركم ........

||||||||||||||||||||||||||||||||||||

أنا بجد هتجنن الواحد يعمل كود معين يطلع شكل تانى اأرجو المساعدة

مواضيع مشابهة

عدد الزوار حالياً