إغلاق


اضغط هنا لتنزيل آخر إصدارة من زووبس





يتصفح المنتدى الآن:   1 زائر



أسفل   الموضوع السابق   الموضوع التالي  إشترك لتكتب موضوع

(1) 2 »


بخصوص امر margin + padding
#1
مشرف


Benutzerinformationen
السلام عليكم
لدى استفسار فى الcss
كتبت هذا الكود فى ملف theme.html
<div id="123">
        <
div id="a">
        
        </
div>
        <
div id="b">
        
        </
div>
        <
div id="c">
        
        </
div>
    </
div>

اما فى ملف style.css كتبت
#123 {
    
width754px;
    
height200px;
    
margin-top16px;
    
displaytable;

}

#a {
    
width100px;
    
height200px;
    
border1px solid #000;
    
displaytable-cell;
}

#b {
    
width100px;
    
height200px;
    
border1px solid #000;    
    
displaytable-cell;
}

#c {
    
width100px;
    
height200px;
    
border1px solid #000;
    
displaytable-cell;    
}

المشكلة عندما اعطى margin-left: 20px; للديف b او c بغرض تباعد الديفات عن بعضها لا يحدث شىء تبقا الثلاثة ديفات ملتسقين ببعضهم البعض وجربت الامر padding-left: 20px; لا يحدث شيء

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



أرسلت بتاريخ: 2012/4/7 13:20
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#2
فريق الدعم الفني


Benutzerinformationen
#123 { 
    
width754px
    
height200px
    
margin-top16px
    
displaytable



#a {float:left; margin:3px;
    
width100px
    
height200px
    
border1px solid #000; 
    
displaytable-cell


#b {float:left; margin:3px;
    
width100px
    
height200px
    
border1px solid #000;     
    
displaytable-cell


#c {float:left; margin:3px;
    
width100px
    
height200px
    
border1px solid #000; 
    
displaytable-cell;     
}

أرسلت بتاريخ: 2012/4/7 14:08
____________________
انقر لمشاهدة الصورة الأصلية في نافذة جديدة
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#3
مشرف


Benutzerinformationen
شكرا استاذ عادل

أرسلت بتاريخ: 2012/4/7 14:29
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#4
فريق الدعم الفني


Benutzerinformationen
العفو أخي مدحت

أرسلت بتاريخ: 2012/4/7 14:31
____________________
انقر لمشاهدة الصورة الأصلية في نافذة جديدة
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#5
فريق الدعم الفني


Benutzerinformationen
بالمناسبة بما أنه إستعملت float
يجب أن تغير html إلى
<div id="123"
        <
div id="a"
         
        </
div
        <
div id="b"
         
        </
div
        <
div id="c"
         
        </
div
<
div style="clear:both"></div>
    </
div>

أرسلت بتاريخ: 2012/4/7 14:36
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#6
مشرف


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

أرسلت بتاريخ: 2012/4/7 14:39
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#7
فريق الدعم الفني


Benutzerinformationen
http://arabic-html.com/psd-to-htmlcss ... %d8%ad%d9%88%d9%8a%d9%84/

هذا درس جميل جدا و أنصحك ببدأه من الجزء الأول لتحويل psd إلى ثيم html/css
في هذا الجزء ستجد شرح لعمل float و clear
هو فقط أن float تقوم برفع الجسم إلى طبقة أعلى حيث يمكنك ترتيبها مثلا float:right
و clear:both تقوم بوضع الجسم وحده في السطر جتى الأجسام الموجودة في طبقة أخرى

أرسلت بتاريخ: 2012/4/7 14:48
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#8
فريق الدعم الفني


Benutzerinformationen
رد مكرر لمشكل في الأنترنت المرجو الحذف

أرسلت بتاريخ: 2012/4/7 14:48
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#9
فريق الدعم الفني


Benutzerinformationen
تمام كلام طارق و فعلا هذه النقطة مهمة يجب أخدها بعين الاعتبار

أرسلت بتاريخ: 2012/4/7 14:52
____________________
انقر لمشاهدة الصورة الأصلية في نافذة جديدة
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#10
مشرف


Benutzerinformationen
تمام شكرا لكم يا اخوان

أرسلت بتاريخ: 2012/4/7 15:29
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#11
مشرف


Benutzerinformationen
ظهرة مشكلة اخرى ان شاء الله بسيطه واجد الحل معكم
اقرأ هذا الكود
<div id="a">
            <
div id="at">
            
            </
div>
            <
div id="ab">
            <
div id="text">
                <
pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
            
</div>
            </
div>
            <
div id="foot">
                <
a href="<{xoAppUrl /index.php}>" ><img src="<{xoImgUrl img/mor.jpg}>" /></a>
            </
div>
        </
div>

#a {
       
float:leftmargin-left3px;
    
width245px;  
    
height200px;  
}  
#at {
    
width245px;
    
height45px;
    
background-imageurl(img/at.png);
}
#ab {
    
width245px;
    
height155px;
    
background-imageurl(img/ab.jpg);
    
positionabsolute;

}
#foot {
    
width245px;
    
height20px;
    
background-colorred;
    
}


المشكلة
لا يظهر ديف الفوتور فى الصفحه بسبب استخدامى للامر position: absolute; فى الديف ab
وسبب استخدامى للأمر انه عندمى اترك ديف ab من غير هذا الامر تحدث مشكلة يحدث تباعد بين الديف at والديف ab هذه صورة للتوضيح
انقر لمشاهدة الصورة الأصلية في نافذة جديدة


