IPB

ברוך הבא אורח ( התחבר | הירשם )


> 

2 עמודים V   1 2 >  
Reply to this topicStart new topic
> מדריך לעיצוב MyAnimeList בעזרת CSS
Bakeneko
הודעה 31.07.2011, 17:59
הודעה #1


Burn the Soul!
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 3,980
תאריך הצטרפות: 24.05.08
משתמש מספר: 57,789





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

הסבר על CSS
ספוילר:
שיעור קצר על CSS:
CSS שהוא ראשי תיבות של Cascading Style Sheets, הוא בעצם קובץ הגדרות לעמודי HTML של איך דברים צריכים להראות. אפשר לקבוע דרכו צבעים, גודל, מיקום, רווחים, פונטים ועוד.
כיום השימוש הנפוץ ביותר הוא בCSS2, אבל כולנו מחכים שCSS3 יהיה השולט (מה שלא אפשרי כרגע בגלל דפדפנים ישנים *אהמ* אקספלורר 8 ומטה *אהמ* שלא תומכים.), כי יש בו תכונות אפילו יותר מגניבות, כמו צל, עיגול פינות, סיבוב ועוד פיצ'יפקעס.

אז איך בעצם כותבים CSS?
בעמוד HTML שלנו יש tags ויש attributes.
tags הם למשל תגי הbody, תג ה-a, תג ה-div וכו'.
attributes הם מאפיינים של תגים. למשל id, class.

CSS על תגים:
ב-CSS על מנת לתת הגדרה לtag נכתוב אותו ככה:
קוד
body{
background-color:#fff;
}

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

ב-CSS ניתן גם לתת הגדרה לתג שנמצא בתוך תג.
לדוגמא יש לנו בעמוד

קוד
<p>
<a href="blabla.html">bla</a>
</p>


עכשיו נניח שאתם רוצים לתפוס את כל תגי ה-a שנמצאים ספציפית תחת תגי p. נוכל לעשות זאת כך:

קוד
p a{
color:red;
}

שימו לב לסדר: קודם התג של האב, ואז של הבן.

אגב, אם נניח את הקוד מלמעה היה עוטף div, ואתם רוצים שיושפעו כל הלינקים שהאבא/סבא ווטבר שלהם הוא div, אז זה לגמרי אפשרי לכתוב את זה ככה, עם דילוג עם p או כל תג אחר שעוטף את ה-a:

קוד
div a{
color:red;
}


CSS על אלמנטים:
בקצרה, ב-html ניתן לתת אלמנטים בשם class ו-id על התגים שלנו. id הוא ייחודי, כלומר יופיע רק פעם אחת בעמוד על תג אחד. class לעומת זאת, אפשר לשים על כמה תגים.
למה זה כך? כי id יותר משמש לתג שיש לו שימוש אחד ויחיד בעמוד, למשל הdiv שעוטף את כל העיצוב שלנו. מן הסתם אנחנו משתמשים בו רק פעם אחת. class למשל משמש על מנת להגדיר פונט מסויים לכמה טקסטים שונים בעמוד. למה בכלל צריך את ה-2 האלו? כי למשל אנחנו לא רוצים בהכרח להשפיע על כללללל תגי ה-a בעמוד, ואנחנו רוצים משהו שיאפשר לנו להבדיל תגי a כאלו מאחרים.

עכשיו נניח יש לנו בעמוד תגי p שיש עליהם אלמנט class ששמו xyz ותג div שיש עליו id בשם abc. בCSS תגדיר אותם כך:
קוד
.xyz{

}

#abc{

}


אם רוצים להיות יותר ספציפיים, למשל במקרה שיש לי גם a בעמוד שיש עליו class ששמו xyz אפשר לכתוב כך:
קוד
a.xyz{

}


כלומר מה למדנו מהדוגמאות?
שclass מגדירים עם נקודה, ו-id עם סולמית. אם רוצים לתת משהו יותר מוגדר (כמו תג a שיש עליו class="xyz"), קודם כותבים את שם התג, ואז נקודה (או סולמית אם זה ID) ואז את השם של האלמנט.

