נא עזרתכם לגבי התנהגות דיבים

הנושא בפורום 'קהילת מפתחי אתרי אינטרנט' פורסם ע"י אביגרפי, ‏30/6/11.

  1. אביגרפי

    אביגרפי משתמש רשום

    הצטרף:
    ‏5/11/08
    הודעות:
    458
    תודות :
    1
    נקודות:
    19
    אם מישהו יוכל לעשות סדר ולהסביר איך מתנהגים דיבים שנמצאים אחד בתוך רעהו.
    יש לי דיבים A B C D אחד בתוך השני.

    המגמה שלי בדוגמה המצורפת, לגרום לכך שכל דיב או טקסט או אלמנט שנמצא בפנים יגרום אוטומטית להגדלת הדיבים המכילים. במילים פשוטות - אני רוצה את השוליים הצהובים מסביב לכתום לאורך כל הדף באופן אוטומטי.

    יש לציין שהקובץ שאני מעלה כאן לא נראה זהה בכל הדפדפנים,

    תודה



    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>
    <style type="text/css">
    <!--
    .a {
     background-color: #FF6;
     float: none;
     width: 900px;
     margin-right: auto;
     margin-left: auto;
     position: static;
    }
    .b {
     background-color: #F90;
     float: none;
     width: 800px;
     margin-right: auto;
     margin-left: auto;
     position: static;
    }
    .c {
     background-color: #3C3;
     padding: 0px;
     float: left;
     width: 500px;
     position: static;
     margin-top: 0px;
     margin-right: auto;
     margin-bottom: 0px;
     margin-left: auto;
    }
    .d {
     background-color: #6FF;
     float: right;
     height: 200px;
     width: 300px;
     position: static;
    }
    -->
    </style>
    </head>
    <body>
    <div class="a">AAAAAAAAAAAAAAAAAA<br />
    AAAAAAAAAAAAAAAAA<br />
    AAAAAAAAAAAAAAAAAAAAAAA<br />
    AAAAAAAAAAAAAAAAAAA<br />
    AAAAAAAAAAAAAAAAAA
      <div class="b">BBBBBBBBBBBB<br />
    <br />BBBBBBBBBBBBBB
    <br />BBBBBBBBBBBBBBBBBBB
    <br />BBBBBBBBBBBBBBBBBBB
    <br />BBBBBBBBBBBBBBBBB
        <div class="c">
        <p>CCCCCCCCCCCCCC<br />
          CCCCCCCCCCC<br />
          CCCCCCCCCCCCCCCCC<br />
          CCCCCCCCCCCC
        </p>
        <div class="d">DDDDD<br />
    D<br />
    D<br />
    D<br />
    D<br />
    D<br />
    D<br />
    d<br />
    D<br />
    D<br />
    D<br />
    D<br />
    D</div>
        </div>
     
    </div>
    </div>
     
    
    </body>
    </html>
    
     

    קבצים מצורפים:

    • test.html
      גודל הקובץ:
      KB 1.5
      צפיות:
      0
  2. studio dv.d

    studio dv.d מנהלים פורום עיצוב גרפי פיתוח / אפיון / עיצוב אתרים עיצוב גרפי פרסום וקופירייטינג

    הצטרף:
    ‏14/1/08
    הודעות:
    3,728
    תודות :
    45
    נקודות:
    110
    תשים לב כשיש לך float ימין או שמאל אז הקופסא מסתדרת מצויין
    הבעיה היא כשיש לך float :none אז הפטנט היחיד הוא overflow: hidden;

    במקרה שיש דברים שאתה רוצה שיצופו מחוץ לדיב הזה כגון דיב שבתוכו יושב תפריט נפתח
    יש למצוא את הדרך לתת לזה float: left או right
     
  3. אביגרפי

    אביגרפי משתמש רשום

    הצטרף:
    ‏5/11/08
    הודעות:
    458
    תודות :
    1
    נקודות:
    19
    ודוקא לי נראה שאם אני עושה את כולם FLOAT:NONE ומרג'ין ימין ושמאל אוטומטי - או אז הכל מתנהג כמו שחלמתי - הם יושבים אחד בתוך השני לפי הסדר וגדלים אוטומטית כמו שצריך.
     
  4. תמנתי

    תמנתי משתמש סופר מקצוען פיתוח / אפיון / עיצוב אתרים עיצוב גרפי

    הצטרף:
    ‏17/6/07
    הודעות:
    12,062
    תודות :
    440
    נקודות:
    213
    עיסוק:
    מעצבת UX/UI ובונת אתרי אינטרנט
    מיקום:
    ירושלים
    דף הבית:
    ומה אם לא תגדיר גודל ורוחב, אלא רק מרג'ין?
    כל דיב יגדל בהתאם לתכולה שלו [שהיא או אלמנט, או דיב אחר] לא?
     
  5. אביגרפי

    אביגרפי משתמש רשום

    הצטרף:
    ‏5/11/08
    הודעות:
    458
    תודות :
    1
    נקודות:
    19
    אגדיר שוב בדיוק מה אני רוצה ליצר.

    אני רוצה דיב ראשי בצבע כתום. הכתום יושב בתוך דיב צהוב שרחב ממנו כך שאקבל שוליים צהובים לכל האורך.

    בתוך הדיב הכתום אני רוצה להכניס כל מה שבא לי ושיגדל אוטומטית ביחד עם הדיב הצהוב שמכיל אותו.
     
  6. אביגרפי

    אביגרפי משתמש רשום

    הצטרף:
    ‏5/11/08
    הודעות:
    458
    תודות :
    1
    נקודות:
    19
    המסקנות בינתיים:

    אם לדיבים הפנימיים אני נותן FLOAT:NONE הן מתישרות לשמאל, והכל עובד
    לפי החלום שלי.

    גם אם אני מוסיף מרג'ין, הן עדיין מתנהגות כמו התכנית.

    בכל הדפדפנים זה נראה בסדר.

    השאלה אם תקין להגדיר FLOAT:NONE ואיך הוא יודע להתישר לשמאל?
     
  7. studio dv.d

    studio dv.d מנהלים פורום עיצוב גרפי פיתוח / אפיון / עיצוב אתרים עיצוב גרפי פרסום וקופירייטינג

    הצטרף:
    ‏14/1/08
    הודעות:
    3,728
    תודות :
    45
    נקודות:
    110
    זאת אומרת שהבעיה מתחילה כאשר יש לך דיב עם float: none שבתוכו דיב עם float: right או left

    וכשזה קורה הפתרון הוא לתת לדיב בעוטף את החוק overflow : hidden
     
  8. אביגרפי

    אביגרפי משתמש רשום

    הצטרף:
    ‏5/11/08
    הודעות:
    458
    תודות :
    1
    נקודות:
    19
    אוקיי תודה, זה גם עובד.
    אין בעיה לתת גם לדיבים הפנימיים את ההגדרה הזו? (כי גם הם עוטפים דיב וכו')
     
  9. studio dv.d

    studio dv.d מנהלים פורום עיצוב גרפי פיתוח / אפיון / עיצוב אתרים עיצוב גרפי פרסום וקופירייטינג

    הצטרף:
    ‏14/1/08
    הודעות:
    3,728
    תודות :
    45
    נקודות:
    110
    היום קראתי עוד שני פתרונות לבעיה הזאתי
    (פרס למוצא את שני הפתרונות בקובץ המצורף)

    טוב כמובן אם לא תמצאו תמיד אפשר לשאול ואז אני יסביר בהרחבה, פשוט השעה קצת מאוחרת

    אגב הפתרון נלקח מכאן
    http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout/
     

    קבצים מצורפים:

    • test.html
      גודל הקובץ:
      KB 1.7
      צפיות:
      0