מאז לחצן האפשרויות והטקסט הם בשורה, אז הטקסט יהיה ליישר את עצמה בתחתית לחצן הבחירה, הטקסט יופיע להיות מעט מתחת לחצן הבחירה.
אם אתה רוצה אלה כדי ליישר למעלה, תצטרך להציב את הרדיו טקסט לתוך מכלים נפרדים כמו divs או את משכי (לפי הצורך) והם יטפלו יישור. זה יהיה קל יותר לשימוש בתאי הטבלה גם קצרה של העיצוב שלך מאפשר את זה.
זה לא ייראו אותו הדבר בכל דפדפן, כמו כל דפדפן מציג מכשירי רדיו בצורה קצת שונה, ולכן יש תמיד יהיה בעיות גודל לא משנה מה אתה עושה.
HTML5 עדיין טיוטה. כשאני כותב, העבודה על HTML 5, שהחלה בשנת 2004, הוא עדיין נתון במצב של מאמץ משותף בין ה-HTML של W3C WG ואת WHATWG . המילה היא הדור הבא HTML יהיה שיפורים ותכונות, אשר היה מבנה חדש וסמנטיקה, בקרים, API, מולטימדיה וכו 'תגים.
באנגלית פשוטה ... מה זה אומר לנו, מפתחים ממשק משתמש ...
<body> <header> ... </ כותרת> <nav> ... </ Nav> <article> <section> ... </ קטע> </ מאמר> <aside> ... </ בצד> <footer> ... </ תחתונה> </ Body>
במקום
<body> <div id="header"> ... </ p> <div id="nav"> ... </ p> <div class="article"> <div class="section"> ... </ P> </ P> <div id="aside"> ... </ p> <div id="footer"> ... </ p> </ Body>
למשל:
<video poster="poster.jpg"> <מקור src = "video.3gp" type = "video/3gpp" התקשורת = "כף יד"> <source src="video.mp4" type="video/mp4"> </ וידאו> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </ אודיו>
ישנם שינויים רבים יותר / שדרוגים לגרסה חדשה יותר ... אמשיך לעדכן את הפוסט כאשר אני בא accross כל אלה שימושיים מעניינים .... צפה בסרטון שטח
מסמך זה לא יכול לספק מידע מדויק מפרט ה-HTML 5 הוא עדיין פעיל בפיתוח. במקרה של ספק, תמיד לבדוק את מפרט ה-HTML 5 כאן .
זה בית הספר הישנים, אבל כרגיל זה תוספת הזיכרון שלי ...
אז מושבת = "true" ונכים = "שקר" אותו דבר? כן
... אל תאמינו, טוב! thats דרך זה ... הנה קצת הסבר מהיר ...
"נכה" הוא של אלמנט כל צורה / שדה ולכן יכול לקבל כל ערך מטבעה.
עוד מאפיין זה קיים, אלמנט יושבתו ללא קשר לערך שלה. עבור למשל.
<input type="text" value="This הוא disabled" disabled>
<input type="text" value="This הוא disabled" disabled="disabled">
<input type="text" value="This הוא disabled" disabled="true">
<input type="text" value="This הוא disabled" disabled="false">כל אלו יהפכו את שדה הטופס "לא זמין".
פשוט לא מספק את התכונה "לא זמין" שומר שדה "ABLED" ... כמו למטה
<input type="text" value="This לא disabled" />
זכור "כל ערך (או כל ערך) של התכונה נכים, הדפדפן יציג אותו נכה". כדי לשמור על הדברים ברורה W3C המוחות שלנו ממליצה אנו משתמשים זמינה = "נכה" במצבים כאלה.
זה ההבדל אם כי כאשר אנו משתמשים בתכונה זו ב-JavaScript ...
document.form.element.disabled = נכון, / / אלמנט יושבתו
document.form.element.disabled = false; / / אלמנט יופעל
הטיעונים לעיל נכון גם לגבי תכונות אלה אלמנטים:
אם אתה אדם CSS, היית יודע את הכאב מקבל פריסות שלך עבודה לדפדפנים. IE8 הוא עוד ברגים בעבודות עבור מפתחים אותנו. Anywaz! אם אתה מכה על בעיה זו, כמו שעשיתי אתמול, כאשר ה-CSS בצורה מושלמת לעבודה שלך IE7 (וגם קודם לכן) ו-Firefox התחיל פתאום לזרוק התקפי זעם של IE8, נסה את זה ... זה נראה יפה לתקן את הבעיות שלי לרגע ....
באמצעות הכרזה מטא, אנו יכולים לציין את מנוע עיבוד ברצוננו IE8 לשימוש. אז לכפות IE8 כדי להבהיר כמו IE7 ... הוספת תג Meta הבאה לתוך הראש של המסמך: -<meta http-equiv="X-UA-Compatible" content="IE=7" />
כברירת מחדל Meta IE יהיה: -
<meta http-equiv="X-UA-Compatible" content="IE=8" />
אשר יגרום IE8 להפוך את הדף באמצעות מצב סטנדרטים חדשים.במידת הצורך, תחביר זה יכול לשמש כדי להכיל לדפדפנים אחרים כמו להלן:
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
אם אתה עדיין לא מכיר סוג של בעל חיים בשם "DOCTYPE" ... הנה קצת מהירה לקרוא
מה DOCTYPES? מה Quirks הדפדפן & מצב קפידה?
הגדרת DOCTYPE ב XSL
במשך יותר הבנה מעמיקה על DOCTYPES, נסה לבקר את הקישורים הללו ...
A List Apart: תקן את האתר שלך עם DOCTYPE הנכון!
A List Apart: מעבר DOCTYPE: תקני אינטרנט, תאימות קדימה, ו IE8
הערה: למרות שרבים מאיתנו HTML / CSS אנשים היו מזניחים את החשיבות של decleration DOCTYPE במסמכים שלנו, הגדרת DOCTYPE הנכון, בדרך כלל התשובה בעיות דפדפנים ביותר.
כרגיל, אחת לכמה בעיות רבות מוזרים עם IE ו 1 זה חייב דרגות 10 ראש של Quirks של IE.
המסר הבעיה (זו היתה הבעיה שלי, אולי יש לך misbehaviors דומים):
יש לי DIV רבים נמצא בדף עם הכיתה "sectionhead", שאינו אלא שם סעיף בדף. אז יש לי סגנון קצת נראה כמו זה
. Sectionhead {font-size: 18 פיקסלים, הרקע: # cfcfcf: ריפוד: 5px;}
Div הוא בר אפור בהיר עם טקסט קצת שחור. מה קורה ב-IE הוא חלק מאותם כותרות בסעיף מוצגים בסדר, אבל כמה הם בלתי נראים, עד לך לגלול את הדף או ללחוץ על משהו על הדף וכו 'לפעמים הם נוטים להיעלם כאשר אתה לוחץ על "alt" מפתח כאשר הדף כלפי מטה או לגלול עם פס הגלילה. הם לפעמים נראה להופיע שוב כאשר אתה מחדש (F5) את הדף. אני DIV קצר פשוט מושלם עם הסגנון כמה פשוט מתנהג רע.
מה יכול לגרום להתנהגות לא יציבה כל כך? טוב! למען האמת, אין לי מושג!
אפשרי פתרון:
שוב אל תשאלו אותי למה, אבל במקרים רבים בעיה זו נוטה להיעלם כאשר אתה מוסיף מיקום: יחסית MIS מתנהגים בסגנון אלמנטים, כמו זה
. Sectionhead {font-size: 18 פיקסלים, הרקע: # cfcfcf: ריפוד: 5px; קבוצה: קרוב משפחה}
מוזר אבל מה לומר? אלוהים ברך אותי IE!
ו חולקים עם ארה"ב, אם היה לך בעיות דומות.
לא שיש רק Lightbox של כמה שאתה יכול למצוא כאשר גוגל. הבעיה עם רוב תיבות אור שמצאתי היה כי כולם נראו להשתמש באחד או אחרות כבדות משקל של JavaScript במסגרות כמו Prototype JQuery, MooTools ואת אוהבת. כולם קריר swanky מחפש. אבל אם הדרישה שלך היא "אבל אני רוצה סקריפט Lightbox פשוט קל לשימוש באתר שלי", אז הנה היא:
כמה תכונות נחמדות של Lightbox זה
הצג הדגמה |
הורד מיקוד מקור Lightbox (הורידו 1797 פעמים)
jo.js, jo_pack.js [גרסה ארז]: - סט פשוט של JavaScript חפצים [JO], המכיל, אלמנט החלון מיקום סקריפטים מסמכים. אתה יכול לפתוח JO.JS אם אתה רוצה ללכלך את הידיים עם Javascripting קצת מתקדם, יצירת פונקציות מופשטות, הארכת מאפייני אלמנט וכאלה. אם אין יותר מדי Javascripting, עזוב את זה.
lightbox.js, lightbox_pack.js [נוסח ארז]: - מכיל אור מנהל סקריפטים תיבת. אם אתה מעצב הדף, אחראי גם על יישום Lightbox על הדף, אתה צריך להבין LightBoxManager. LightBoxManager בעצם מכיל רק שתי פונקציות showLightBox ו closeLightBox.
lightbox.css: - אם אתה יודע CSS, אתה יכול לשחק עם סביב lightbox.css להתאים אישית את המראה-n-מרגיש lightbox.css
index.html: יישום לדוגמא של Lightbox 2 עם תוכן שונה
lb_underlay_bkg.png: - זה האור / סימי תמונה שקוף המשמש רקע ביסוד Lightbox [ביסוד היא שכבה מתחת lighbox, אשר מונעת מהמשתמש לחיצה על כל גוף אחר בדף, בעוד Lightbox פתוח]. ניתן להשתמש בכל תמונה או אפילו צבע אחיד למטרה זו, בהתאם לעיצוב הדף את הדרישה.
icon_lb_close.gif: - התמונה להגדלה ידית Lightbox קרוב בפינה הימנית העליונה של תיבת האור. ניתן להשתמש בכל תמונה בהתאם לעיצוב
הצג הדגמה |
הורד מיקוד מקור Lightbox (הורידו 1797 פעמים)
נא לתת לנו את הערותיך ואת המשוב ...
הודעה זו יכולה להיות דוגמה טובה עבור הביטוי "סבתא הוראה למצוץ ביצים" ... כי זה רק חומר בסיסי CSS. אבל לאלה, כמו מתעלם ממני, זה יכול להיות ברכה בתחפושת. תמיד חשבתי (אני יכול לאבד את העבודה שלי אומר את זה), זה היה רק ניתן לשמור על חלק מהתוכן בדף HTML סטטי (כלומר, מעמדה נותר כמות שהוא על חלון גלילה), בעזרת כמה תסריטים חכמים, עושה את כל אלה מדעית חישובים כדי למצוא את המיקום דינמי, השמנה אירועים Window.scroll וקביעת זמנים קצובים וכו '
אף פעם לא חשבתי שזה יכול פשוט כמו זה .... כאן CSS / HTML להלן, יש לי ארבעה בלוקים סטטיות, אחד קבוע כל אחד extrimities של הדף, למעלה, למטה ימינה, שמאלה ו ... אין צורך לומר ... אתה יכול לבחור כל אחד או יותר אם יהיה צורך ...
CSS
. סטטי {תצוגה: לחסום; z-index: 10; color: # FFFFFF; הצפת-x: hidden; הצפת-Y: מוסתר; קבוצה: ixed;
}
מס 'תוכן {margin: 0px 100px 150px 160px; גבול: 1px solid # e6e6e6 אנשי# לעטוף-T {למעלה: 0px; הרקע: # 33CC66, רוחב: 100%, גובה: 55px;}
# לעטוף-l {למעלה: 80px; הרקע: # FF9966; גובה: 300px; רוחב: 150px; הגבול: 2px solid # e6e6e6;}
# לעטוף-b {התחתונה: 0px; רקע: # 3333CC, רוחב: 100%, גובה: 55px;}
# לעטוף-R {למעלה: 80px; הרקע: # 6666FF, גובה: 300px; רוחב: 140px; הגבול: 2px solid # e6e6e6, מימין: 0;}
HTML
id="contents"> <div אתם את תוכן דף העיקריים </ p>
<div id="wrap-b" class="static">
תוכן סטטי בתחתית עמוד
</ P>
<div id="wrap-t" class="static">
תוכן סטטי לראש הדף
</ P><div id="wrap-l" class="static">
תוכן סטטי בדף עזב
</ P>
<div id="wrap-r" class="static">
תוכן סטטי בצד ימין עמוד
</ P>
הרבה פעמים אנחנו מרגישים צורך לכתוב פריצות הדפדפן specfic (למרות שזה לא מומלץ, אנחנו מפתחים ממשק משתמש צריך לפנות אל רעות כאלה עד מלחמת דפדפנים גדולים מגיע הפסקת אש). מוקדם יותר, אני הזכיר במאמר זה עבור IES בלבד , כיצד לכתוב קטע CSS זה יהיה גלוי הדפדפנים אקספלורר <IE7 בלבד.
אתמול, היה לי מקרה, שבו אני רוצה לכתוב כמה קטעי ספציפי FireFox CSS. טוב! אני לא בטוח אם יש קוד ה-CSS בשביל זה אבל זה HTML. יש לתפוס למרות, זה חתיכת אימות HTML doesnot HTML לעבור. אבל, anywaz! אם אתה תקוע או רע ככזה, אין דרישת שלום, לצורך אימות (מתישהו אנחנו צריכים להיות אכזריים), ניתן להשתמש הבאה להכריז קישור stylesheet FF בלבד או אפילו רק קוד CSS בתוך בלוק זה. הקוד הוא
<comment> שים FireFox בלבד HTML / CSS / סקריפטים כאן </ הערה>
למשל:
<comment>
<style>
/ * סגנונות עבור FF בלבד * /
fieldset {גבול: 1px מוצק # dddddd;}
</ Style>
</ הערה>
אני "מ 'מאושר לרגע ...
בבית מספר פעמים, ותוך פריסות עמוד עם חטיבות / תיבות אור קופץ / עצות וכו 'אנו נתקלים במצבים בהם כמה חפצים טופס קורה בחר להיות תחת אלה חטיבות קופץ, על ידי עיצוב זה מראה דרך .... איכס!
טוב! אתה יכול בקלות לתקן זאת על ידי התאמת ערכי z-index שלך כראוי על FF ו IE7. אבל טוב ישן (משחק מלים המיועד) IE6 לא מתנהגת כמתוכנן .... הצג BOX SELECT דרך, גם לאחר החלת כמה גבוהות באופן דרסטי z-index ערכים לאגף החלונות הקופצים ... באסה!!
אין תיקונים עבור בעיה זו, אך יש, לדעתי, יותר מאשר דרך כמה לעבוד, בעיה זו, אבל Im כאן כדי לספר לכם את הפתרון הפשוט שאני משתמש, וזה עובד מצוין בשבילי, ברוב מקרים ....
"להסתיר את תיבת SELECT רוז' כשאתה מציג רקע"
פשוט קטע התסריט שלך שבו אתה קופץ להראות שלך, להוסיף חתיכת סקריפט כדי להגדיר את הנראות של תיבת SELECT כדי "מוסתר"
document.getElementById ('my_select') style.visibilty = "סמוי".
וזכור להגדיר אותו מחדש מדוקדקת של אגף החלונות הקופצים
. ("my_select") document.getElementById style.visibilty = "גלוי";
שם "my_select" הוא תעודת הזהות של תיבת גירוי SELECT
מקווה שזה יעזור ...
PS. יש אפשרויות אחרות כמו ofcourse דינמי positionining (באותו גודל כמו שאתה הנפתח) IFRAME מתחת DIV קופץ ... זה עובד היטב, אבל עם תוספת של המון אלמנטים, סקריפטים DOM ו כאבי ראש. השתמשתי פתרון מדי, אם אתה צריך עזרה עם אפשרות זו, תיתן לי. אשמח לעזור!