זה היה css על קצה המזלג smile.gif

תודה ענקית ל-Yolei על ההסבר! D:


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

יצירת עיצוב חדש
ספוילר:
אחרי שהתחברנו לאתר, נלך לפתוח עיצוב חדש שאותו נוכל לערוך בעזרת CSS.

  1. לכו ל-Profile > Panel > Edit.
  2. בעמוד שעברתם אליו תלחצו על My List Style.
  3. עכשיו על Advanced Style CSS Editor.
  4. אם עדיין לא יצרתם עיצוב תיצרו אחד על ידי לחיצה על I understand.
  5. תבחרו את העיצוב שבדיוק יצרנו.
  6. זהו. פה תוכלו בעצם לערוך את ה-CSS.


הגדרת העיצוב של הרשימה כעיצוב החדש
ספוילר:
כדי שנוכל לראות את מה שעשינו ו"להלביש" את הרשימה שלנו בעיצוב החדש נלך להגדיר את העיצוב של הרשימה שלנו.

נכנס ל-My List Style כמו שעשינו בפעם הקודמות.
  1. הפעם נלך ל-Change My List Style.
  2. בדף החדש תבחרו את העיצוב של רשימות האנימות והמנגות שלכם.
  3. ליחצו Change List Style כדי לאשר את הבחירה.

כנראה שאם תעברו עכשיו לרשימה שלכם היא לא תראה טוב במיוחד. עכשיו נעבור לעיצוב עצמו.


הקדמה קטנה לפני שמתחילים לעצב
אם כבר הספקתם לעבור קצת על ה-CSS שפתחנו בטוח ראיתם שהוא מחולק להרבה תגים ואלמנטים ולכל אחד יש את הטקסט שלו.
התגים והאלמנטים הן בעצם פניה לחלק כלשהו של הדף והטקסט בתוך ה-{ } הוא המאפיינים שלו.
קוד
body {
background-color:#fff;
}

פה לקחנו את תגית body והבאנו לה צבע רקע.

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

תגים ואלמנטים
ספוילר:
Body
ספוילר:
תגית גוף הדף - הרקע. פה נתמקד בדבר עיקרי אחד - צבע ותמונת רקע.
כדי להגדיר צבע רק נשתמש ב-background-color. אני רוצה לבן פשוט, אז:
קוד
BODY {
    background-color: #ffffff;
}

