המרה מtable לdiviים בCSS - הוסטס

trupix · 15-11-11, 06:19

הי,

לפני שאתן את הקוד, אתן תמונה להמחיש מה אני צריך:

כמו שאתם שמים לב, אני רוצה שרוחבו של החלק האמצעי יהיה 962px, וצד ימין ושמאל שלו יתרחבו עפ"י גודל החלון. כשהגובה של שלושת הטבלאות הללו יהיה 90px

הקוד שלי בtable שאינני מצליח למצוא פתרון תיקני הולם:

PHP קוד:


			
<table style="width:100%; height:90px;">

    <tr>

        <td style="background-color:blue;"></td>

        <td style="background-color:green; width: 965px;"></td>

        <td style="background-color:red;"></td>

    </tr>

</table>

תודה לעוזרים

trupix · 15-11-11, 18:02

מישהו? אני עדיין לא מצליח למצוא פתרון למרות שזה נשמע מאוד פשוט

Itay · 15-11-11, 19:44

אפשר לעשות את זה עם דיבים, אבל לפעמים אין שום סיבה להשתמש סתם בדיבים כשזה רק מסבך את העניינים יותר
אתה יכול להגדיר display: table-cell ולהגיע למצב דומה או ליצור משהו עם JS שיעדכן את הגודל של התא לפי הרוחב של המסך + מצבים של הקטנת החלון, אבל למה לנסות לחקות טבלה כשאתה יכול להשתמש בה?

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

trupix · 15-11-11, 20:20

טבלה אכן מפשטת את הדברים במקרה הזה.
אין לי שמץ איך לעשות את זה נכון בDIV. ניסיתי הכל, כולל table cell.

IMNoob · 15-11-11, 21:04

זה בהכרח חייב להיות טבלה? אולי תגדיר את הצדדים עם span אם מדובר על תמונה?

trupix · 15-11-11, 22:01

אני לא מצליח ..

אני שוב מתאר מה אני לא מצליח לעשות.

אני צריך שרוחב החלק הכחול יהיה מוגדר מראש נגיד 950 פיקסלים. והוא ימוקם באמצע.
צד ימין שלו יהיה DIV בצבע X, ושמאל שלו יהיה DIV בצבע Y.

שניהם יקבלו רוחב עפ"י רוחב חלון הדפדפן, והאמצע למעשה נשאר 950 תמיד.

איזה מחרפן זה.
עזרה ?

Itay · 15-11-11, 22:15

מה אתה מנסה להשיג בזה? אם זה רק לצבוע שני צבעים אתה יכול לשים שני דיבים כל אחד ב-50% עם position: absolute עם z-index נמוך, ומעליהם את הדיב של ה-950 עם z-index יותר גבוה

בכל מקרה אני בודק את ה-table-cell רגע

עריכה: זה עובד:

קוד:

<html>
<head>
    <style>
    #d1 { width: 100%; display: table; }
    #i1,#i2,#i3 { display: table-cell; background: red; height: 250px; }
    #i2 { width: 950px; background: blue; }
    </style>
</head>
<body>

<div id="d1">
    <div id="i1">&nbsp;</div>
    <div id="i2">&nbsp;</div>
    <div id="i3">&nbsp;</div>
</div>

</body>
</html>

בכל מקרה כמו שכבר אמרתי - זה מפגר לעשות את זה, אתה יכול לחסוך את השורות של ה-CSS לעשות טבלה בצורה יותר פשוטה

בניה · 15-11-11, 23:15

מה אתה מנסה לעשות? אולי יש דרך יותר נכונה לעשות את זה?
תעיף מבט כאן:
http://www.upfile4u.net/Files/6j6h3d.html

to_the right
ו
to_the left
מיועדים לתוכן, כשהירוק זה בשביל שזה ימתח לכל רוחב העמוד.

trupix · 15-11-11, 23:17

אוח, בניה,על פניו - נראה לי עלית על זה.
אמנם המסגרת הצהובה איננה נחוצה, אך אני חושב שזה זה.

אבדוק עוד קצת את הקוד ואגיב לך בעוד כמה דקות

