אתגר קטן בCSS

bugCreator, ש', 08/05/2010 - 00:15

שלום לכולם

אני בונה אתר באמצעות drupal ועובד על הCSS לתפריט הראשי.
כל אוביקט בתפריט הוא חלק מרשימה

ותוכו לינק.
אני צריך שלכל אוביקט יהיה רקע ריבועי וטקס משתנה במרכזו.
התפריט הוא רוחבי - אוביקט אחרי אוביקט,
הסטייל עבור li הוא:
display:inline-block;
background-image:url('images/buttons/link.jpg')
width: 86px;
height: 86px

בתוך הריבוע הזה אני מנסה למקם את הלינק במרכז, לא רק אנכית אלא גם אופקית.
ישנם לינקים עם שבירת שורה שהורסים הכל. אני לא יכול להשתמש בmargin מלמעלה ובpostion כי אז המרכז שלהם לא יהיה מיושר עם הלינקים בעלי שורה אחת.
כמו כן הם גורמים לשינוי בגודל של הבלוק של הli.

האם למישהו יש רעיונות כיצד למקם את הלינק במרכז?

חברי האתר יכולים לשלוח תגובה - כניסה , הצטרפות.

תגים:

אני צריך לראות כדי להיות בטוח

נכתב ע"י tsi ביום ש', 08/05/2010 - 02:06.

אני צריך לראות כדי להיות בטוח שהבנתי, אתה יכול לנסות :

display:table-cell;
vertical-align:middle;

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

צחי שלידור, לינוויט
תשתיות תוכן קהילתיות
Sasson - Smart Drupal Theming

חברי האתר יכולים לשלוח תגובה - כניסה , הצטרפות.

נראה לי שזה לא נתמך בIE כנראה

נכתב ע"י bugCreator ביום ש', 08/05/2010 - 19:31.

נראה לי שזה לא נתמך בIE

כנראה שהבעיה לא כל כך קטנה במיוחד שמדובר בתגיות LI
שני אתרים שיכולים לעזור למי שמתמודד עם בעיה דומה

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

אני לא הצלחתי להגיע לתצואה הרצויה.

חברי האתר יכולים לשלוח תגובה - כניסה , הצטרפות.

אני לא הצלחתי להגיע לתצואה

נכתב ע"י tsi ביום א', 09/05/2010 - 01:17.

אני לא הצלחתי להגיע לתצואה הרצויה.

אל תתייאש, עוד אפשרות היא לתת class מיוחד ללינקים מרובי השורות באמצעות menu_attributes.module וכך תוכל לתת להם עיצוב נפרד.

צחי שלידור, לינוויט
תשתיות תוכן קהילתיות
Sasson - Smart Drupal Theming

חברי האתר יכולים לשלוח תגובה - כניסה , הצטרפות.

תן לLI גובה ורוחב מדוייקים,

נכתב ע"י Roei-CPO ביום ב', 10/05/2010 - 09:06.

תן לLI גובה ורוחב מדוייקים, תתן לו גם Poisition:relative
ואז תתן למה שבתוכו position:absolute עם Top + left
וזה תמיד ישב באותו המקום, לגבי השני שורות כמו שאתה מבין כנראה אין שום דרך לתקן את זה שגם זה ישב בדיוק באותו מקום כי זה פשוט יותר שורות
מה שכן אתה יכול לעשות זה "להחביא" א השורה הנוספת בכך שאתה נותן לשורה עצמה
height:##px; overflow:hidden;

לא נראה לי שיש אפשרות אחרת, אם עדיין לא עזרתי.. אולי עדיף שתתן לינק למקום ואני בטוח שזה יהיה קלי קלות :)

סיפיאו - פיתוח אתרים ומערכות בדרופל
http://www.cpo.co.il

חברי האתר יכולים לשלוח תגובה - כניסה , הצטרפות.

איפה מתחילים ולאן ממשיכים?

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

להורדת דרופל בעבריתלשפות וגרסאות אחרות, Drupal.org

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

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