כדי להגדיר תמונת רקע נשתמש ב-background-image. אני רוצה לשים את התמונה הזאת.
קוד
BODY {
    background-color: #ffffff;
    background-image: url(http://i1106.photobucket.com/albums/h363/naitrom/MyAnimeList/Guide/MalBackground.png);
}

תכונות נוספות שמשפיעות על תמונת הרקע:
  • background-repeat - האם הרקע יחזור על עצמה.
    • repeat-x - הרקע חוזר אופקית
    • repeat-y - הרקע חוזר אנכית
    • repeat - הרקע חוזר אופקית ואנכית
    • no-repeat - הרקע לא חוזר על עצמו
  • background-attachment - האם הרקע ישאר באותו מקום או תיגלל.
    • scroll - הרקע יגלל
    • fixed - הרקע ישאר מקובע
  • background-position: x y - מיקום הרקע.
    • x - אופקי
    • y - אנכי

    את ה-x וה-y אפשר להחליף ב:
    • מספר פיקסלים (px) או ס"מ (cm) קבוע מהחלק העליון והחלק השמאלי.
    • אחוזים (%) מהדף.
    • מיקום בקצוות של הדף. x עם top ,bottom או center ו-y עם right ,left או center
  • background-size: x y - גודל תמונת הרקע. (לא עובד ב-IE)
    • כמו מיקום, אפשר להגיד עם מספר קבוע או עם אחוזים.
    • auto - במקרה ואתה רוצים לשנות לפני גובה או רוחב מסוים, auto יסדר לכם את התמונה אוטומטית לפי הגובה או הרוחב שבחרתם.

ומה יצא לי אחרי כל הסיפור הזה?
קוד
BODY {
    background-color: #ffffff;
    background-image: url(http://i52.tinypic.com/2h2kp3r.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
}

התמונה שבחרתי תהיה בתחתית המסך, ברוחב של הדף וקבועה.

לפני שנעבור לדף הבאה, נסדר את הגודל של הטקסט בעזרת font-size שאותו מגידים בעזרת מספר פיקסלים. מכיוון שאנחנו מכניסים את התכונה הזאת לגוף העמוד היא תשפיע על כל הטקסט בדף.
באותה הזדמנות נוסיף גם את התכונה color שנותנת צבע לכל הטקסט.
והתוצאה הסופית:
קוד
BODY {
    background-color: #ffffff;
    background-image: url(http://i52.tinypic.com/2h2kp3r.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    font-size: 12px;
    color: #aa0000;
}


#list_surround
ספוילר:
אלמנט הרשימה עצמה.
הדבר הראשון שנעשה הפעם זה להגדיר לרשימה רוחב כדי שלא יהיה על כך הדף בעזרת width. אני בחרתי 600 פיקסלים.
קוד
#list_surround {
    width: 600px;
}

עכשיו, נזיז את הרשימה לאן שנרצה. נשתמש ב-margin.
  • margin: top right bottom left
    • top - המרחק מהחלק העליון
    • right - המרחק מהחלק הימני
    • bottom - המרחק מהחלק התחתון
    • left - המרחק מהחלק השמאלי

    אם נרצה להעביר את הרשימה ימינה נוסיף:
    קוד
    margin: auto 0 auto auto;

    אם נרצה להעביר אותה שמאלה נוסיף:
    קוד
    margin: auto auto auto 0;

    ואם נרצה להעביר את הרשימה למרכז הדף נוסיף:
    קוד
    margin: auto auto auto auto;

עכשיו כשהרשימה במקום נוסיף איזה לוגו נחמד בראש הרשימה. איך? בדיוק כמו שעשינו עם התמונות רקע. שימו לב אבל שהפעם מדובר ברקע לחלק של הרשימה ולא של כל הדף.
אבל אוי! הרשימה עולה על הלוגו שלנו ואנחנו כמובן רוצים שהוא יהיה מתחת. בשביל זה נוסיף לרשימה את התכונה padding.
padding בעצם קובע אחרי איזה רווח יתחיל התוכן של החלק הזה, או במקרה שלנו, אחרי איזה רווח תתחיל הרשימה עצמה.
קוד
#list_surround {
    width: 600px;
    margin: auto auto auto auto;
    background-image: url(http://i1106.photobucket.com/albums/h363/naitrom/MyAnimeList/Guide/MalMainLogo.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    padding-top: 277px;
    background-color: #ffffff;
}

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


a
ספוילר:
תגית הקישורים. אם שמתם לב, הצבע שבחרנו לכל הטקסט ב-BODY לא השפיע על הקישורים. פה תוכלו לעשות זאת.
אין ממש מה להסביר. אתם יכולים לתת לקישורים שלכם את אותן התכונות שנתתם לשאר הטקסט או להחליט לעשות אותו טיפה שונה.
קוד
a {
    color: #aa0000;
}

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

a:visited
בדיוק כמו קישורים, אבל הפעם כאלה שכבר נכנסתם אליהם.
קוד
a:visited {
    color: #aa0000;
}


a:hover
שוב, כמו בקישורים, אבל כשאתם מעליהם עם העכבר.
קוד
a:hover {
    color: #0000aa;
}

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


.td1 / .td2
ספוילר:
אלמנט התאים בהם נמצאות האנימות. למה הם ביחד? כי הם בדיוק אותו הדבר. התאים מסודרים בצורה של td1 td2 td1 td2 ושוב, ושוב.
נסו לתת לכל אחד מהם צבע רקע שונה ותראו מה קורה.
קוד
.td1 {
    background-color: #aaaaaa;
}
.td2 {
    background-color: #bbbbbb;
}

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


.table_header
ספוילר:
אלמנט ראש כל טבלה. זה שבין הכותרת של כל חלק והתאים שבהם האנימות. שוב, אתם יכולים לתת לחלק את כל המאפיינים שעברנו עליהם.
אני שוב אתן לו רק צבע רקע.
.
קוד
table_header {
    background-color: #888888;
}


.table_headerLink
ספוילר:
אלמנט הלינקים בראש הטבלאות. בדיוק כמו a גם החלק הזה כולל visited ו-hover. זה טוב אם אתם רוצים לעשות את הקישורים שם שונים. אם תשאירו את המקום ריק זה פשוט ילך לפי a.


.status_selected / .status_not_selected
ספוילר:
אלמנט הסרגל הקטן עם ה-Completed ,On Hold ,Dropped וכול אלה.
selected מתייחס לזה שמסומן. not_selected מתייחס לכל השאר.
אתם יכולים לתת להם צבע רקע או אפילו תמונה קטנה ונחמדה.
אני, כרגיל, נותן להם רק צבע רקע.
קוד
.status_selected {
    background-color: #aaaaaa;
}
.status_not_selected {
    background-color: #bbbbbb;
}


.header_cw / completed / onhold / dropped / ptw
ספוילר:
האמלנטים של הכותרות שמעל כל טבלה. פה תוכלו להכניס לוגואים לכל אחד. תזכרו רק לתת להם את התכונה height כדי שהתמונה לא תחתח.
קוד
.header_cw {
    background-image: url(http://i1106.photobucket.com/albums/h363/naitrom/MyAnimeList/Guide/Reading.png);
    background-repeat: no-repeat;
    height: 100px;
}

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


.header_title
ספוילר:
האלמנט של הכותרות בטקסט שיש מעל כל טבלה. נכון שהן לא הולכות ביחד עם הלוגואים? אם נשנה את ה-font-size שלהן ל-0 הן פשוט יעלמו להן.
אם לא השתמשתם בלוגואים אתם יכולים לתת לכותרות גודל, צבע, צבע רקע ווכול מה שעברנו עליו.


.category_totals
ספוילר:
אלמנט סיכום כמות האנימות / מנגות של כל טבלה.
קוד
.category_totals {
    background-color: #888888;
}

צבע רקע שיתאים לראש הטבלה.


#grand_totals
ספוילר:
אלמנט סיכום כל הטבלאות יחד. אם אתם לא רוצים את הקטע הזה כמוני, אתם יכולים להעלים אותו כמו שעשינו עם הכותרות בעזרת font-size: 0.
קוד
#grand_totals {
    font-size: 0;
}


.animetitle
ספוילר:
אלמנט שמות האנימות שבתוך התאים. למקרה שאתם רוצים לתת להם צבע מיוחד או משהו. או סתם להדגיש אותם עם font-weight: bold.
קוד
.animetitle {
    font-weight: bold;
}


#copyright
ספוילר:
אלמנט זכויות יוצאים. חשוב מאוד לא למחוק את הקטע הזה. הרשימה שלכם עלולה להימחק אם תעשו זאת!
קוד
#copyright {
    background-image: url("http://i1106.photobucket.com/albums/h363/naitrom/MyAnimeList/Guide/MalSubLogo.png");
    background-repeat: no-repeat;
    height: 50px;
    margin: 0 auto;
    padding-top: 6px;
    text-align: center;
}

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


כמה תכונות נוספות שאולי יעזור לכם:
  • text-align - יישור טקסט.
    • left - הטקסט יעבור שמאלה.
    • right - הטקסט יעבור ימינה.
    • center - הטקסט יעבור למרכז.
  • font-family - להוסיף פונט לטקסט.
  • font-weight: bold - מדגיש טקסט
  • height - גובה
  • width - רוחב

~ התוצאה הסופית ~
לפחות עד שאני אכין אחד חדש.

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


--------------------
Go to the top of the page
 
+Quote Post
Celes
הודעה 31.07.2011, 19:46
הודעה #2


ג'ונין
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 1,589
תאריך הצטרפות: 22.07.09
מיקום: קדימה-צורן
משתמש מספר: 68,935



ניב אתה לא מבין איך שימחת אותי ^^
תמיד תהיתי איך לעצב את עמוד המאל שלי ככה ועכשיו יש לי תשובה D:
אני אעצב את זה כשיהיה לי זמן וחשק כי זה בטח לוקח די הרבה זמן, אבל בכל זאת המון תודה לך


--------------------





The CLAMP Commandments

Thou shalt love all CLAMP Works, regardless of substance and character relations, and shall not look down upon anything that bears the Sigil of CLAMP

For the longevity and embellishment of the community, thou shalt apportion thy information amongst those who wish to partake in the wonders of the CLAMP Works

If thou hath the means, thou shalt work for the honor of supporting CLAMP and their Original Works to assure their longevity and prosperity

Followers of CLAMP Works have the liberty of expressing all opinions regarding the Works without trepidation of affronting the Institution nor any other follower of CLAMP
Go to the top of the page
 
+Quote Post
TomerTop
הודעה 31.07.2011, 19:54
הודעה #3


Go Wild Thorny Boys
סמל קבוצה

קבוצה: משגיחים
הודעות: 7,129
תאריך הצטרפות: 17.10.07
משתמש מספר: 46,189



הללויה, סוף סוף אוכל לעשות משהו עם הMAL שלי...!
כשיהיה לי כח.

ח"ח like.pnglike.pnglike.png


--------------------






Go to the top of the page
 
+Quote Post
פיצה
הודעה 31.07.2011, 20:24
הודעה #4


מעניין תזיין שלי טוב?
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 15,877
תאריך הצטרפות: 9.05.09
משתמש מספר: 67,326



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

מוסבר היטב וקל להבנה גם לאנשים שלא מבינים בזה כלום (כמוני).


--------------------


"LETS TALK DUGRI AND GET ALL HIBUKI" יוליתאי-תאי תאיר


deviantART | Song of Choicel]
Go to the top of the page
 