هل يوجد حل اخر غير استخدام الأمر position: absolute; او ماذا افعل


أرسلت بتاريخ: 2012/4/8 8:24
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#12
فريق الدعم الفني


Benutzerinformationen
إذا أزلتها ليس هناك أي تباعد
http://jsfiddle.net/dxfYa/

أرسلت بتاريخ: 2012/4/8 9:23
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#13
مشرف


Benutzerinformationen
استاذى طارق نسخة الكود من http://jsfiddle.net/dxfYa/ ولصقته فى ملفات الثيم ولازالة المشكلة موجوده
طيب ممكن تكون المشكلة بسبب كثرة الديفات اليك الكود بالكامل
<div id="home1">
        <
div id="a">
            <
div id="at">
            
            </
div>
            <
div id="ab">
            <
div id="text">
                <
pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
            
</div>
            </
div>
            <
div id="foot">
                <
a href="<{xoAppUrl /index.php}>" ><img src="<{xoImgUrl img/mor.jpg}>" /></a>
            </
div>
        </
div>
        <
div id="b">
            <
div id="bt">
            
            </
div>
            <
div id="bb">
            <
div id="text">
                <
pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
            
</div>
            </
div>
            <
div id="foot">
                <
a href="<{xoAppUrl /index.php}>" ><img src="<{xoImgUrl img/mor.jpg}>" /></a>
            </
div>
        </
div>
        <
div id="c">
            <
div id="ct">
            
            </
div>
            <
div id="cb">
            <
div id="text">
                <
pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
                
<pبسم الله بسم الله بسم الله بسم الله
            
</div>
            </
div>
                <
div id="foot">
                <
a href="<{xoAppUrl /index.php}>" ><img src="<{xoImgUrl img/mor.jpg}>" /></a>
            </
div>
        </
div>
        <
div style="clear:both"></div>
    </
div>

#home1 {  
    
width754px;  
    
height200px;
    
margin-top18px;  



#a {
       
float:leftmargin-left3px;
    
width245px;  
    
height200px;  
}  

#b {
     
float:leftmargin-left8px
    
width245px;  
    
height200px;         
}  

#c {
     
float:leftmargin-left8px
    
width245px;  
    
height200px;         


#at {
    
width245px;
    
height45px;
    
background-imageurl(img/at.png);
}
#bt {
    
width245px;
    
height45px;
    
background-imageurl(img/at.png);
}
#ct {
    
width245px;
    
height45px;
    
background-imageurl(img/at.png);
}



#ab {
    
width245px;
    
height155px;
    
background-imageurl(img/ab.jpg);
    
position:absolute;

}


#bb {
    
width245px;
    
height155px;
    
background-imageurl(img/ab.jpg);
    
position:absolute;
}


#cb {
    
width245px;
    
height155px;
    
background-imageurl(img/ab.jpg);
    
position:absolute;
}


#foot {
    
width245px;
    
height20px;
    
background-colorred;
}


#text {
    
width235px;
    
height150px;
}



صورة توضيحيه المشكلة موجوده حتا بعد نسخ الكود من موقع http://jsfiddle.net/dxfYa/
انقر لمشاهدة الصورة الأصلية في نافذة جديدة

أرسلت بتاريخ: 2012/4/8 10:07
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#14
فريق الدعم الفني


Benutzerinformationen
<div id="a"
<
div id="at"></div
<
div id="ab"

<
pبسم الله بسم الله بسم الله بسم الله 
<pبسم الله بسم الله بسم الله بسم الله 
<pبسم الله بسم الله بسم الله بسم الله 
<pبسم الله بسم الله بسم الله بسم الله 
<pبسم الله بسم الله بسم الله بسم الله 

</div

 <
div id="foot"
 <
a href="<{xoAppUrl /index.php}>" ><img src="<{xoImgUrl img/mor.jpg}>" /></a
 </
div
        
</
div>





#a { 
float:left
margin-left3px
width245px;   
height200px;   
}   
#at { 
height45px
background-imageurl(img/at.png); 


#ab { 
height155px
background-imageurl(img/ab.jpg); 


#foot {  
height20px
background-colorred
     
}

أرسلت بتاريخ: 2012/4/8 10:19
____________________
انقر لمشاهدة الصورة الأصلية في نافذة جديدة
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


رد: بخصوص امر margin + padding
#15
فريق الدعم الفني


Benutzerinformationen
إستعمل هذا بالمناسبة هل تعرف الفرق بين id و class
http://jsfiddle.net/dxfYa/1/

أرسلت بتاريخ: 2012/4/8 10:27
طباعة Twitter Facebook _MD_SHARE_BUZZ Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى




(1) 2 »



يمكنك قراءة موضوع.
لا يمكنك إضافة موضوع جديد.
لا يمكنك الرد على المشاركات.
لا يمكنك تحرير مشاركاتك.
لا يمكنك حذف مشاركاتك.
لا يمكنك إضافة إستفتاء جديد.
يمكنك التصويت في الإستفتاءات.
لا يمكنك إرفاق ملفات في مشاركاتك.
لا يمكنك المشاركة بدون موافقة المشرف.
You cannot use topic type.
You cannot use HTML syntax.
You cannot use signature.

[بحث متقدم]



موقع الدعم العربي لنظام إدارة المحتوى زووبس


مواقع صديقة: رياض القرآن ، خلفيات شاشة ، المجلة السعودية للسيارات ، أهرام العلمية ، ابن مصر ، برامج عربية و معربة ، ماسنجر شبوة.نت ، ضفاف ، العاب