مشكلة بسيطة في الدرس الثالث دورة في بي إيجي الشاملة

أمل · 06-01-2011

السلام عليكم

^^

بعد ماراجعت كورس html

بدأت بتطبيق دورة في بي إيجي الشاملة والحمدلله كانت سهلة مقابل السابق

لكن واجهتني مشكلة بالدرس الثالث

الأعمدة ماتظهر+إن ظهرت ظهرت بشكل غير متناسق أبداً

صورة المشكلة

+

الفراغ الموجود بالهيدر بين الجزء الايمن والايسر

الكلاسات

كود PHP:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>موقع أمل خالد لخدمات التصميم</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="amal-khaled"><!--start-->
 

<div class="h1"><!--start header-->
                      <img src="images/h_03.gif" alt="أمل خالد لخدمات التصميم والتكويد"/>
</div>
<div class="h2">
                      <img src="images/h_02.gif" alt="amal-khaled.com"/>
</div>
<div class="clean"></div>
<!--end header-->
<br/>
<br/>
<br/>
<div class="list2">
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               mal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                           
</div><!--end list2-->
 
                           <div class="list1">
                           
                           <!--بداية التأطير العلوي-->
                           <div class="re1">
                           <div class="r1"></div>
                           <div class="l1"></div>
                           </div>
                  <!--نهاية التأطير العلوي-->
                           
                           <!--بداية الأعمدة-->
                           <div class="td">
                           <div class="tr"></div>
                           <div class="tl"></div>
                           
                           
                           
                           <div class="nav">
                           <div class="nav_t">
                           <div class="nav_r"></div>
                           <div class="nav_l"></div>
                           <ul>
                           <li><a href="#" title="الرئيسية" target="_self">الرئيسية</a></li>
                           <li><a href="#" title="الرئيسية" target="_self">الرئيسية</a></li>
                           <li><a href="#" title="الرئيسية" target="_self">الرئيسية</a></li>
                           <li><a href="#" title="الرئيسية" target="_self">الرئيسية</a></li>
                           <li><a href="#" title="الرئيسية" target="_self">الرئيسية</a></li>
                           
                           </ul>
                           </div><!--end nav_t-->
                           </div><!--نافبار-->
                           <br/>
                           <div id="posts">
                           <div class="post">
                           <div class="post_h_m">
                           <div class="post_h_r"></div>
                            <div class="post_h_l"></div>
                            <div class="post_h_text"><a href="#" title="دروس دورة توزيع ستايل منتدى في بي ">دروس دورة توزيع ستايل منتدى في بي</a></div>
                           </div>
                           <div class="post_m">
                           <div class="post_m_r">
                           <div class="post_m_l">
                            amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.c
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                           </div>
                           </div>
                           </div>
                           <div class="post_f">
                           <div class="post_f_r"></div>
                           <div class="post_f_l"></div>
                           </div>
                               khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.c
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                           </div><!--End post-->
                                      <div class="post">
                           <div class="post_h_m">
                           <div class="post_h_r"></div>
                            <div class="post_h_l"></div>
                            <div class="post_h_text"><a href="#" title="دروس دورة توزيع ستايل منتدى في بي ">دروس دورة توزيع ستايل منتدى في بي</a></div>
                           </div>
                           <div class="post_m">
                           <div class="post_m_r">
                           <div class="post_m_l">
                            amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.c
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                               amal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.comamal-khaled.com
                           </div>
                           </div>
                           </div>
                           <div class="post_f">
                           <div class="post_f_r"></div>
                           <div class="post_f_l"></div>
                           </div>
                           
                           
                           
                           
                           
                           </div>
                           
                           <!--نهاية الاعمدة-->
                           
                          
                          
                          
                            <!--بداية التأطير السفلي-->
                  <div class="re2" >
                    <div class="r2"></div>
                           <div class="l2">
                           </div>
                            </div> 
                  
                 
   <!--نهاية التأطير السفلي-->
      
            
