النتائج 1 إلى 6 من 6

الموضوع: كيف اصحح هذا الخطأ في توزيع الصفحة ب DIV

  1. #1
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2003
    المشاركات
    595

    كيف اصحح هذا الخطأ في توزيع الصفحة ب DIV



    السلام عليكم ورحمة الله
    اخواني الكرام قمت بعمل تصميم
    يحتوي على بلوك يمين ومحتوى وسط وبلوك يسار
    وهذا الكود الذي وضعته لملف CSS:
    كود PHP:
    #bady3{
    width100%;

        
    }

    .
    left-block{
    floatleft;
    width150px;
    background-color#DFDFDF;
    margin5px 5px 0 5px;
    padding3px 3px 0 3px;


        
    }

    .
    mohtawa{
    width400px;
    margin-left150px;

    background-color#006400;

        
    }

    .
    right-block{
    floatright;
    width100px;
    background-color#7B68EE;
    padding10px 10px 0 10px;

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





    الصور المرفقة الصور المرفقة  
    __________________
    لاتنس ذكر الله..


  2. #2
    عضو جديد
    تاريخ التسجيل
    May 2007
    المشاركات
    13


    ياريت اخي تحط كامل الكود مع الهوتمل






  3. #3
    عضو نشيط
    تاريخ التسجيل
    Feb 2009
    المشاركات
    210


    و عليكم السلام ورحمة الله وبركاته

    ما دمت تريد ان تجعل البلوكين على الطرفين متوازيين من ناحية الارتفاع أو حتى ابتداء الارتفاع .. فلازم عليك تجعل لهما نفس margin-top أو على الأقل القيمة الأولى من ال margin التي كتبت

    انظر معي كتبت في . left-block
    كود PHP:
    margin5px 5px 0 5px
    و في .right-block لم تعطه قيمة ..

    بالنسبة لبدأ الارتفاع الذي يهمنا هو القيمة 5px التي بدأت بها الكود الأول .. فلابد تطبقها كذلك على اليمنى فتصبح
    كود PHP:
    .right-block{
    floatright;
    width100px;
    background-color#7B68EE;
    margin5px 5px 0 5px;
    padding10px 10px 0 10px;

    و كذلك كي يكون هناك اتزان في الكتابة من الطرفين .. اجعل الـ padding متماثل من ناحية top
    فيصبح .left-block :

    كود PHP:
    .left-block{
    floatleft;
    width150px;
    background-color#DFDFDF;
    margin5px 5px 0 5px;
    padding3px 3px 0 3px

    و .right-block :


    كود PHP:
    .right-block{
    floatright;
    width100px;
    background-color#7B68EE;
    margin5px 5px 0 5px;
    padding3px 3px 0 3px;

    ملاحظة : إذا لم لصلح الخطأ .. فأضف كود ال xhtml كما تفضل الأخ قبلي ربما هناك خلل .

    موفق بإذن الله






  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2003
    المشاركات
    595


    اشكر لكم ردكم اخوي الكريمين
    جربت الكود الذي تكرم به الأخ Fez-Soft
    ولكن لم يحل الخطأ
    وها انا ارفق لكم كود الهتمل والسي اس اس كاملين:
    كود HTML:
    <!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>Untitled Document</title>
    <link href="style1.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <!--  بداية تصميم المحتوى -->
    <div id="tasmeem" align="center">
    <!--  الهيدر -->
    	<div class="header"><img src="images/Future-Experts_02.jpg" width="949" height="93" border="0" usemap="#Map" />
    <map name="Map" id="Map"><area shape="rect" coords="724,62,784,86" href="aboutus.php" />
    <area shape="rect" coords="799,62,859,83" href="sendme.php" />
    <area shape="rect" coords="871,62,904,83" href="links.php" />
    <area shape="rect" coords="46,14,247,77" href="index.php" />
    </map>	</div>
    <!-- بنر الفلاش -->
    		<div class="flash-banner"><img src="images/Future-Experts_04.jpg" />
    		</div>
    			<div class="bady2">
    				<div class="top-menu">
    				</div>
    					<div id="bady3">
    						
    				  <div class="left-block">
    							</div>
                                <!--   الأخبار -->
    								<div class="mohtawa">
    								  <p>&nbsp;</p>
    								 
    								</div>
    		    		<div class="right-block">
    									
    		    		</div>
    										
    	   	 		</div>
    							<div class="end-B">
    							</div>
    
    			</div>
    
    		<div class="footer">
    		</div>
    
    </div>
    
    </body>
    </html>
    والستايل هو
    كود PHP:

    html 
    {
      
    height100%;
     
    }
    body {
    background-color
        
    font-familyArialHelveticasans-serif;
        
    font-sizemedium;
        
    font-weightnormal;
        
    font-stylenormal;
        
    font-variantnormal;
        
    text-transformnone;
        
    background#333333;
        
    margin-top0;
        
    }
    #tasmeem {
    width949px;
    margin-leftauto;
    margin-rightauto;



        
    }
    .
    header{
        
    width100%;
        
    height93px;
        
    }
    .
    flash-banner{
    margin-top0;

        
    }

    .
    bady2{
    background-colorWhite;
    width100%;

        
    }

    .
    top-menu{
    width100%;
    height28px;
    margin-top0;
    background-imageurl(images/menu-back.jpg);

        
    }

    #bady3{
    width100%;

        
    }
    /*
    .left-block{
    float: left;
    width: 150px;
    background-color: #DFDFDF;
    margin: 5px 5px 0 5px;
    padding: 3px 3px 0 3px;


        
    }
    */
    .left-block
    floatleft
    width150px
    background-color#DFDFDF; 
    margin5px 5px 0 5px
    padding3px 3px 0 3px;  
    }  

    .
    mohtawa{
    width400px;
    margin-left150px;

    background-color#006400;

        
    }
    /*
    .right-block{
    float: right;
    width: 100px;
    background-color: #7B68EE;
    padding: 10px 10px 0 10px;
    }
    */
    .right-block
    floatright
    width100px
    background-color#7B68EE; 
    margin5px 5px 0 5px
    padding3px 3px 0 3px
    }  



    .
    end-B{
        
    }

    .
    footer{
        







    __________________
    لاتنس ذكر الله..

  5. #5
    عضو نشيط
    تاريخ التسجيل
    Feb 2009
    المشاركات
    210


    بالمرفقات





    الملفات المرفقة الملفات المرفقة

  6. #6
    عضو نشيط جدا
    تاريخ التسجيل
    Jun 2003
    المشاركات
    595


    جزاك الله خيرا
    اخي الكريم Fez-Soft





    __________________
    لاتنس ذكر الله..





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

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