+Quote Post
juliet
הודעה 31.07.2011, 21:16
הודעה #5


יש לי אישה שאוהבת אותי 3>
סמל קבוצה

קבוצה: רשומים
הודעות: 200
תאריך הצטרפות: 2.06.09
מיקום: soviet russia :D
משתמש מספר: 67,795



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

תודה רבה! like.png


--------------------

♥♥♥~ Jang Geun Seok
O:




Go to the top of the page
 
+Quote Post
nigi
הודעה 31.07.2011, 21:22
הודעה #6


!Hero kenzan
סמל קבוצה

קבוצה: פקחים
הודעות: 8,897
תאריך הצטרפות: 24.09.10
מיקום: חיפה
משתמש מספר: 82,043



וואו כל הכבוד D:
טכנית התחלתי ללמוד CSS פעם רק בשביל זה, אבל נטשתי מוקדם מאוד.
בכל מקרה יעזור להרבה


--------------------
ספוילר:


Why hello there
Go to the top of the page
 
+Quote Post
gilcohen
הודעה 31.07.2011, 21:48
הודעה #7


ג'ונין
סמל קבוצה

קבוצה: וותיקים
הודעות: 1,584
תאריך הצטרפות: 13.02.10
מיקום: מרכז
משתמש מספר: 73,451



