غير مشترك ؟ سجل الآن | نسيت كلمة المرور ؟
إغلاق

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

عرب زووبس الصفحة الرئيسية

صفحة المنتدى الرئيسية » منتديات الدعم الفني » الثيمات و القوالب » بخصوص امر margin + padding


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



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

(1) 2 »


ME_DHAT
بخصوص امر 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 {
    width: 754px;
    height: 200px;
    margin-top: 16px;
    display: table;

}

#a {
    width: 100px;
    height: 200px;
    border: 1px solid #000;
    display: table-cell;
}

#b {
    width: 100px;
    height: 200px;
    border: 1px solid #000;    
    display: table-cell;
}

#c {
    width: 100px;
    height: 200px;
    border: 1px solid #000;
    display: table-cell;    
}

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

لاحظ معى الصورة للتوضيح



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


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


Benutzerinformationen
#123 { 
    width: 754px; 
    height: 200px; 
    margin-top: 16px; 
    display: table; 

} 

#a {float:left; margin:3px;
    width: 100px; 
    height: 200px; 
    border: 1px solid #000; 
    display: table-cell; 
} 

#b {float:left; margin:3px;
    width: 100px; 
    height: 200px; 
    border: 1px solid #000;     
    display: table-cell; 
} 

#c {float:left; margin:3px;
    width: 100px; 
    height: 200px; 
    border: 1px solid #000; 
    display: table-cell;     
} 

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


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


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

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


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


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

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


Tarik
رد: بخصوص امر 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 Google Buzz Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


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


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

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


Tarik
رد: بخصوص امر 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 Google Buzz Linkedin Del.icio.us Digg Reddit Mr. Wong أعلى


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


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

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


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


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

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


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


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

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


ME_DHAT
رد: بخصوص امر 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:left; margin-left: 3px;
    width: 245px;  
    height: 200px;  
}  
#at {
    width: 245px;
    height: 45px;
    background-image: url(img/at.png);
}
#ab {
    width: 245px;
    height: 155px;
    background-image: url(img/ab.jpg);
    position: absolute;

}
#foot {
    width: 245px;
    height: 20px;
    background-color: red;
    
}


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


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


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


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


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

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


ME_DHAT
رد: بخصوص امر 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 {  
    width: 754px;  
    height: 200px;
    margin-top: 18px;  

} 

#a {
       float:left; margin-left: 3px;
    width: 245px;  
    height: 200px;  
}  

#b {
     float:left; margin-left: 8px; 
    width: 245px;  
    height: 200px;         
}  

#c {
     float:left; margin-left: 8px; 
    width: 245px;  
    height: 200px;         
} 

#at {
    width: 245px;
    height: 45px;
    background-image: url(img/at.png);
}
#bt {
    width: 245px;
    height: 45px;
    background-image: url(img/at.png);
}
#ct {
    width: 245px;
    height: 45px;
    background-image: url(img/at.png);
}



#ab {
    width: 245px;
    height: 155px;
    background-image: url(img/ab.jpg);
    position:absolute;

}


#bb {
    width: 245px;
    height: 155px;
    background-image: url(img/ab.jpg);
    position:absolute;
}


#cb {
    width: 245px;
    height: 155px;
    background-image: url(img/ab.jpg);
    position:absolute;
}


#foot {
    width: 245px;
    height: 20px;
    background-color: red;
}


#text {
    width: 235px;
    height: 150px;
}



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

أرسلت بتاريخ: 2012/4/8 10:07
طباعة Twitter Facebook Google 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-left: 3px; 
width: 245px;   
height: 200px;   
}   
#at { 
height: 45px; 
background-image: url(img/at.png); 
} 

#ab { 
height: 155px; 
background-image: url(img/ab.jpg); 
} 

#foot {  
height: 20px; 
background-color: red; 
     
}

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


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


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

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



صفحة المنتدى الرئيسية » منتديات الدعم الفني » الثيمات و القوالب » بخصوص امر margin + padding

أعلى   الموضوع السابق   الموضوع التالي
(1) 2 »

  إشترك لتكتب موضوع


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

[بحث متقدم]


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

أضف موقعك | صور و خلفيات | أكواد الألوان | مواقع إسلامية | خريطة الموقع

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