רוטר - צריך עזרה עם CSS - 3 שאלות פשוטות..

יומן פעילות	לוח שנה	מבזקי חדשות	תקנון	RSS	כותרות	כותרות לפי תגובה	ניקוי קוקיז	IP	להורדת אפליקציה
eBay	AliExpress	GearBest	Amazon	Booking	Kiwi	SkyScanner	Trip Advisor

"צריך עזרה עם CSS - 3 שאלות פשוטות.."

גירסת הדפסה

קבוצות דיון פיתוח, תיכנות ובניית אתרים נושא #20204	מנהל סגן המנהל מפקח Winner צל"ש מומחה

אשכול מספר 20204

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

21:47 19.09.13

צריך עזרה עם CSS - 3 שאלות פשוטות..

ערכתי לאחרונה בתאריך 19.09.13 בשעה 21:51 בברכה, sza

ככה הדף נראה עכשיו:
https://dl.dropboxusercontent.com/u/102989703/localhost.png#
זה הCSS:
https://dl.dropboxusercontent.com/u/102989703/style.css
#page הוא DIV שתוחם את כל הדף (מתחיל מיד אחרי הBODY ומסתיים מיד לפני ה/BODY)
BOX הוא הCLASS של כל משבצת כזו. בתוך הHTML של התיבות שנמצאות באמצע (הארוכות יותר) מוגדר style="width:40%" ולכן הן ארוכות יותר בכמעט כפליים (לא כולל הPADDING).
3 שאלות:
1- למה הDIV ששמתי מיד אחרי הBODY עם הID="page" לא גורם לכל הדף להיות ממורכז? (אפשר לראות שהCSS שלו הוא margin: 0 auto; בלבד)
2- איך אפשר לגרום לתיבות שבאמצע (הארוכות יותר עם הכותרות 'פעילות אחרונה' ו 'הדפים הנמתחים ביותר') להיות ברוחב כפול בדיוק מהתיבות הקטנות יותר כשעובדים באחוזים? (כרגע שמתי אותן 40% ואת הקטנות 20% ואפשר לראות שיש מרווח. אני מבין שברגע שאצליח לבצע את סעיף 1 בצורה נכונה זה פחות יפריע (הרווח העודף יהיה באמצע) , אבל אני עדיין רוצה שלא יהיה מקום עודף.
3- כרגע אני פשוט שם DIV אחרי DIV בקובץ HTML וברגע שנגמר המקום ברוחב המסך הדפדפן מוריד את הDIV ל"שורה חדשה" (ההגדרה היא float:right; ). במידה והייתי רוצה לפתוח DIV בשורה חדשה ועוד לא נגמר לי המקום בשורה הנוכחית (כלומר, הייתי יכול להכניס שם עוד DIV כזה), איך אני עושה את זה?
תודה רבה

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

שתף

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

האשכול	מחבר	תאריך כתיבה	מספר
משהו כזה בערך?	BLACK DOG	19.09.13 22:03	1
לא הבנתי מה עשית שם	sza	19.09.13 23:35	2
תשובה	BLACK DOG	20.09.13 00:36	3
שים לב	sza	20.09.13 00:43	4
תבין שעם רוחב 100% של המסך אתה לא תראה מירכוז של האלמנטים בפנים	BLACK DOG	20.09.13 01:58	5
אוקי, אז איך אני מקבל את אותה התוצאה בלי שימוש בFLOAT?	sza	20.09.13 11:39	6
עדכון	sza	20.09.13 13:47	7
שלח לי את הקובץ HTML	amit2602	20.09.13 14:34	8
אני אודה לך מאד	sza	20.09.13 14:40	9
תקשיב.. עשית שם קצת בלאגן	amit2602	20.09.13 15:16	10
הבנתי את הפתרון שלך והבנתי גם איך זה מסדר את כל העסק	sza	20.09.13 15:28	11
תראה מה נעשה	amit2602	20.09.13 15:32	12
וואו אני אשמח מאד	sza	20.09.13 15:36	13
פתרון פשוט יותר	amit2602	20.09.13 15:49	14
מכתב	sza	20.09.13 16:02	15
זה פתרון פשוט לא נכון,	last_test	21.09.13 11:46	16
WOW תודה רבה!!	sza	21.09.13 20:35	17
צחי תסתכל על דוגמא נוספת	amit2602	24.09.13 00:49	19
תודה רבה!	sza	25.09.13 15:42	23
יפה מאוד! זה היה ברור לי אחי	amit2602	21.09.13 21:27	18
תשתמש ב display:inline-block. הם יהיו צמודים אחד לשני	Ice Cold	24.09.13 01:54	20
תודה רבה, אנסה גם את זה :)	sza	25.09.13 09:44	21
#19	amit2602	25.09.13 11:01	22
אה לא ראיתי שענית לו על זה חח	Ice Cold	25.09.13 20:36	24

