IOPanel

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

תוכנה ומערכות הפעלה תוכנות , יישומים, מערכות הפעלה , המלצות לפני קניה , מדריכים , כלים מומלצים ותמיכה טכנית.

דבר חופשי : תוכנה ומערכות הפעלה

קיבוע יעיל של ה- Footer

CSS קוד: /* Footer */ #footer { clear: both; padding: 20px 50px; border-top: 4px solid #788714; background: #8E9C34; } #footer ...
תגובה
 
קישור חוזר הגדרות אשכול אפשרויות הצגת נושא
ישן 03-03-08, 1:13   #1 (קישור ישיר)
IO Master
 
תאריך הצטרפות: Jan 2007
הודעות: 5,057
ברירת מחדל קיבוע יעיל של ה- Footer

CSS
קוד:
/* Footer */ #footer { clear: both; padding: 20px 50px; border-top: 4px solid #788714; background: #8E9C34; } #footer p { width: 770px; margin: 0 auto; font-size: x-small; color: #FFFFFF; } #footer a { text-decoration: underline; color: #FFFFFF; } #footer a:hover { text-decoration: underline; } /* Footer > Legal */ #legal { } /* Footer > Links */ #links { }
HTML
קוד:
 
<div id="footer"> <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p> </div>
בפשטות, מה שבעצם קורה הוא כל שינוי שאני מבצע בתוכן האתר, לדוגמא מחיקת שורות של טקסט, גורם למיקום של ה- Footer לעלות לחלק העליון ולהשאיר מתחתיו "WHITE SPACE", הנה דוגמא:


מה שבעצם אני רוצה וצריך לבצע הוא בצורה כלשהיא לקבע את ה- Footer ככה שתמיד ישאר בתחתית של הדף, ללא שום תלות בתוכן המתווסף/הנמחק.

ניסיתי לבצע זאת אך נתקלתי בכמה בעיות:
קודם כל, כשהשתמשתי ב- Position Absolute, ה- Footer נשאר תמיד בחלק התחתון של המסך (של המסך, לא של הדף), מבלי לזוז, אז ברגע שנניח והייתי מקטין את החלון של האקספלורר, ה- Footer היה נשאר במקומו, ולא זז כך שהוא פשוט עולה על כל האתר, הנה דוגמא להמחשה:

בנוסף ברגע שאני מוסיף מידע (שורות טקסט לדוגמא) לאתר, אז ה- Footer לא יורד למטה אוטומטית, אלא נשאר באותו מקום ובעצם כל הטקסט החדש "עולה" עליו...
__________________
Intel i5-6600K Skylake Quad core CPU - 3.5 GHz
Asus Z170-PRO-GAMING Socket LGA1151
Gigabyte GTX970 4GB OC GDDR5
HyperX 16GB (2x8GB) 2400MHz DDR4 CL15 DIMM Hype
250GB Samsung 850 EVO - 2.5 inch - SATA3
FSP RAIDER 650W - RAIDER Series
NZXT Source 340
Scythe Mugen 4
Shay לא מחובר   הגב עם ציטוט
ישן 03-03-08, 1:40   #2 (קישור ישיר)
IO Addict
 
סמל האישי של DR-EVIL
 
תאריך הצטרפות: Jul 2007
הודעות: 3,282
שלח הודעה דרך MSN אל DR-EVIL שלח הודעה דרך SKype אל DR-EVIL
ברירת מחדל

באסה שאני יודע רק פסקל...
תודה כל מקרה.
__________________
TSI
and on the 8th Day God invented Euro Trance... and it is said this was God's most beautiful invention.... ♫♪ d(-.-)b 
Alex M.O.R.P.H. & Sylvia Tosun - An Angles Love (Vocal mix) -Track of the year 2011
DR-EVIL לא מחובר   הגב עם ציטוט
ישן 03-03-08, 2:02   #3 (קישור ישיר)
IO legend
 
סמל האישי של BELPHEGOR
 
תאריך הצטרפות: Dec 2006
הודעות: 5,941
ברירת מחדל