Itay תודה רבה גם לך.

בהערכה רבה..

עריכה:
אוקי זה עדיין לא זה .. החלטתי לעלות פשוט דוגמא (נראה לי הייתי צריך לעשות זאת קודם)

ליחצו כאן

אם תשימו לב, באמצע יש לנו עמודה עם רקע logo.jpg, בצד ימין שלה יש עמודה עם רקע שתואם לצבע הכי ימיני בלוגו, ובצד שמאל יש עמודה עם רקע שתואם לצד הכי שמאלי של הלוגו

עידכון נוסף:
איתי, הקוד שלך היה בדיוק מה שחיפשתי! (שזה מאוד תמוהה, כי ניסיתי את table-cell חח)

תודה רבה חבר'ה.
לילה טוב.

BuildDream · 15-11-11, 23:38

PHP קוד:


			
<div style="height:90px;background: orange;">

    <div style="width:950px;height:90px;position:relative;top:0px;right:50%;margin-right:-475px;background:blue;">

        תוכן של הבלוק המרכזי

    </div>

</div>

15-11-11, 06:19	# 1
trupix חבר מתקדם מיני פרופיל תאריך הצטרפות: Sep 2009 גיל: 34 הודעות: 391	המרה מtable לdiviים בCSS הי, לפני שאתן את הקוד, אתן תמונה להמחיש מה אני צריך: כמו שאתם שמים לב, אני רוצה שרוחבו של החלק האמצעי יהיה 962px, וצד ימין ושמאל שלו יתרחבו עפ"י גודל החלון. כשהגובה של שלושת הטבלאות הללו יהיה 90px הקוד שלי בtable שאינני מצליח למצוא פתרון תיקני הולם: PHP קוד: `<table style="width:100%; height:90px;"> <tr> <td style="background-color:blue;"></td> <td style="background-color:green; width: 965px;"></td> <td style="background-color:red;"></td> </tr> </table>` תודה לעוזרים

15-11-11, 19:44	# 3
Itay חבר מתקדם מיני פרופיל תאריך הצטרפות: Oct 2005 גיל: 35 הודעות: 564	אפשר לעשות את זה עם דיבים, אבל לפעמים אין שום סיבה להשתמש סתם בדיבים כשזה רק מסבך את העניינים יותר אתה יכול להגדיר display: table-cell ולהגיע למצב דומה או ליצור משהו עם JS שיעדכן את הגודל של התא לפי הרוחב של המסך + מצבים של הקטנת החלון, אבל למה לנסות לחקות טבלה כשאתה יכול להשתמש בה? בקיצור - טבלה זה לא תמיד רע גם כשמדובר בבסיס של האתר ולא כטבלה אמיתית, צריך לדעת פשוט להבדיל מתי כן להשתמש בה ומתי לא __________________ הורדת שירים מיוטיוב, הורדת שירים, שירים להורדה, שירים להורדה מיוטיוב, העלאת תמונות

15-11-11, 22:01	# 6
trupix חבר מתקדם מיני פרופיל תאריך הצטרפות: Sep 2009 גיל: 34 הודעות: 391	אני לא מצליח .. אני שוב מתאר מה אני לא מצליח לעשות. אני צריך שרוחב החלק הכחול יהיה מוגדר מראש נגיד 950 פיקסלים. והוא ימוקם באמצע. צד ימין שלו יהיה DIV בצבע X, ושמאל שלו יהיה DIV בצבע Y. שניהם יקבלו רוחב עפ"י רוחב חלון הדפדפן, והאמצע למעשה נשאר 950 תמיד. איזה מחרפן זה. עזרה ? Last edited by trupix; 15-11-11 at 22:09..

