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

עיצוב ותקשורת חזותית >> תוכן מקצועי

הדפסת צבע לבן - מה זה נותן לנו?
אחת האופציות שקיימות בדפוס היא הדפסה בצבע לבן, אופציה זו איננה חדשה וקיימת שנים רבות ונכנסה עם התפתחות טכנולוגיית ההדפסה הדיגיטלית גם למכונות...
5.00 star(s) 1 ratings
מה כתוב כאן?
יש לי כמה חברות שרגילות לקבל ממני מייל עם הכותרת: מה כתוב כאן, סיפרה לי אחת, שלפעמים שהיא רוצה השראה בעבודה שלה, היא נכנסת למיילים, כותבת בנושא...

בואו ללמוד ולדעת יותר>>> מיטב הקורסים באתר פרוג אונליין

אביגרפי

משתמש רשום
אם מישהו יוכל לעשות סדר ולהסביר איך מתנהגים דיבים שנמצאים אחד בתוך רעהו.
יש לי דיבים 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>
 

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

studio dv.d

משתמש מקצוען
עיצוב גרפי
פיתוח / אפיון / עיצוב אתרים
תשים לב כשיש לך float ימין או שמאל אז הקופסא מסתדרת מצויין
הבעיה היא כשיש לך float :none אז הפטנט היחיד הוא overflow: hidden;

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

אביגרפי

משתמש רשום
נכתב ע"י studio dv.d;596147:
תשים לב כשיש לך float ימין או שמאל אז הקופסא מסתדרת מצויין
הבעיה היא כשיש לך float :none אז הפטנט היחיד הוא overflow: hidden;

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

תמנתי

משתמש סופר מקצוען
עיצוב גרפי
פיתוח / אפיון / עיצוב אתרים
ומה אם לא תגדיר גודל ורוחב, אלא רק מרג'ין?
כל דיב יגדל בהתאם לתכולה שלו [שהיא או אלמנט, או דיב אחר] לא?
 

אביגרפי

משתמש רשום
נכתב ע"י גינגית;596153:
ומה אם לא תגדיר גודל ורוחב, אלא רק מרג'ין?
כל דיב יגדל בהתאם לתכולה שלו [שהיא או אלמנט, או דיב אחר] לא?
אגדיר שוב בדיוק מה אני רוצה ליצר.

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

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

אביגרפי

משתמש רשום
המסקנות בינתיים:

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

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

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

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

studio dv.d

משתמש מקצוען
עיצוב גרפי
פיתוח / אפיון / עיצוב אתרים
זאת אומרת שהבעיה מתחילה כאשר יש לך דיב עם float: none שבתוכו דיב עם float: right או left

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

אביגרפי

משתמש רשום
נכתב ע"י studio dv.d;596273:
זאת אומרת שהבעיה מתחילה כאשר יש לך דיב עם float: none שבתוכו דיב עם float: right או left

וכשזה קורה הפתרון הוא לתת לדיב בעוטף את החוק overflow : hidden
אוקיי תודה, זה גם עובד.
אין בעיה לתת גם לדיבים הפנימיים את ההגדרה הזו? (כי גם הם עוטפים דיב וכו')
 

studio dv.d

משתמש מקצוען
עיצוב גרפי
פיתוח / אפיון / עיצוב אתרים
היום קראתי עוד שני פתרונות לבעיה הזאתי
(פרס למוצא את שני הפתרונות בקובץ המצורף)

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

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

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

לוח אירועים וקורסים קרובים

למעלה