DR-EVIL אם לא הבנת הוא ביקש עזרה...
Shay ככה בחפיפ, מאוחר ואני לא ממש מרוכז:
מה מוגדר ב-BODY? אולי פשוט תגדיר לו גודל קבוע וכך בעצם ה-FOOTER לא יזוז?
או לחילופין padding ל-footer מלמטה.
כמו כן הייתי ממליץ לך לחלק את ה-HTML ל-3 ולבצע INCLUDED ב-INDEX.
__________________
BELPHEGOR לא מחובר   הגב עם ציטוט
ישן 03-03-08, 2:47   #4 (קישור ישיר)
IO Master
 
תאריך הצטרפות: Jan 2007
הודעות: 5,057
ברירת מחדל

ציטוט:
פורסם במקור על ידי BELPHEGOR צפה בהודעה
DR-EVIL אם לא הבנת הוא ביקש עזרה...
Shay ככה בחפיפ, מאוחר ואני לא ממש מרוכז:
מה מוגדר ב-BODY? אולי פשוט תגדיר לו גודל קבוע וכך בעצם ה-FOOTER לא יזוז?
או לחילופין padding ל-footer מלמטה.
כמו כן הייתי ממליץ לך לחלק את ה-HTML ל-3 ולבצע INCLUDED ב-INDEX.
מה מוגדר בבודי? לא ששמתי לב לשום דבר מיוחד אלא אם כן תגיד לי בדיוק אחר מה לחפש?
PADDING זה בעצם "להשמין" את ה- FOOTER ככה שהוא יהיה עבה כלפי מטה, ויכסה את כל החלק הלבן?
3 חלקים/INCLUDED... לא יודע מה זה אומר
חייב להיות לזה פיתרון
__________________
Intel i5-6600K Skylake Quad core CPU - 3.5 GHz
Asus Z170-PRO-GAMING Socket LGA1151
Gigabyte GTX970 4GB OC GDDR5
HyperX 16GB (2x8GB) 2400MHz DDR4 CL15 DIMM Hype
250GB Samsung 850 EVO - 2.5 inch - SATA3
FSP RAIDER 650W - RAIDER Series
NZXT Source 340
Scythe Mugen 4
Shay לא מחובר   הגב עם ציטוט
ישן 03-03-08, 11:03   #5 (קישור ישיר)
IO Master
 
סמל האישי של TheDoc
 
תאריך הצטרפות: Jan 2007
הודעות: 5,550
שלח הודעה דרך MSN אל TheDoc
ברירת מחדל

הפתרון הכי יעיל (99.9% מכל המקרים) זה להשתמש ב-Table.
תגדיר את העמוד שלך עם טבלה שיש בה שתי שורות ובכל שורה תא.

בבקשה קוד לדוגמה :
קוד:
<html>
<head>
    <title>Untitled Page</title>
    
    <style type="text/css">
    html, body, form
    {        
        height:100%;
        width:100%;
    }
    </style>
</head>
<body>
    <table border="1" bordercolor="black" width="100%" height="100%">
        <tr>
            <td>
                body
            </td>
        </tr>
        <tr height="100px">
            <td>
                footer
            </td>
        </tr>
    </table>
</body>
</html>
בהצלחה

__________________
Cpu: Intel Core 2 Duo E6300 1.86GHz
Board: Intel Desktop Board DG965WH
Memory: 4X CORSAIR VALUE 512MB 667MHZ DDRII
Video Card: ATI Radeon HD 2600 XT 256MB GDDR4
Monitor: Samsung SyncMaster 940BW
Hard Drives:
2X WD 36GB Raptors, 13X WD 500GB AAKS, 1X WD 320GB AAKS, 1X WD 120GB IDE
Optical Drives: NEC ND4550A BLACK
Keyboard+Mouse: Logitech Cordless Desktop MX 5000 Laser
Case: HEC 6C28
Power Supply:
HEC 300AR-TF
TheDoc לא מחובר   הגב עם ציטוט
ישן 03-03-08, 12:31   #6 (קישור ישיר)
IO Master
 
תאריך הצטרפות: Jan 2007
הודעות: 5,057
ברירת מחדל

