טיפ: קונטיינר עוטף

ליאורה זכאי | 23.06.2013

תוכן האתר שלנו מכיל רכיבים רבים: מלל, תמונות, סרטוני וידאו ועוד. כדי שהתוכן לא “יתפזר” על פני כל השטח, אנו יוצרים קונטיינר – דיב שמאגד את כל הרכיבים. ואז מתחילות התקלות. בטיפ הזה, מוסברת שיטה איך להכניס את כל הרכיבים אל הקונטיינר בלי להכניס קוד מיותר ל-HTML.

כאשר מציפים דיבים בתוך קונטיינר מקבלים לעיתים רבות את המצב המרגיז שהקונטיינר אינו “עוטף”
את הדיבים הצפים בתוכו,
87 1
במצב הישן  נהגנו לשים דיב עם פקודת  clear:both אחרי הדיבים הצפים כדי לקבל את
עטיפת הקונטיינר סביב הדיב הצף.
לדוגמה
87 2
<div> <!– קונטיינר עוטף –>
<div style=”float:left; width:30%;”><p>Some content</p></div>
<p>Text not inside the float</p>
<div style=”clear:both;”></div>
</div>
CSS2 הרשה להוסיף תוכן נוסף בסוף האלמנט דרך שימוש בסטייל. כלומר, אין צורך להוסיף כלום
בקוד HTML אלא להשתמש בקוד הסגנון בפקודת after:
כעת עשינו צעד קדימה,  דמו לעצמיכם שאנחנו מכניסים בפקודת  ה-”אפטר” נקודה ואפילו
נותנים לה אפיון של בלוק, גובה 0, clear:both וניראות שלילית.
כל המאפיינים האלה לנקודה יבטיחו שבפועל לא יראו אותה כלל.. אלא ש…
מצב הבלוק יכריח את האלמנט לקחת את כל רוחב השורה, גובה 0 וניראות שלילית יבטיחו גם הם שלא
יראו את התוכן שהוא הנקודה. וקיבלנו פקודת סטייל בלבד שמכריחה את הקונטיינר ל”רדת” ולעטוף את האלמנט הצף שבתוכה.
ככה נראת הפקודה..
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
והפקודה לדיב נראת כך:
<div id=”warper”  class=”clearfix”>
87 3
כמובן שאין טוב בלי רע.. אקספלורר עדיין לא ממש מבין את ההוראה ויש לתת לו במיוחד הסבר…
כרגיל…
נישתמש בפקודת הזום =0 לאקספלורר ובסופו של התהליך נראה את הפקודה כך:
<style type=”text/css”>
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style><!– main stylesheet ends, CC with new stylesheet below… –>
<!–[if IE]>
<style type=”text/css”>
.clearfix {
zoom: 1;     /* triggers hasLayout */
}  /* Only IE can see inside the conditional comment
and read this CSS rule. Don’t ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]–>
ובתוך קוד HTML נראה את ההפניה כך
<div>
<div>Float</div>
<div>Float</div>
ללא תוספת html בקוד  אלא רק תוספת סטייל לקונטיינר
</div>
וכך ניפתרה בעיית הקונטיינר שלא עטף….
print

 

כתבות נוספות שיכולות לעניין אותך:

  • נכתב ע"י
    כאשר מצלמים סרט וידאו ממספר מצלמות בו-זמנית, נדרשת ׳עריכה מרובת מצלמות׳. בעידן בו לרובינו מצלמת וידאו בטלפון הנייד ומצלמות ״סטילס״...
    23.06.2013 | כתב: ליאורה זכאי
  • נכתב ע"י
    הסטודיו לעיצוב חזותי של זגמייסטר & וולש בניו יורק עשיר בעבודות מרתקות. במאמר קצר זה נתמקד במספר עבודות העושות שימוש בטיפוגרפיה...
    23.06.2013 | כתב: ליאורה זכאי
  • נכתב ע"י
    ציפורים הן לבטח מבעלי החיים היפים והמסקרנים ביותר בטבע – שלל צבעים, גדלים, מקורים והתנהגויות שמהוות אתגר עבור כל חובב...
    23.06.2013 | כתב: ליאורה זכאי
-

שלח לחבר

מלאו את הפרטים הבאים:







גללתם 1112 פיקסלים! רוצים שוב?

להשארת פרטים
-

יש לנו עוד כל כך הרבה לספר, ואנחנו לא פחות מרשימים בטלפון ואחד על אחד. מוזמנים להתקשר: 03-5291888 או להשאיר פרטים בטופס

  • רותם

  • ניר







להשארת פרטים