BLACK DOG
חבר מתאריך 1.8.02
150 הודעות

22:03 19.09.13

1. משהו כזה בערך?
בתגובה להודעה מספר 0

http://jsfiddle.net/PthGb/

קשה להיות מדויק באחוזים למרות שעל פניו עם אמרת קטנים 20% אז כפול מזה אמור להיות 40% וכמו שאתה רואה זה לא מדויק
ובנוגע למירכוז עם לא נתת רוחב לדיב אז הוא ממורכז בתאכלס פשוט אין לו רוחב אז הוא כאילו ממורכז לכל הרוחב של המסך
אז עם תשים לב נתתי לו רוחב ועכשיו אתה רואה את המירכוז

Redot

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

23:35 19.09.13

2. לא הבנתי מה עשית שם
בתגובה להודעה מספר 1

כשאני עושה העתק הדבק מ #page שרשמת לקובץ הCSS שלי זה לא משנה כלום,
בנוסף, הIDE מראה שגיאה על השורה:
display:box; שרשמת.
אבל משום מה התוצאה שלך היא טובה (בJSFIDDLE).
מה אני מפספס?

בנוסף, יש לך מושג לגבי שאלות 2 ו 3 ?
תודה רבה עד כה

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

BLACK DOG
חבר מתאריך 1.8.02
150 הודעות

00:36 20.09.13

3. תשובה
בתגובה להודעה מספר 2

זה היה אמור להיות
display: block
בנוגע לשלוש אני לא מכיר דרך ב ל css לעשות את זה כי זה משהו דינמי מדי לטעמי
ושתיים תראה את מה שעיתי שם עם ה ;double

Redot

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

00:43 20.09.13

4. שים לב
בתגובה להודעה מספר 3

ערכתי לאחרונה בתאריך 20.09.13 בשעה 01:21 בברכה, sza

שכשאני משנה את הערך
max-width: 100%;
בתוך PAGE שרשמת, התוצאה מראה שעדיין העסק לא ממורכז: (תוכל להבחין בזה יותר בקלות אם תמשוך את חלונית התצוגה של JSFIDDLE למקסימום רוחב מסך)
http://jsfiddle.net/PthGb/1/
שוב תודה עד כה,
בחיפוש ברשת אני רואה שאני לא הראשון שנתקל בבעיה למרכז אלמנטים שהוגדרו כFLOAT.
טרם מצאתי פתרון.

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

BLACK DOG
חבר מתאריך 1.8.02
150 הודעות

01:58 20.09.13

5. תבין שעם רוחב 100% של המסך אתה לא תראה מירכוז של האלמנטים בפנים
בתגובה להודעה מספר 0

ואם אני לא טועה לא ניתן למרכז FLOAT כיזה ניגוד למה שהפלוט נותן

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

11:39 20.09.13

6. אוקי, אז איך אני מקבל את אותה התוצאה בלי שימוש בFLOAT?
בתגובה להודעה מספר 5

איך אפשר להצמיד DIVים אחד לשני?
או שאולי אני לא צריך להשתמש בDIV?

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

13:47 20.09.13

7. עדכון
בתגובה להודעה מספר 6

אוקי, הצלחתי לעשות את זה פרוש שווה על כל המסך ע"י שימוש בpadding וב margin באחוזים גם הם.
התוצאה:
https://dl.dropboxusercontent.com/u/102989703/localhost2.png#
עדיין יש בעית מרכוז (אפשר לראות בתמונה שיש בצד שמאל שטח פנוי שלא קיים בצד ימין) אבל היא כמעט בלתי מורגשת ולכן היא לא לחוצה לי...
אשמח אם מישהו יוכל להבהיר לי את העניינים האלו
תודה רבה על העזרה ושבת שלום

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

amit2602
חבר מתאריך 19.6.13
1110 הודעות

14:34 20.09.13

8. שלח לי את הקובץ HTML
בתגובה להודעה מספר 7

אני אסדר לך את זה ואשלח לך + הסבר

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

14:40 20.09.13

9. אני אודה לך מאד
בתגובה להודעה מספר 8

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

amit2602
חבר מתאריך 19.6.13
1110 הודעות

15:16 20.09.13

10. תקשיב.. עשית שם קצת בלאגן
בתגובה להודעה מספר 9

במקום להתעסק בזה יותר מדי ולכתוב לך את הדף מחדש, יש פתרון פשוט.
הוספתי DIV אחרי #page עם קלאס page2 שמכיל בתוכו את כל הקופסאות
לדיב הזה הוספתי CSS
margin: 0% 4% 0% 0%;
בלבד.
זה מביא אותך לתוצאה שרצית בלי לשבור את הראש.
ככה זה נראה בCSS
#page {
margin: 0 auto;
display: block;
max-width: 100%;
}
.page2{
margin:0% 4% 0% 0%;
}

