10-02-2015, 12:04
|
|
|
|
חבר מתאריך: 12.04.06
הודעות: 2,021
|
|
בנוגע לשקיפות - זה לא מה שאמרתי.
אמרתי שכשאלמנט מוגדר עם שקיפות, כל תתי האלמנטים גם יקבלו שקיפות ביחס לדף.
ככה זה מתוכנן באתרים (מבחינתי, זה הגיוני אפילו) ואין לך הרבה מה לעשות עם זה חוץ מלהגדיר בצורה שונה את העיצוב שלך.
אתה רוצה להגדיר רקע שקוף ועליו טקסט מובלט?
הנה פיתרון פשוט: להגדיר אלמנט-אב שבתוכו יהיו 2 אלמנטים, אחד עבור הרקע (וכל מה שצריך להיות שקוף) ואחד עבור הטקסט (וכל מה שלא צריך להיות שקוף). עם קצת משחק של position ביחס לאלמנט-אב תוכל להגדיר את כל מה ששקוף מאחורי כל מה שאטום.
קוד עובד:
קוד:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#logo {
display: block;
width: 150px;
height: 120px;
position: relative;
overflow: hidden;
}
#logo .background {
display: block;
width: 100%;
height: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
background-color: #FFFF00;
z-index: 1;
}
#logo .text {
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin-top: 20px;
display: block;
width: 100%;
color: #FF9900;
text-align: center;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="logo">
<div class="background"></div>
<div class="text">LOGO TEXT</div>
</div>
</body>
</html>
** תשים לב שהגדרתי את האלמנט של הטקסט מעל האלמנט של הרקע על ידי z-index. אם תהפוך את הסדר, שוב תתקבל תוצאה שהטקסט מאבד מהצבע שלו. כמו שאתה תסתכל על תמונה דרך שקף צבעוני. השקף משפיע על הצבע שהעין תקלוט את התמונה. **
השאלה השניה -
אם תוסיף לאלמנט #nav בקוד שהבאת את המאפיין opacity:0, אתה תראה את הרקע שצמוד עד לתחילת הדף. הטקסט אכן מתחיל אחרי התפריט, אבל כל הdiv מתחיל מתחילת השורה.
float:right קובע שכל האלמנטים שמכילים את המאפיין הזה יצמדו לצד ימין. ככל שתוסיף עוד ועוד אלמנטים הם יצמדו אחד אחרי השני לצד ימין.
ברגע שאתה תקבע לאלמנט מאפיין float:right ומיד אחריו תכתוב טקסט רגיל - התוצאה תתקבל כמו שאתה רוצה (כמו באתרים של חדשות לדוגמא שיש תמונה ולצידה טקסט).
ברגע שאתה מוסיף אלמנטים מסוגים שונים, הדפדפן מתחיל להתייחס אליהם בצורות שונות ולכן, לא תמיד מקבלים את התוצאה המתוכננת.
אני ממליץ לך לעבוד עם דיבאגר כלשהו, אם אתה עם פיירפוקס - אז תעבוד עם firebug.
יהיה לך הרבה יותר נוח לראות ויזואלית איך הוא מציג את המרחקים בין האלמנטים ומה ההשפעה של margin/padding ביחס למיקום האלמנטים.
_____________________________________
נערך לאחרונה ע"י MatiM בתאריך 10-02-2015 בשעה 12:07.
|