ח"ח D:

אבל לא תודה P:


--------------------
99.9% מהפורום לא קראו את החוקים כאשר הצטרפו לפורום אם גם אתם לא קראתם, הוסיפו משפט זה לחתימתכם.
ידוע באינטרנט - saske,gilcohen456.


D.Gray-Man

האתר של הקבוצה!
>>>CraZy-Sub<<<


Go to the top of the page
 
+Quote Post
Bakeneko
הודעה 31.07.2011, 23:01
הודעה #8


Burn the Soul!
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 3,980
תאריך הצטרפות: 24.05.08
משתמש מספר: 57,789



תודה לכולם. D:
יאללה, לפורום תכנות!


--------------------
Go to the top of the page
 
+Quote Post
Loola
הודעה 01.08.2011, 04:21
הודעה #9


סטודנט באקדמייה
סמל קבוצה

קבוצה: רשומים
הודעות: 2
תאריך הצטרפות: 31.07.11
מיקום: ירושלים
משתמש מספר: 135,802



תודה רבה D:D:
עזרת לי המון,
אבל עברתי על זה אלף פעם ובדקתי שלא טעיתי ועדיין אני לא מצליחה להגדיר את הרקע של הטבלאות והצבעים של השמות של האנימות והלינקים sad.gif
http://myanimelist.net/animelist/loola2000