15-11-11, 22:15	# 7
Itay חבר מתקדם מיני פרופיל תאריך הצטרפות: Oct 2005 גיל: 35 הודעות: 564	מה אתה מנסה להשיג בזה? אם זה רק לצבוע שני צבעים אתה יכול לשים שני דיבים כל אחד ב-50% עם position: absolute עם z-index נמוך, ומעליהם את הדיב של ה-950 עם z-index יותר גבוה בכל מקרה אני בודק את ה-table-cell רגע עריכה: זה עובד: קוד: <html> <head> <style> #d1 { width: 100%; display: table; } #i1,#i2,#i3 { display: table-cell; background: red; height: 250px; } #i2 { width: 950px; background: blue; } </style> </head> <body> <div id="d1"> <div id="i1"> </div> <div id="i2"> </div> <div id="i3"> </div> </div> </body> </html> בכל מקרה כמו שכבר אמרתי - זה מפגר לעשות את זה, אתה יכול לחסוך את השורות של ה-CSS לעשות טבלה בצורה יותר פשוטה __________________ הורדת שירים מיוטיוב, הורדת שירים, שירים להורדה, שירים להורדה מיוטיוב, העלאת תמונות Last edited by Itay; 15-11-11 at 22:25..

15-11-11, 23:15	# 8
בניה משתמש - היכל התהילה מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: נחושה הודעות: 3,434	מה אתה מנסה לעשות? אולי יש דרך יותר נכונה לעשות את זה? תעיף מבט כאן: http://www.upfile4u.net/Files/6j6h3d.html to_the right ו to_the left מיועדים לתוכן, כשהירוק זה בשביל שזה ימתח לכל רוחב העמוד. __________________ קו ישר, כי אפשר גם אחרת


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

15-11-11, 18:02	# 2
trupix חבר מתקדם מיני פרופיל תאריך הצטרפות: Sep 2009 גיל: 34 הודעות: 391	מישהו? אני עדיין לא מצליח למצוא פתרון למרות שזה נשמע מאוד פשוט

15-11-11, 20:20	# 4
trupix חבר מתקדם מיני פרופיל תאריך הצטרפות: Sep 2009 גיל: 34 הודעות: 391	טבלה אכן מפשטת את הדברים במקרה הזה. אין לי שמץ איך לעשות את זה נכון בDIV. ניסיתי הכל, כולל table cell.

15-11-11, 21:04	# 5
IMNoob חבר בקהילה מיני פרופיל תאריך הצטרפות: Jul 2007 הודעות: 227	זה בהכרח חייב להיות טבלה? אולי תגדיר את הצדדים עם span אם מדובר על תמונה?

15-11-11, 23:17	# 9
trupix חבר מתקדם מיני פרופיל תאריך הצטרפות: Sep 2009 גיל: 34 הודעות: 391	אוח, בניה,על פניו - נראה לי עלית על זה. אמנם המסגרת הצהובה איננה נחוצה, אך אני חושב שזה זה. אבדוק עוד קצת את הקוד ואגיב לך בעוד כמה דקות Itay תודה רבה גם לך. בהערכה רבה.. עריכה: אוקי זה עדיין לא זה .. החלטתי לעלות פשוט דוגמא (נראה לי הייתי צריך לעשות זאת קודם) ליחצו כאן אם תשימו לב, באמצע יש לנו עמודה עם רקע logo.jpg, בצד ימין שלה יש עמודה עם רקע שתואם לצבע הכי ימיני בלוגו, ובצד שמאל יש עמודה עם רקע שתואם לצד הכי שמאלי של הלוגו עידכון נוסף: איתי, הקוד שלך היה בדיוק מה שחיפשתי! (שזה מאוד תמוהה, כי ניסיתי את table-cell חח) תודה רבה חבר'ה. לילה טוב. Last edited by trupix; 15-11-11 at 23:33..

15-11-11, 23:38	# 10
BuildDream עסק רשום [?] מיני פרופיל תאריך הצטרפות: Oct 2010 הודעות: 527	PHP קוד: `<div style="height:90px;background: orange;"> <div style="width:950px;height:90px;position:relative;top:0px;right:50%;margin-right:-475px;background:blue;"> תוכן של הבלוק המרכזי </div> </div>` __________________ BuildDream בניית אתרי אינטרנט לשירותך. עסק רשום במס הכנסה ומספק קבלות כחוק. www.BuildDream.co.il - www.iBuild.co.il

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)