</div><!--end list1-->
 
</div><!--End-->
</body>
</html>

كود PHP:


			
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, big, font, img, small, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse; border-spacing:0;}
body{
 background-color:#dfdfdf;
 direction:rtl;
}
#amal-khaled{
 width:850px;
 margin:auto;
}
.h1 img{
 margin:0 0 0 0;
 float:right;
 height:157px;
 width:728px;
}
.h2 img{
 margin:0 0 0 0;
 float:left;
 height:157px;
 width:111px;
}
.clean{
 clear:both;
}

list1{
 float:left;
 width:637px;
}
.list2{
 background:url(images/blist2.gif);
 float:right;
 width:168px;
}
.re1{
 background:url(images/repeat1.gif) repeat-x;
 height:45px;
 
}
.r1{
 background:url(images/r1.gif) no-repeat;
 height:45px;
 width:111px;
 float:right;
}
.l1{
 background:url(images/l1.gif) no-repeat;
 height:45px;
 width:111px;
 float:left;
}

.td{
 background-color:#cccccc;
 text-align:justify;
}
.tr{
 background:url(images/tl.gif) repeat-y right top;
 padding-right:22px;
}
.tl{
 background:url(images/t2.gif) repeat-y left top;
 padding-left:22px;
}
.re2{
 background:url(images/re2.gif) repeat-x;
 height:45px;
 
}
.r2{
 background:url(images/r2.gif) no-repeat;
 height:45px;
 width:111px;
 float:right;
}
.l2{
 background:url(images/l2.gif) no-repeat;
 height:45px;
 width:111px;
 float:left;
}
.nav {
 position:absolute;
 top:159px;
 height:44px;
 overflow:hidden;
 width:850px;
 margin-left:20px;
}
.nav_t{
 background:url(images/nav_t.gif) repeat-x;
 height:44px;
}
.nav_r{
 background:url(images/nav_r.gif) no-repeat;
 height:44px;
 width:133px;
 float:right;
}
.nav_l{
 background:url(images/nav_l.gif) no-repeat;
 height:44px;
 width:133px;
 float:left;
}
.nav_t ul {
 margin:0;
 padding:0;
}
.nav_t ul li {
 float:right;
 padding-left:10px;
}
.nav_t ul li a {
 padding:5px;
 line-height:47px;
 
}
#posts{
}
.post{
 margin-bottom:20px;
}
.post_h_m{
 background:url(images/table_02.gif) repeat-x;
 height:57px;
}
.post_h_r{
 background:url(images/table_04.gif) no-repeat;
 height:57px;
 width:103px;
 float:right;
}
.post_h_l{
 background:url(images/table_01.gif) no-repeat;
 height:57px;
 width:103px;
 float:left;
 
}
.post_h_text{
 background:url(images/post/post_02.jpg) no-repeat center center;
 line-height:35px;
 color:#FFF;
}
.post_m{
 background-color:#cccccc;
 text-align:justify;
}
.post_m_r{
 background:url(images/table_06.gif) repeat-y right top;
 padding-right:30px;
}
.post_m_l{
 background:url(images/table_05.gif) repeat-y left top;
 padding-left:60px;
}
.post_f{
 background:url(images/table_08.gif) repeat-x;
 height:57px;
}
.post_f_r{
 background:url(images/table_09.gif) no-repeat;
 height:57px;
 width:135px;
 float:right;
}
.post_f_l{
 background:url(images/table_07.gif) no-repeat;
 height:57px;
 width:135px;
 float:left;
}

قناص جوبا · 06-06-2011

وعليكم السلام
طيب اتمنى لو ترسلى رابط كامل للواجهه بالصور علشان اشوف المشكله

أمل · 06-06-2011

بالمرفقات...

DeSeinsTein · 06-06-2011

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

أمل · 06-07-2011

^^

