ערכת העיצוב שאני משתמש בה, מלווה את הבלוג שלי כבר לא מעט זמן. במשך אותו זמן חפרתי בנבכי קובץ ה CSS וניסיתי להתאים אותו לצרכיי. היות ומלכתחילה היה מדובר בערכת עיצוב ששוכתבה, הקובץ CSS שלה הפך להיות מעין פח זבל גדול ומתוסבך.
אחד הדברים שעיצבן אותי היה הדרך שבה הוצגו התמונות. התמונה הייתה מיושרת למרכז עם מסגרת בצבע כחול ודי נראתה תקועה שם. זה דרש שינוי כבר הרבה זמן ומספיק חיטוט והתמצאות בתוך ה CSS המבולגן גם ככה אבל לבסוף – הנה התוצאה
התמונה מוקטנת מראש לרוחב של 200 פיקסלים (האורך נדחס באותו יחס), בנוסף מסגרת של 5 פיקסלים בצבע השונה מצבע הרקע של הפוסט (הגדרה של צבע רקע נפרד) ולבסוף מסגרת שחורה. התמונה יושבת באופן קבוע בחלק השמאלי של הפוסט (בעזרת שימוש בתגית float).
בעיה מהותית שלא הצלחתי לפתור היא מה קורה כשאורך התמונה יותר גדול מהאורך של הפוסט. נכון שאפשר לקשקש הרבה אבל אם לא התמונה נוזלת אל הפוסט הבא.
בעיה אחרת – זה איך משלבים קריאה לתמונה באופן אוטומאטי ללא הצורך לשלב לינק לכל תמונה שמוסיפים.
וככה זה נעשה:
.post IMG
{
float:right;
border:1px solid black;
padding: 5px;
BACKGROUND: #e7ebde;
margin:5px 5px 5px 5px;
width: 200px;
}
כתיבת תגובה