וככה זה בקובץ HTML
<div id="page">
<div class="page2">
כמובן שpage2 נסגר גם לפני #page

האם זה מספק אותך?

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

15:28 20.09.13

11. הבנתי את הפתרון שלך והבנתי גם איך זה מסדר את כל העסק
בתגובה להודעה מספר 10

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

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

amit2602
חבר מתאריך 19.6.13
1110 הודעות

15:32 20.09.13

12. תראה מה נעשה
בתגובה להודעה מספר 11

אני אשב הערב או מחר ואבנה לך דף זהה בצורה נכונה ואשלח לך. ככה תלמד הכי טוב.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

15:36 20.09.13

13. וואו אני אשמח מאד
בתגובה להודעה מספר 12

תודה רבה

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

amit2602
חבר מתאריך 19.6.13
1110 הודעות

15:49 20.09.13

14. פתרון פשוט יותר
בתגובה להודעה מספר 13

יש פתרון פשוט יותר ממה שנתתי לך, שהאמת זה בסדר להשתמש בו, זה תקין.
תוסיף לbody את השורה הבאה
overflow: hidden;
ולאחר מכן הCSS של #page צריך להיות רק זה
position: relative;
right: 2%;
ובעצם הגעת לאותה תוצאה בלי להוסיף עוד DIV.

נראה לי האמת שזה תקין בצורה הזו..

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

16:02 20.09.13

15. מכתב
בתגובה להודעה מספר 14

האמת שזה גם עבד כשעשיתי ב#PAGE פשוט:
margin-right: 2%;
אבל סתם ככה מעניין אותי איך היה כותב את אותו הדבר אדם עם נסיון ארוך משלי
תודה רבה על הכל

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

last_test
חבר מתאריך 20.8.13
328 הודעות

11:46 21.09.13

16. זה פתרון פשוט לא נכון,
בתגובה להודעה מספר 14

אז שייבנה את כל האתר שלו עם position: relative/absolute ויימקם דברים איך שבא לו, וייתן ל-browser לעשות re-painting כל שניה מחדש.
כדי למקם את האלמנטים בצורה הזאת פשוט צריך להגדיל טיפה ראש, נצא מנקודת הנחה שזה לא דינאמי, תמיד קופסא אחת עליונה ו-2 מתחתיה, אז יש לנו כמה דרכים לפתור את זה.
1.להשתמש בטבלה, שימוש ב-attributes כמו colspan/rowspan פותרים לו את זה גם במצב שזה דינאמי.
אתמול היה לי קצת זמן אז עשיתי לך דוגמא לאיך אני פחות או יותר חושב שזה צריך להראות מבחינת המבנה.
http://haogrim.net/test.html

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

20:35 21.09.13

17. WOW תודה רבה!!
בתגובה להודעה מספר 16

נהנתי לראות את הפתרון שלך, תודה רבה!

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

amit2602
חבר מתאריך 19.6.13
1110 הודעות

00:49 24.09.13

19. צחי תסתכל על דוגמא נוספת
בתגובה להודעה מספר 17

http://thephuse.com/demos/inlineblock/

קוד מושלם.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

15:42 25.09.13

23. תודה רבה!
בתגובה להודעה מספר 19

אבדוק אחרי החג לעומק.
חג שמח

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

amit2602
חבר מתאריך 19.6.13
1110 הודעות

21:27 21.09.13

18. יפה מאוד! זה היה ברור לי אחי
בתגובה להודעה מספר 16

שזה לא הפתרון האולטימטיבי. זה פשוט פתרון לקוד שהוא כבר כתב מבלי לשכתב הכל. גם אמרתי את זה.

ברור שעדיף כמו שאתה כתבת, הרבה יותר תקין ומסודר.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Ice Cold

חבר מתאריך 3.8.02
28041 הודעות, 19 פידבק

01:54 24.09.13

20. תשתמש ב display:inline-block. הם יהיו צמודים אחד לשני
בתגובה להודעה מספר 6

מבלי ההשלכות של float.

נשלח ע"י הסלולרי

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

sza

חבר מתאריך 26.4.02
12357 הודעות, 22 פידבק

09:44 25.09.13

21. תודה רבה, אנסה גם את זה :)
בתגובה להודעה מספר 20

http://webleader.co.il/websites/rotter/amionline.php#.jpg צחי.

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

amit2602
חבר מתאריך 19.6.13
1110 הודעות

11:01 25.09.13

22. #19
בתגובה להודעה מספר 21

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד

Ice Cold

חבר מתאריך 3.8.02
28041 הודעות, 19 פידבק

20:36 25.09.13

24. אה לא ראיתי שענית לו על זה חח
בתגובה להודעה מספר 22

נשלח ע"י הסלולרי

(ניהול: מחק תגובה)

מכתב זה והנלווה אליו, על אחריות ועל דעת הכותב בלבד