למה צריך טבלה אבל...
לא אפשרי לעשות את זה על הקוד הנוכחי?
__________________
Intel i5-6600K Skylake Quad core CPU - 3.5 GHz
Asus Z170-PRO-GAMING Socket LGA1151
Gigabyte GTX970 4GB OC GDDR5
HyperX 16GB (2x8GB) 2400MHz DDR4 CL15 DIMM Hype
250GB Samsung 850 EVO - 2.5 inch - SATA3
FSP RAIDER 650W - RAIDER Series
NZXT Source 340
Scythe Mugen 4
Shay לא מחובר   הגב עם ציטוט
קישור פירסומי
ישן 03-03-08, 12:40   #7 (קישור ישיר)
IO Master
 
סמל האישי של TheDoc
 
תאריך הצטרפות: Jan 2007
הודעות: 5,550
שלח הודעה דרך MSN אל TheDoc
ברירת מחדל

הקוד הנוכחי לא אומר לי כלום כי אני לא רואה את ה-BODY.

ברגע שרוצים לעמד משהו משתמשים ב-TABLE, זו הדרך הכי פשוטה ונוחה.
__________________
Cpu: Intel Core 2 Duo E6300 1.86GHz
Board: Intel Desktop Board DG965WH
Memory: 4X CORSAIR VALUE 512MB 667MHZ DDRII
Video Card: ATI Radeon HD 2600 XT 256MB GDDR4
Monitor: Samsung SyncMaster 940BW
Hard Drives:
2X WD 36GB Raptors, 13X WD 500GB AAKS, 1X WD 320GB AAKS, 1X WD 120GB IDE
Optical Drives: NEC ND4550A BLACK
Keyboard+Mouse: Logitech Cordless Desktop MX 5000 Laser
Case: HEC 6C28
Power Supply:
HEC 300AR-TF
TheDoc לא מחובר   הגב עם ציטוט
ישן 03-03-08, 13:52   #8 (קישור ישיר)
IO Master
 
תאריך הצטרפות: Jan 2007
הודעות: 5,057
ברירת מחדל

הנה כל הקוד המלא: HTML - CSS.

תודה
__________________
Intel i5-6600K Skylake Quad core CPU - 3.5 GHz
Asus Z170-PRO-GAMING Socket LGA1151
Gigabyte GTX970 4GB OC GDDR5
HyperX 16GB (2x8GB) 2400MHz DDR4 CL15 DIMM Hype
250GB Samsung 850 EVO - 2.5 inch - SATA3
FSP RAIDER 650W - RAIDER Series
NZXT Source 340
Scythe Mugen 4
Shay לא מחובר   הגב עם ציטוט
ישן 03-03-08, 14:36   #9 (קישור ישיר)
IO legend
 
סמל האישי של BELPHEGOR
 
תאריך הצטרפות: Dec 2006
הודעות: 5,941
ברירת מחדל

אני לא רואה סיבה להשתמש ב-TABLE.שי אני לא רואה בעיה.. ה-FOOTER מוגדר כך לרדת ככל שיש טקסט. אם אתה רוצה בסה"כ שה-FOOTER ישר ממש למטה, תוסיף לו ב-FOOTER לדוגמא:
קוד:
position: absolute;
    bottom: 0;
    width: 100%;
__________________
BELPHEGOR לא מחובר   הגב עם ציטוט
ישן 03-03-08, 14:41   #10 (קישור ישיר)
IO Master
 
תאריך הצטרפות: Jan 2007
הודעות: 5,057
ברירת מחדל

ציטוט:
פורסם במקור על ידי BELPHEGOR צפה בהודעה
אני לא רואה סיבה להשתמש ב-TABLE.שי אני לא רואה בעיה.. ה-FOOTER מוגדר כך לרדת ככל שיש טקסט. אם אתה רוצה בסה"כ שה-FOOTER ישר ממש למטה, תוסיף לו ב-FOOTER לדוגמא:
קוד:
position: absolute;
    bottom: 0;
    width: 100%;
