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

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



  #1  
ישן 08-02-2015, 23:24
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,508
2 בעיות עם css

שלום
עשיתי לוגו לאתר, ורציתי שיהיה בתוכו מלבן לבן עם בהירות נמוכה
הבעיה היא שגם את הטקסט בתוך המלבן זה עושה עם בהירות נמוכה
ניסיתי לעשות הגדרה ספציפית לטקסט שיהיה עם בהירות מלאה ולא עזר
הקוד:
קוד:
#logo_text_background { opacity: 0.4; filter: alpha(opacity=40); padding: 20px; background-color: white; } #logo_text { color: #FF9900; text-align: center; opacity: 1; filter: alpha(opacity=100); font-size: 50px; font-weight: bold; }


ובעיה נוספת עשיתי תפריט לאתר ועשיתי לו float:right
לאחר מכן רציתי לעשות את התוכן משמאלו הבעיה היא שהוא נצמד אליו יותר מדיי
אז עשיתי margin
ניסיתי עד 150px ולא זז שום דבר
רק ב200 זה זז מהתפריט
ואני לא רוצה 200 זה יותר מדיי , יש למישהו מושג מה הבעיה?

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


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #3  
ישן 09-02-2015, 15:44
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,508
בתגובה להודעה מספר 2 שנכתבה על ידי linuxsboot שמתחילה ב "א, לוגו בונים עם תוכנות מתאימות וצריך לדעת כיצד בונים לוגו נכון"

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

ב:
התכוונתי למשהו פשוט, את הקוד המקורי שלי מחקתי ועשיתי משהו אחר אבל כתבתי משהו דומה
ותאמת בדוגמא פה זה מגיב מעל 50px מקודם זה לא הגיב לי עד 200 , אבל גם עכשיו עד 50px זה לא מגיב.

קוד:
<!DOCTYPE html> </html> <head> <style> #nav { background-color: blue; float: right; } #content { background-color: yellow; margin-right: 50px; text-align: right; } </style> </head> <body> <div id="nav"> טקסט 1 <br /> טקסט 2 <br /> טקסט 3 </div> <div id="content"> טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט </div> </body> </html>
_____________________________________
חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #4  
ישן 09-02-2015, 18:09
צלמית המשתמש של MatiM
  משתמש זכר MatiM MatiM אינו מחובר  
 
חבר מתאריך: 12.04.06
הודעות: 2,021
שלח הודעה דרך MSN אל MatiM
בתגובה להודעה מספר 1 שנכתבה על ידי Nati323 שמתחילה ב "2 בעיות עם css"

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


לשאלתך השניה -
בגלל שהתפריט הוא float, שאר הdiv של התוכן מחושב מתחילת השורה.
הmargin מתחיל "לדחוף" את האלמנט מתחילת השורה, ולכן אתה לא רואה את זה כי זה מוסתר על ידי התפריט.

רוצה לראות את זה? תן לתפריט שלך opacity:0, ואתה תראה שהרקע של הdiv של התוכן מופיע מתחת למקום של התפריט.

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

יש עוד כל מיני דרכים, הכל תלוי איך מגדירים את המבנה של הדף ואיך קובעים את הCSS.
_____________________________________
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #5  
ישן 09-02-2015, 18:17
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,508
בתגובה להודעה מספר 4 שנכתבה על ידי MatiM שמתחילה ב "[u]לשאלה הראשונה שלך על..."

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

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


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו


נערך לאחרונה ע"י Nati323 בתאריך 09-02-2015 בשעה 18:29.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #6  
ישן 10-02-2015, 12:04
צלמית המשתמש של MatiM
  משתמש זכר MatiM MatiM אינו מחובר  
 
חבר מתאריך: 12.04.06
הודעות: 2,021
שלח הודעה דרך MSN אל MatiM
בתגובה להודעה מספר 5 שנכתבה על ידי Nati323 שמתחילה ב "תודה רבה דבר ראשון דבר שני..."

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

