שלח תשובה

זירת השאלות

1771
צפיות
5
תשובות

עיצוב דף עיתון עם css3

,‏ 19 בנובמבר, 2010

שלום חברים.
די נתקעתי. אני מעצב עמוד עיתון ע"י css. הכוונה לעמוד עיתון היא שגם העיצוב הוא כמו בעיתון (בכל דף יש מספר עמודות והטקסט גולש עצמאית לעמודה הבאה, מבוצע ע"י webkit-column-count  ,-webkit-column-gap;
כפי שאתם רואים העיצוב מיועד לספארי בלבד.
יש לי מספר בעיות:
1. הטקסט זורם יפה לעמודה הבאה והעמוד מעוצב יפה, אך איך אני יודע מתי נגמר העמוד ומתי עלי לעבור לעמוד הבא (אני מקבל את הטקסט באופן רציף ולא מחולק לעמודים). האם יש דרך לדעת מתי עלי לקטוע את הטקסט ולעבור לעמוד הבא? או שאולי יש דרך לגלוש עם שארית הטקסט ל-div נוסף? אין לי אפשרות גלישה בעמוד והגודל של ה-div קבוע ולא ניתן לשינוי. תחשבו ממש על מבנה של עיתון.

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

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

תגיות:

5 תשובות

  1. אממממ
    לגבי יצירת מעבר בין עמודים לכל עמודה – יוצא שלמעשה אתה רוצה ליצור עמודות וכל עמודה מופיעה בעמוד אחד? אם כן למה עמודות?

    בכל אופן אפשר לחשוב בכיוון של קוביית עמודות שיש לה גלילה – או גלילה פיזית של הדפדפן (overflow:scroll) או איזה סקריפט קרוסלה.

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

    לפני כמה שבועות מישהו הראה לי טריק לגרום לתמונה לצוף בתוך הטקסט גם אם היא לא נמצאת בתוכו פיזית… זה היה דיי חביב, רק שאני לא זוכר איך הוא עשה את זה. משחק של margin-top/position:relative – לא זוכר בדיוק, אוכל לשאול אותו מחר…


    אלי ענתבי

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

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

    חביב


    אלי ענתבי

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

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

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

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

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


    אלי ענתבי

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

שלח תשובה