אשמח אם תוכלי לעזור לי בפרטי ^^


--------------------






3 >







Go to the top of the page
 
+Quote Post
Prototype
הודעה 01.08.2011, 05:48
הודעה #10


Bam ratatata tatatatata
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 5,417
תאריך הצטרפות: 30.09.08
מיקום: Oshu
משתמש מספר: 61,589



יא קרדיט ענק לנושנוש X3


--------------------
Go to the top of the page
 
+Quote Post
Keren Fan
הודעה 01.08.2011, 07:37
הודעה #11


סאנין
סמל קבוצה

קבוצה: וותיקים
הודעות: 6,921
תאריך הצטרפות: 12.07.06
מיקום: Pardise City
משתמש מספר: 12,110



ענק!ח''ח (:
עשה לי חשק לפתוח MAL *~*


--------------------

קרדיט לyutu על הסקסית למעלה (:


ציטוט(Ben Fan @ 05.03.2009, 22:07) *
רק לבן יצא אלכוהוליסטים אנונימיים כשם ללהקה XD


Go to the top of the page
 
+Quote Post
Bluexx
הודעה 01.08.2011, 09:49
הודעה #12


Programming Maggot
סמל קבוצה

קבוצה: וותיקים
הודעות: 1,450
תאריך הצטרפות: 21.03.11
משתמש מספר: 117,404



כל הכבוד על המדריך!
Go to the top of the page
 
+Quote Post
Doctor Shinobi
הודעה 01.08.2011, 10:07
הודעה #13


כשף כרובים
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 4,878
תאריך הצטרפות: 9.07.06
מיקום: חדרה
משתמש מספר: 11,987



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


--------------------


Go to the top of the page
 
+Quote Post
Julian
הודעה 01.08.2011, 11:36
הודעה #14


אני גרוע ואיטי טי טי
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 3,449
תאריך הצטרפות: 17.01.06
מיקום: גבעתיים
משתמש מספר: 6,979



ציטוט(Loola @ 01.08.2011, 05:21) *
תודה רבה D:D:
עזרת לי המון,
אבל עברתי על זה אלף פעם ובדקתי שלא טעיתי ועדיין אני לא מצליחה להגדיר את הרקע של הטבלאות והצבעים של השמות של האנימות והלינקים sad.gif
http://myanimelist.net/animelist/loola2000

אשמח אם תוכלי לעזור לי בפרטי ^^

לפני צבעים יש להוסיף את הסימן סולמית(#).
עוד על זה - יש לך אלמנטים שם שאין להם ערך.

דוגמא מהקוד שלך:

קוד
a:visited

        {
        color:;
        background-color: 993366;
        }


איך זה צריך להיות במקום:
קוד
a:visited

        {
        background-color: #993366;
        }


--------------------
Go to the top of the page
 
+Quote Post
+Cielo
הודעה 01.08.2011, 16:40
הודעה #15


+++++++++++
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 3,887
תאריך הצטרפות: 24.04.06
מיקום: חיפה
משתמש מספר: 9,710



וואו ניב זה ממש אדיר, כל הכבוד O_O
למרות שאני כבר בעבר עיצבתי את הMAL שלי זה ממש עוזר לדעתי, עושה חשק לעצב מחדש XD


--------------------
Go to the top of the page
 
+Quote Post
Doctor Shinobi
הודעה 01.08.2011, 16:57
הודעה #16


כשף כרובים
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 4,878
תאריך הצטרפות: 9.07.06
מיקום: חדרה
משתמש מספר: 11,987



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


--------------------


Go to the top of the page
 
+Quote Post
Bakeneko
הודעה 01.08.2011, 17:01
הודעה #17


Burn the Soul!
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 3,980
תאריך הצטרפות: 24.05.08
משתמש מספר: 57,789



זה היה בפורום אנימה והעברתי עם קישור לפה אחרי כמה תגובות + יש באנימה באנר לזה.


--------------------
Go to the top of the page
 
+Quote Post
Loola
הודעה 02.08.2011, 03:26
הודעה #18


סטודנט באקדמייה
סמל קבוצה

קבוצה: רשומים
הודעות: 2
תאריך הצטרפות: 31.07.11
מיקום: ירושלים
משתמש מספר: 135,802



ציטוט(Julian @ 01.08.2011, 12:36) *
ציטוט(Loola @ 01.08.2011, 05:21) *
תודה רבה D:D:
עזרת לי המון,
אבל עברתי על זה אלף פעם ובדקתי שלא טעיתי ועדיין אני לא מצליחה להגדיר את הרקע של הטבלאות והצבעים של השמות של האנימות והלינקים sad.gif
http://myanimelist.net/animelist/loola2000

אשמח אם תוכלי לעזור לי בפרטי ^^

לפני צבעים יש להוסיף את הסימן סולמית(#).
עוד על זה - יש לך אלמנטים שם שאין להם ערך.

דוגמא מהקוד שלך:

קוד
a:visited

        {
        color:;
        background-color: 993366;
        }


איך זה צריך להיות במקום:
קוד
a:visited

        {
        background-color: #993366;
        }



ואו!! smile.gif המון תודה !!
עזרת לי המון 3 > , עכשיו זה נראה טוב
שאני אפילו לא מאמינה שזה שלי on11.gif


--------------------






3 >







Go to the top of the page
 
+Quote Post
Julian
הודעה 03.08.2011, 00:20
הודעה #19


אני גרוע ואיטי טי טי
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 3,449
תאריך הצטרפות: 17.01.06
מיקום: גבעתיים
משתמש מספר: 6,979



את יכולה אגב לנסות להוסיף שם את הערך OPACITY, כדי שיהיה קצת שקוף ולא יסתיר את התמונה מאחור.
קוד
Opacity:1;

אומר שרואים את זה לגמרי

ואילו:
קוד
Opacity:0;

לא רואים בכלל.

וכמובן שאפשר גם 0.7 שאומר שזה 30% שקוף,
או 0.5 שזה 50% שקוף,
או 0.35743 שזה...55.236% שקוף...D:


--------------------
Go to the top of the page
 
+Quote Post
Yolei
הודעה 03.08.2011, 09:20
הודעה #20


ג'ונין
סמל קבוצה

קבוצה: חברי כבוד
הודעות: 1,773
תאריך הצטרפות: 15.10.05
משתמש מספר: 4,341



^

כדי שזה יעבוד גם בIE צריך להוסיף:
קוד
filter:alpha(opacity=60);


--------------------



אני בחורה די להתייחס אליי בלשון זכר!!!
Go to the top of the page
 
+Quote Post

2 עמודים V   1 2 >
Reply to this topicStart new topic
1 משתמשים נמצאים בנושא זה (1 אורחים ו-0 משתמשים אנונימים)
0 משתמשים:

 



RSS גרסת ארכיון הזמן כרגע: 15.11.2019 , 14:34