אתה רוצה להגדיר רקע שקוף ועליו טקסט מובלט?
הנה פיתרון פשוט: להגדיר אלמנט-אב שבתוכו יהיו 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.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #7  
ישן 10-02-2015, 15:20
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,508
בתגובה להודעה מספר 6 שנכתבה על ידי MatiM שמתחילה ב "בנוגע לשקיפות - זה לא מה..."

תודה על ההשקעה אחי!
בקשר לתשובה הראשונה, הבנתי את העיקרון של הכלל והפיתרון, אבל יש לי כמה שאלות בקשר לקוד
א) למה השתמשת ב display:block; ו overflow:hidden התוצאה יוצאת אותו דבר בלעדיהם, למה הצטרכת אותם?
ב) למה אם אני מוריד את ה position: relative; מה #logo אז הטקסט עף לי לאמצע הדף, מחקתי אותו כדי לראות מה הוא עושה לא הבנתי למה צריך אותו הרי ל #logo .text יש position משלו שאמור להדביק אותו לפי ההגדרה בקצה השמאלי של הדף?

בקשר לתשובה השנייה
לא הבנתי מה אני אמור לראות, עשיתי opacity:0 וכמו שרשמתי למעלה התפריט נהיה שקוף אבל הdiv במקומו נשאר , הרקע של ה div עצמו לא מתחיל מתחילת הדף עקב זה אם זה מה שהתכוונת

ב) אני מבין ש float:right שם את האלמנט בצד ימין ומצמיד את האלמנטים שאחריו אליו השאלה שלי היא למה שאני שם לאלמנט השני גם float:right זה גורם ל margin להתחיל מהקצה של האלמנט הראשון? כאילו איך זה קשור ל float:right ...

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


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #8  
ישן 10-02-2015, 19:23
צלמית המשתמש של MatiM
  משתמש זכר MatiM MatiM אינו מחובר  
 
חבר מתאריך: 12.04.06
הודעות: 2,021
שלח הודעה דרך MSN אל MatiM
בתגובה להודעה מספר 7 שנכתבה על ידי Nati323 שמתחילה ב "תודה על ההשקעה אחי! בקשר..."

שאלה ראשונה
א) לרוב אני אוהב להגדיר את כל הפרמטרים החשובים, כדי למנוע הפתעות וכדי שברמה הבסיסית בכל דפדפן התוצאה תהיה זהה.
לצורך הדוגמא - בשאלה שלך יצאת מהנחה ש2 הפרמטרים הללו יתקיימו באופן אוטומטי מבלי שהגדרנו אותם, ושבכל מצב התוצאה תהיה זהה.
לגבי display:block אתה צודק, כי זה ברירת המחדל של div.
לעומת זאת, אם לא הייתי מגדיר overflow:hidden הדפדפנים לא היו מגדירים את זה אוטומטית. ואז היה יכול להיות מצב שמשהו מכל האלמנטים שמוגדרים בתוך ה#logo היו חורגים מהגבולות ומשבשים את המבנה המתוכנן.
רוצה לראות את זה קורה? תוריד את הoverflow:hidden ותגדיר פונט בגודל 50px (או יותר) לטקסט, כמו שהבאת בקוד הראשון שלך.

ב) תקרא קצת על ההגדרות של position איך ולמה משתמשים בכל אחד.
(http://www.w3schools.com/css/css_positioning.asp)
בקצרה - absolute ממוקם יחסית לאלמנט-אב הראשון שהוא מוצא שהוא לא בposition:static.
אם לא מגדירים ב#logo את ה position:relative , אז הטקסט ממוקם ביחס לדף (כי אין אלמנט אחר ביניהם שיש לו הגדרה אחרת).
ועל פי מה שהגדרתי בtop ו right, הטקסט מוצמד לקצה הימני העליון.
למה הטקסט עף לאמצע? כי הגדרתי לו width:100% ו text-align:center. והוא מבצע בדיוק מה שביקשנו


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

ב) זה בדיוק כמו שתיקח 2 אלמנטים רגילים ותשים margin.