كل بداية فيها مشاكل غير منتهية

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

اخوي قناص..الأن انحلت تقريباً المشكلات عدا حاجات بسيطة توضحها الصورة التالية

الخلفية نفسها الموجوده ع الهيدر ابغى اخليها خلفية متصله من الهيدر للفوتر

+

مشكلة الاعمدة بالاطارات الداخليه وهي واضحة تماماً

+

توسيط الازرة!

حطيت margin auto

لكن ماتوسطت!

قناص جوبا · 06-07-2011

طيب ممكن توضيح للمشاكل الموجودة حاليا كلها
+ الواجهه حتى الان ياريت ترفقيها فى المرفقات

أمل · 06-07-2011

هذه المشاكل تم تحديدها

+

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

والواجهه بصورها وتوزيعاتها بالمرفقات بعد التصحيح وقلة الاخطاء السابقة

DeSeinsTein · 06-07-2011

اولا

كود PHP:


			
<div class="text" >
<form action="index.html" method="post">
<input class="a1" type="text" value="username"/><br/><br/>
<input class="a2" type="password" value="pass"/><br/><br/>
<input class="a3" type="submit" value="enter"/><br />
</form>
</div>
<br/>
<div class="text">
<span>أقسام الموقع</span>
<ul>
<li> <a href="#" target="_self" title="الرئيسية">الرئيسية</a></li>
<li> <a href="#" target="_self" title="الرئيسية">الرئيسية</a></li>
<li> <a href="#" target="_self" title="الرئيسية">الرئيسية</a></li>
<li> <a href="#" target="_self" title="الرئيسية">الرئيسية</a></li>
<li> <a href="#" target="_self" title="الرئيسية">الرئيسية</a></li>



</ul>
</div>

كيف تتوقعين توسيط قسمسين في ان واحد ب css
الخاصية حساسة margin:0 auto;
من الأحسن تغيير اسماء id والله ولكن هناك حل

كود PHP:


			
<div class="text" align="center">
<form action="index.html" method="post">
<input class="a1" type="text" value="username"/><br/><br/>
<input class="a2" type="password" value="pass"/><br/><br/>
<input class="a3" type="submit" value="enter"/><br />
</form>
</div>

اضافة align="center"

أمل · 06-07-2011

الله يعطيك العافيه لكن ماوضحت تمام

قناص جوبا · 06-07-2011

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

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
الدرس الثالث من دوره تصميم الاستايل بتقنيه (css)	قناص جوبا	دورة تصميم استايلات vbulletin بال css	114	08-09-2011 05:09 PM
[مشكلة] مشكلة في تأطير الاحصائيات الشاملة	أمل	فى بى ايجى لمشاكل و طلبات التصميم	5	11-19-2010 12:59 AM
الدرس الثالث من دورة دعم ايجى شرح تركيب الهاكات + شرح تركيب استايل	omda lover`s	فى بى ايجى لدروس و شروحات المواقع و المنتديات	1	10-10-2010 02:27 PM
الدرس الثالث : لوحه الإداره + خيارات المنتدى 3	فيروس خائف	فى بى ايجى لدروس و شروحات المواقع و المنتديات	4	02-09-2010 02:32 PM
[مشكلة] لدى مشكلة بسيطة او مش بسيطة	bebo2004	فى بى ايجى للحلول و المشاكل و الطلبات	5	01-19-2010 06:35 PM

فى بى ايجى التطويرية
موقع تكويد	مركز رفع صور وملفات	مدونه فى بى ايجى	منتدى المشاكل	منتدى مجانى
معرض استايلات	دليل مواقع \| اضف موقعك	استضافه مجانيه	اعمال فى بى ايجى	دوره اداره الموقع
دوره تصميم الاستايلات	منتديات القمة إنفو	تبادل اعلانى	تبادل اعلانى	تبادل اعلانى

رسالة مدير الموقع

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