זה פיתרון טוב, ה- FOOTER בתחתית, ולא זז, מה שכן קורה במקרה כזה, נניח ואני מקטין מעט את החלון של הדפדפן (RESIZE), אז האתר משתנה, אך לא ה- FOOTER, הוא נשאר תמיד במקומו ככה שבעצם הוא "עולה" על האתר. מה שאומר שברזולוציות שונות של משתמשים אחרים האתר לא יראה טוב.
לזה יש פיתרון? (אם הבנתה את הסברי הצולע משהו...)
__________________
Intel i5-6600K Skylake Quad core CPU - 3.5 GHz
Asus Z170-PRO-GAMING Socket LGA1151
Gigabyte GTX970 4GB OC GDDR5
HyperX 16GB (2x8GB) 2400MHz DDR4 CL15 DIMM Hype
250GB Samsung 850 EVO - 2.5 inch - SATA3
FSP RAIDER 650W - RAIDER Series
NZXT Source 340
Scythe Mugen 4
Shay לא מחובר   הגב עם ציטוט
ישן 03-03-08, 14:52   #11 (קישור ישיר)
IO legend
 
סמל האישי של BELPHEGOR
 
תאריך הצטרפות: Dec 2006
הודעות: 5,941
ברירת מחדל

יש עם ה-CSS שלך קצת בעיה בגלל תקן FF\IE. אם תשים לב המצב ב-CSS שלך שונה שניהם. אני אשב על זה יותר מאוחר..
__________________
BELPHEGOR לא מחובר   הגב עם ציטוט
ישן 03-03-08, 15:24   #12 (קישור ישיר)
IO Master
 
תאריך הצטרפות: Jan 2007
הודעות: 5,057
ברירת מחדל

אם התכוונתה ל- FOOTER ששונה ב- FF (שרואים אותו "חלקית"...) את זה סידרתי.

תודה
__________________
Intel i5-6600K Skylake Quad core CPU - 3.5 GHz
Asus Z170-PRO-GAMING Socket LGA1151
Gigabyte GTX970 4GB OC GDDR5
HyperX 16GB (2x8GB) 2400MHz DDR4 CL15 DIMM Hype
250GB Samsung 850 EVO - 2.5 inch - SATA3
FSP RAIDER 650W - RAIDER Series
NZXT Source 340
Scythe Mugen 4
Shay לא מחובר   הגב עם ציטוט
ישן 03-03-08, 15:32   #13 (קישור ישיר)
IO legend
 
סמל האישי של BELPHEGOR
 
תאריך הצטרפות: Dec 2006
הודעות: 5,941
ברירת מחדל

קח......
קבצים מצורפים
סוג הקובץ: zip Desktop.zip (2.6 KB, 1 צפיות)
__________________
BELPHEGOR לא מחובר   הגב עם ציטוט
ישן 03-03-08, 15:39   #14 (קישור ישיר)
IO legend
 
סמל האישי של BELPHEGOR
 
תאריך הצטרפות: Dec 2006
הודעות: 5,941
ברירת מחדל

עוד פתרון:

אולי אפילו עדיף:
קוד:
#footer {
    clear: both;
    position: relative;
    bottom: 0;
    padding: 20px 50px;
    border-top: 10px solid #788714;
    background: #8E9C34;
    
}

#footer p {
    width: 100%;
    bottom: 0;
    font-size: x-small;
    color: #FFFFFF;
}
__________________
BELPHEGOR לא מחובר   הגב עם ציטוט
ישן 03-03-08, 15:43   #15 (קישור ישיר)
IO Addict
 
סמל האישי של tamos'
 
תאריך הצטרפות: Feb 2008
הודעות: 3,078
ברירת מחדל

תלמד קידוד אתר בXHTML+CSS לפי התקן של FF ו IE
זה אמור לפתור ולעזור לך בכלל בבניית אתר, היום כל מקודד מקצועי חייב ידע כזה..
tamos' לא מחובר   הגב עם ציטוט
תגובה


הגדרות אשכול
אפשרויות הצגת נושא

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

vB code הינו פועל
סמיילים הינו פועל
קוד [IMG] הינו פועל
קוד HTML הינו כבוי
Trackbacksהינו פועל
Pingbacks הינו פועל
Refbacks הינו פועל

נושאים דומים
אשכול מפרסם האשכול פורום תגובות הודעה אחרונה
מדריך די יעיל לפירמוט (לאלו שצריכים): Shay תמיכה טכנית 8 20-04-07 16:57
CeBIT - ספק יעיל בצורה בלתי רגילה, מ Corsair Mr. Popo חדשות 9 19-03-07 1:38


כל הזמנים הם GMT +3. השעה כרגע היא 4:46.





מופעל על ידי: vBulletin
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO
IOPanel.net © כל הזכויות שמורות