[התמונה הבאה מגיעה מקישור שלא מתחיל ב https ולכן לא הוטמעה בדף כדי לשמור על https תקין: http://basicuse.net/var/plain_site/storage/images/media/images/tips/prog_lang/textile/html_css/difference_between_margin_and_padding/7677-2-eng-GB/difference_between_margin_and_padding_fit_big_width.jpg]

(לקוח מגוגל)


***

לרוב השאלות שלך יש תשובות פשוטות שאתה יכול למצוא בקלות אם רק תחפש -
http://www.w3schools.com
וההבנה שאתה כל כך מחפש ב"למה זה עובד ככה" תגיע אחרי שתעשה עוד ועוד דברים בHTML/CSS. תן לזה זמן, ואל תנסה להבין הכל מקטע קוד אחד שכתבת



המשך יום טוב.
_____________________________________
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה


נערך לאחרונה ע"י MatiM בתאריך 10-02-2015 בשעה 19:26.
תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #9  
ישן 10-02-2015, 23:48
צלמית המשתמש של Nati323
  משתמש זכר Nati323 Nati323 אינו מחובר  
 
חבר מתאריך: 25.10.05
הודעות: 1,508
בתגובה להודעה מספר 8 שנכתבה על ידי MatiM שמתחילה ב "[u]שאלה ראשונה[/u] א) לרוב..."

שאלה ראשונה
א) הבנתי
ב) אם הבנתי אותך נכון ואת ההגדרה בw3schools שבעצם הגדתם אותו דבר אז מה שאתה מתכוון שזה ממוקם יחסית לאלמנט המוגדר מלפניו אז בקוד שהבאת לדוגמא הסיבה שזה לא ממוקם בצד ימין של הדף אלא בצד של הdiv זה בגלל שהright ב #logo .text מתחיל בעצם מצד ימין של #logo , זה מה שהתכוונת?

שאלה שניה:
קוד:
<!DOCTYPE html> </html> <head> <style> #nav { background-color: blue; float: right; opacity: 0; } #content { background-color: yellow; margin-right: 50px; text-align: right; } </style> </head> <body> <div id="nav"> טקסט 1 <br /> טקסט 2 <br /> טקסט 3 </div> <div id="content"> טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט </div> </body> </html>


ב) לא הבנתי מה ענית לי אחי ... :\

אגב איפה נמצא ה firebug בפיירפוקס?

ושוב רב תודות...
_____________________________________
חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
  #10  
ישן 11-02-2015, 00:34
צלמית המשתמש של MatiM
  משתמש זכר MatiM MatiM אינו מחובר  
 
חבר מתאריך: 12.04.06
הודעות: 2,021
שלח הודעה דרך MSN אל MatiM
בתגובה להודעה מספר 9 שנכתבה על ידי Nati323 שמתחילה ב "שאלה ראשונה א) הבנתי ב) אם..."

1.א) מצויין
1.ב) הבנת נכון.

2. אוקיי, התכוונתי שתראה את זה בלי להוסיף margin, ואחרי זה עם להוסיף margin כדי להבין איך זה זז.

מקורי:
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה
מקורי עם opacity:0:
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה
עם margin-right:20px: (רואה את החלק הצהוב הריק? שם יש את התפריט! ולכן כשהוא מופיע אתה לא רואה את התזוזה הזאת)
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה
עם margin-right:100px: (כאן כבר עברנו את הגודל של התפריט, ולכן, גם אם יופיע תפריט בחלק הלבן הריק, הוא לא מסתיר שום דבר מהdiv)
תמונה שהועלתה על ידי גולש באתר ולכן אין אנו יכולים לדעת מה היא מכילה


פיירבאג כתוסף לפיירפוקס - https://addons.mozilla.org/he/firefox/addon/firebug

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

תגובה ללא ציטוט תגובה עם ציטוט חזרה לפורום
תגובה

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

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

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

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



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

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

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

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