שכבה עם פסי גלילה

גיל ‏ • 14 בספטמבר, 2002

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

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

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

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

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

בברכת שיתוף פעולה פורה.
צוות האתר

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

הגדרת הסטייל

1
2
3
4
5
6
7
8
9
10
11

<STYLE>
.scrollingDiv {
    width:530px;
    height:330px;
    text–align:right;
    background–color:#FFCCFF;
    border:2px inset;
    overflow–x:scroll;
    overflow–y:scroll;
}
</STYLE>

החלק החשוב פה הוא overflow :

3
4

overflow–x:scroll;
overflow–y:scroll;

מה שאנחנו אומרים בעצם, זה "אם הטקסט ארוך יותר מה-DIV, אנכית או אופקית, תיצור פסי גלילה". כש – x מציין את פסי הלילה האופקי, ו-y את האנכי. כלומר, אם נרצה רק פס גלילה אנכי, לא נכתוב את השורה הזו:

3
4

overflow–x:scroll;

יצירת השכבה

נגדיר את השכבה שלנו, וניתן לך את ה-class שיצרנו. נכתוב את התוכן – כל קוד ה-HTML שאנחנו רוצים שיופיע בתוך השכבה, ונסגור אותה.

1
2
3
4
5

בהצלחה!

תגיות: CSS, HTML, scroll, גלילה

שכבה עם פסי גלילה

הגדרת הסטייל

יצירת השכבה

עוד בנושא זה

תגובות בפייסבוק

תגיות