קיימת אי הבנה בין תגית Div ו-Span ב-html. הרבה בוני אתרים מתחילים או סטודנטים שעושים קורס בניית אתרים, מתקשים לראות את ההבדלים בין התגיות שצויינו ועושים בו שימוש לא נכון ושגוי. ההבדל בניהם, הוא שה-Div זה אלמנט גוש ו-Span הוא אלמנט שורה. עוד לפני שנגיע לדוגמאות, חשוב לדעת שרוב הדפדפנים העדכניים מציגים את מקטע ה- Div בשורה חדשה ולא באותה שורה. זאת אומרת שכל פעם שנרשום אלמנט Div, הדפדפן יציג את התוכן שבו בכל פעם בשורה חדשה. לעומת זאת, אלמנט Span מוגדר כמקטע בתוך השורה בה הוא נכתב והדפדפן אינו מקפיץ שורה כפי שהוא נוהג לעשות את זה עם אלמנט Div. כל מי שעובר ועושה קורס בניית אתרים או לומד באופן עצמאי את html ו- Css , הרוב מתקשים להבין את ההבדלים כי פחות או יותר אפשר לצפות באותם תוצאות גם באמצעות תגית Div ו-Span ע"י שינוי קטן ב- Css. בשביל לא להבהיל אותכם, לפני שנים, גם אני היתי באותה נקודה שבה אתם נמצאים ולא כל כך הבנתי את ההבדלים שבניהם. לכן זה בסדר להתבלבל. בשביל זה אני כותב את המדריך הזה.
ההבדל בין div ו- span ב-html:
כדי להמחיש את הנושא, אני אשתמש במסמך HTML פשוט, שבתוכו נרשום 2 אלמנטים של Div ו-2 של Span.
- <div>This is Div Element one</div>
- <div>This is Div Element two</div>
- <span>This is span Element one</span>
- <span>This is span Element two</span>
כעת גם נגדיר את -Css עבור האלמנטים האלה כדי להמחיש את ההבדל בין Div ו-Span.
- div{border:1px solid #000; padding:10px;}
- span{border:1px solid #000; padding:10px;}
התוצאה שנקבל בדפדפן היא:
לאחר ביצוע כל התהליך, ניתן ליראות שאלמנט Div אוטומטי שובר את השורה ומתחיל שורה חדשה בדפדפן, לעומת זאת אלמנט Span מוצג אחד אחרי השני ללא שבירת שורה.
טיפ:
ניתן לשנות את אלמנט הגוש – Div לאלמנט שורה וכנ"ל את Span, להפוך את אלמנט שורה לאלמנט גוש באמצעות הגדרת 2 שורות קוד בתוך ה-Css.
- div{display:inline}
- span{display:block}
כאן תוכלו להוריד את הקובץ מסמך html מוכן שניתן להריץ אותו בדפדפן, וכמובן לצפות בקוד באמצעות תוכנת עריכה כמו Dreamweaver Cs5 של חברת Adobe.
הורדה: [download id="50"]
יפה מאוד ישר ולעניין.
נ.ב אחלה פד לעכבר אפשר להזמין גם (כמה עולה) ?
.-= בבלוג של גבי בנאי פוסט אחרון הוא: ..מה חדש ב Adobe Creative Suite 5 =-.
לגבי הפד:
http://bit.ly/cgqkDI
נגמר לי. אנשים חטפו את הפדים שלי כמו גרעינים.
אבל בקרוב יהיה עוד. אם ברצונך להזמין פד עבור האתר שלך, יש לך מבחר לא קטן בגוגל. צפה בקישור של Sro.
תודה רבה פוסט חשוב
ענה לי על כמה שאלות
אחלה תמשיך לכתוב על נושאים כאלו
תודה
.-= בבלוג של גלעד אלעזר פוסט אחרון הוא: ..טוויטר- כלי מנצח ליצירת באז =-.
ב div ניתן לשים גם divים אחרים בניגוד ל span