לוגו אתר Fresh          
 
 
  אפשרות תפריט  ראשי     אפשרות תפריט  צ'אט     אפשרות תפריט  מבזקים     אפשרות תפריט  צור קשר     חץ שמאלה ‎print ‎"Hello World!"; if‎ ‎not rules.‎know ‎then rules.‎read(); חץ ימינה  

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



  #1  
ישן 16-04-2006, 12:08
  shuraki shuraki אינו מחובר  
 
חבר מתאריך: 10.10.04
הודעות: 224
למבינים ב CSS - שאלת Z-INDEX

שלום,

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

קוד:
<BR><BR> <div style="z-index:3;position=absolute;"> bla bla blaaa <BR> bla bla bla bla blaaa <BR>bla bla blaaa <BR> bla bla bla bla blaaa <BR>bla bla blaaa <BR> bla bla bla bla blaaa bla bla blaaa <BR> bla bla bla bla blaaa <BR> </div> <div style="z-index:2;position=absolute;"> <img src="http://sunsite.queensu.ca/rmc/BUS20...doc/example.gif" width=600 border=1> </div>


הבעייה היא שהכיתוב יוצא בצד.
איך אוכל למקם את הכיתוב במרכז גם באורך וגם ברוחב
VALIGN / ALIGN

תודה רבה!
_____________________________________
היו שלום, ותודה על הדגים
[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.washingtontrout.org/Vashon/Vashon2001/Icons/Fish.gif]

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #3  
ישן 16-04-2006, 13:50
  shuraki shuraki אינו מחובר  
 
חבר מתאריך: 10.10.04
הודעות: 224
תודה, אבל עדיין לא ממרכז את הטקסט ביחס לתמונה...
בתגובה להודעה מספר 2 שנכתבה על ידי S - Designer שמתחילה ב "תגדיר את הרוחב והגובה של השיכבה בה יושב הטקסט לגבוה והרוחב של התמונה,"

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

(הנה הקוד במקביל)

קוד:
<BR><BR> <div style="z-index:3;position:absolute;vertical-align: middle ;text-align:center;"> bla bla blaaa <BR> bla bla bla bla blaaa <BR>bla bla blaaa <BR> bla bla bla bla blaaa <BR>bla bla blaaa <BR> bla bla bla bla blaaa bla bla blaaa <BR> bla bla bla bla blaaa <BR> </div> <div style="z-index:2;position:absolute;"> <img src="http://sunsite.queensu.ca/rmc/BUS20...doc/example.gif" width=600 border=1> </div>
_____________________________________
היו שלום, ותודה על הדגים
[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.washingtontrout.org/Vashon/Vashon2001/Icons/Fish.gif]

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #5  
ישן 16-04-2006, 16:12
  shuraki shuraki אינו מחובר  
 
חבר מתאריך: 10.10.04
הודעות: 224
מצליח חלקית. פרמטר HEIGHT לא משפיע
בתגובה להודעה מספר 4 שנכתבה על ידי S - Designer שמתחילה ב "כי לא עשית מה שאמרתי..."

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

<div style="z-index: 3; width:600px; height:600px ;position: absolute; vertical-align : middle; text-align:center;">

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

בכל מקרה, תודה רבה.
_____________________________________
היו שלום, ותודה על הדגים
[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.washingtontrout.org/Vashon/Vashon2001/Icons/Fish.gif]

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #10  
ישן 17-04-2006, 23:09
צלמית המשתמש של יובל רז
  יובל רז יובל רז אינו מחובר  
 
חבר מתאריך: 17.04.06
הודעות: 14
רצת נסחפתי, אבל לא יכולתי להתאפק...
בתגובה להודעה מספר 9 שנכתבה על ידי GreenBerret שמתחילה ב "זה לא עובד? [CODE] <style..."

הנה הקוד:

קוד PHP:
 <style type="text/css">
        
#container {
            
positionrelative;
            
floatleft;
            
backgroundurl("http://sunsite.queensu.ca/rmc/BUS204/Finance/fly/doc/example.gif")
    
no-repeat top left;
            
width256px;
            
height256px;
        }

        
span    {
            
displayblock;
            
width100px;
            
heightauto;
            
left50%;
            
top50%;
            
margin-left: -50px;
            
margin top: -10px;
            
text-aligncenter;
        }
        </
style>

        <
div id="container">
            <
span>ממורכז</span>
        </
div


נסה את הקוד הבא (יעבוד כרגע רק בפיירפוקס, את האיכספלורר זה ממש מקרקף):

קוד:
<style type="text/css"> #container { position: relative; float: left; background: url("http://sunsite.queensu.ca/rmc/BUS204/Finance/fly/doc/example.gif") no-repeat top left; width: 256px; height: 256px; } #float { position: relative; float: left; width: 500px; height: 300px; background-color: #3F0; } a { text-decoration: none; color: red; } a:hover span { display: block; } a span { display: none; width: 200px; height: auto; left: 50%; top: 50%; margin-left: -100px; margin top: -10px; text-align: center; } p { position: absolute; left: 50%; top: 100px; } </style> <a href="#"><div id="container"> <span>לא רק ממורכז, אלא גם ביישן</span> </div></a> <div id="float"> <p>אל תתבייש, תיגע בסמיילי</p> </div>


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

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #11  
ישן 18-04-2006, 01:36
  shuraki shuraki אינו מחובר  
 
חבר מתאריך: 10.10.04
הודעות: 224
תודה GreenBerret ותודה יובל
בתגובה להודעה מספר 10 שנכתבה על ידי יובל רז שמתחילה ב "רצת נסחפתי, אבל לא יכולתי להתאפק..."

סחטיין על ההשקעה!
באמת מחמם את הלב

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

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

אני מגבש משהו שהוא חצי עבודה בעיניים. ואקשר אליו מכאן ברגע שהוא יעבוד.
שוב תודה!
_____________________________________
היו שלום, ותודה על הדגים
[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://www.washingtontrout.org/Vashon/Vashon2001/Icons/Fish.gif]

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #12  
ישן 18-04-2006, 08:29
צלמית המשתמש של יובל רז
  יובל רז יובל רז אינו מחובר  
 
חבר מתאריך: 17.04.06
הודעות: 14
זה מה שקורה כשלא משקיעים בדיבאגינג...
בתגובה להודעה מספר 11 שנכתבה על ידי shuraki שמתחילה ב "תודה GreenBerret ותודה יובל"

בעמוד של הפיירפוקס צריך להוסיף לעיצוב של a span - position: relative

בנוגע לאיכספלורר:
ביום שבו האיכספלורר יכיר ב pseudo elements אני אסתובב ערום בקיבוץ באמצע היום עבודה...

בנוגע למיקום הטקסט מעל התמונה:

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

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


נערך לאחרונה ע"י יובל רז בתאריך 18-04-2006 בשעה 08:32.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
תגובה

כלי אשכול חפש באשכול זה
חפש באשכול זה:

חיפוש מתקדם
מצבי תצוגה דרג אשכול זה
דרג אשכול זה:

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

קוד vB פעיל
קוד [IMG] פעיל
קוד HTML כבוי
מעבר לפורום



כל הזמנים המוצגים בדף זה הם לפי איזור זמן GMT +2. השעה כעת היא 09:43

הדף נוצר ב 0.06 שניות עם 12 שאילתות

הפורום מבוסס על vBulletin, גירסא 3.0.6
כל הזכויות לתוכנת הפורומים שמורות © 2025 - 2000 לחברת Jelsoft Enterprises.
כל הזכויות שמורות ל Fresh.co.il ©

צור קשר | תקנון האתר