2010 4 مارس 2010

محاذاة زر الراديو مع النص

منذ زر والنص هي مضمنة، وبالتالي فإن النص سوف ينضم إلى الجزء السفلي من زر الراديو، وسيكون النص على ما يبدو قليلا تحت زر الراديو.
إذا كنت تريد هذه لمحاذاة إلى الأعلى، سيكون لديك لوضع الراديو والنص في حاويات منفصلة مثل divs أو يمتد (عند الاقتضاء)، وأنها سوف تأخذ الرعاية من المحاذاة. سيكون من الأسهل لاستخدام خلايا الجدول أيضا، من موجز التصميم الخاص بك يسمح بذلك.

وهذا لن ننظر نفسه في كل متصفح، كما يعرض كل متصفح لاسلكي بشكل مختلف قليلا، لذلك هناك دائما ما يكون حجم القضايا بغض النظر عن ما تفعله.

لا توجد تعليقات | نشر في المراوغات متصفح ، HTML

2010 8 يناير 2010

ما الذي جلب HTML5؟

HTML5 ما زال مشروع. لا يزال وأنا أكتب، والعمل على HTML 5، والتي بدأت في عام 2004، على أن يولى شكل من جهد مشترك بين مجموعة العمل W3C HTML و WHATWG . الكلمة هي أن الجنرال HTML المقبل سيكون التحسينات والمزايا والذي من شأنه الهيكل الجديد ومعاني الكلمات، والضوابط شكل من الأشكال، واجهات برمجة التطبيقات، والوسائط المتعددة العلامات وغيرها.

في اللغة الإنجليزية بسيطة ... ماذا يعني للمطورين واجهة لنا ...

  • لن يكون هناك أي إضافة بعض العلامات الهيكلية. <article>، <section>، <header>، <aside>، و<nav>، التي ستحل محل غالبية ق <DIV> استخدامها على صفحة على شبكة الإنترنت، مما يجعل صفحات موقعك أكثر قليلا الدلالي، ولكن الأهم من ذلك، من الأسهل للقراءة.
    مهلا! مجرد تصور جهد المحفوظة في العثور على أن واحدا في عداد المفقودين علامة DIV وثيق.
    على سبيل المثال 
  <BODY>
   <header> ... </ الرأس>
   <nav> ... </ التنقل>
   <article>
     <section>
       ...
     </ القسم>
   </ مقالة>
   <aside> ... </ جانبا>
   <footer> ... </ تذييل>
 </ BODY>

بدلا من 

  <BODY>
   <div id="header"> ... </ div> المصدر:
   <div id="nav"> ... </ div> المصدر:
   <div class="article">
     <div class="section">
       ...
     </ div> المصدر:
   </ div> المصدر:
   <div id="aside"> ... </ div> المصدر:
   <div id="footer"> ... </ div> المصدر:
 </ BODY>
  • مع ظهور محتوى الصوت والفيديو مثل يوتيوب، واستخدام الوسائط المتعددة جزءا لا يتجزأ من على صفحات الويب وincreaded بواسطة أضعاف. أخذ هذا في الاعتبار، والخطة الآن هي إضافة الوطنية لدعم دمج الفيديو والصوت في المتصفح نفسه، وبالتالي تسمح للمستخدمين للعب، وقفة، ووقف، والسعي، وضبط مستوى الصوت باستخدام DOM مدمج APIs للمخطوطات للسيطرة على القراءة.

على سبيل المثال 

  <video poster="poster.jpg">
     <مصدر SRC = "video.3gp" نوع = "video/3gpp"
     وسائل الاعلام = "المحمولة">
         <source src="video.mp4" type="video/mp4">
 </ فيديو>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ صوتية>
  • أفضل تعريف الأدوار الدلالي للعناصر القائمة لعلى سبيل المثال. ربما على <strong> و <em> الآن فعلا معان مختلفة أي أنها سوف تتصرف بشكل مختلف.

هناك العديد من التغييرات أكثر / ترقيات إلى الإصدار الأحدث ... هل حفاظ على تحديث هذا المنصب كما جئت تزوجنا أي منها للاهتمام مفيد .... مشاهدة هذا الفضاء

ربما هذه الوثيقة لا تقدم معلومات دقيقة مثل HTML 5 مواصفات لا تزال نشطة في عملية التنمية. عندما تكون في شك، ودائما التحقق من HTML 5 مواصفات هنا .

1 تعليق | العلامات: | نشر في HTML

2009 18 أكتوبر 2009

HTML و XHTML

  • إعلان نوع الوثيقة يجب أن يكون حاضرا في بداية المستند الذي يستخدم في بناء جملة HTML. قد اختياريا يمكن استخدامه في بناء الجملة XHTML، ولكن ليس مطلوبا. وثيقة XHTML ليست في حاجة لتشمل DOCTYPE لأن وثائق XHTML التي يتم تسليمها بشكل صحيح باستخدام ملف XML MIME نوع، ويتم معالجتها من قبل برامج التصفح مثل XML، يتم تقديمها دائما في وضع لا المراوغات.
  • في XHTML، أسماء العلامات هي قضية حساسة وعادة ما تكون محددة لتكون مكتوبة في صغيرة. في HTML، ومع ذلك، أسماء العلامات هي قضية حساسة وربما تكون مكتوبة في كل قضية كبيرة أو مختلطة، ورغم أن الاتفاقية الأكثر شيوعا هو التمسك صغيرة. حالة من علامات البداية والنهاية لا يجب أن تكون هي نفسها، ولكن كونه لا يتفق جعل نظافة نظرة رمز.

فوائد استخدام HTML

  • إلى الوراء متوافقة مع المتصفحات الحالية
  • الكتاب بالفعل معتادا على بناء الجملة
  • بناء الجملة ليونة وتسامحا يعني انه لن يكون هناك مستخدم معادية " الشاشة الصفراء من الموت "إذا كان من الخطأ ينزلق دون قصد عن طريق
  • بناء الجملة مريحة اختزال، يمكن للمؤلفين مثل حذف بعض العلامات والقيم السمة

فوائد استخدام XHTML

  • صارم XML بناء الجملة تشجع الكتاب لكتابة العلامات بشكل جيد، والتي قد تجد بعض الكتاب أسهل للحفاظ على
  • يدمج مباشرة مع مفردات XML الأخرى، مثل SVG و MathML
  • يسمح باستخدام معالجة XML، الذي استخدم بعض الكتاب كجزء من التحرير و / أو عمليات نشر

لا توجد تعليقات | العلامات: | نشر في HTML ، مطور ويب

2009 24 مارس 2009

تم تعطيل = "صحيح"، وتعطيل = "كاذبة" نفس الشيء؟

هذه المدرسة القديمة، ولكن كالعادة هو تكملة ذاكرتي ...
لذلك تم تعطيل = "صحيح"، وتعطيل = "كاذبة" واحد؟ نعم
... لا أعتقد، أيضا! ثت النحو الذي هي عليه ... وهنا بعض شرح سريع ...
"تعطيل" هي سمة من سمات العنصر شكل أي / حقل، وبالتالي لا يمكن أن يقبل أي قيمة بطبيعته.

ما دامت هذه السمة موجودة، سيتم تعطيل العنصر بغض النظر عن قيمتها. لعلى سبيل المثال.
<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 توصي نستخدم تعطيل = "معطل" في هذه الحالات.

وهذا هو الفرق على الرغم عندما نستخدم هذه السمة في جافا سكريبت ...

document.form.element.disabled = صحيح؛ / سوف / يتم تعطيل العنصر
document.form.element.disabled = كاذبة؛ / سوف / يجب تمكين العنصر

الحجج المذكورة أعلاه ينطبق أيضا على هذه الصفات والعناصر:

  • فحص (زر الراديو والاختيار)
  • اختيار (الخيار)
  • nowrap (TD)

1 تعليق | العلامات: | نشر في HTML ، JavasScript

2008 17 ديسمبر 2008

سوء التصرف IE8: كسور تخطيط المغلق (استهداف إصدار مستعرض به ميتا في IE8)

إذا كنت المغلق شخص، وكنت أعرف ألم في الحصول على مخططات العمل الخاصة بك عبر متصفح. IE8 هو آخر البراغي في الأشغال لمطوري لنا. Anywaz! إذا كنت ضرب على هذه المسألة، كما فعلت أمس، حيث CSS العمل الخاص بك تماما في IE7 (وأقدم) وفايرفوكس وبدأت فجأة رمي نوبات الغضب في IE8، وهذه محاولة ... وبدا لطيف لإصلاح مشاكل بلدي لحظة ....

استخدام الإعلان ميتا، لا يمكننا تحديد مشغل تقديم نود IE8 للاستخدام. لذلك لاجبار IE8 لتقديم مثل IE7 ... إدراج العلامة الوصفية التالية في رأس المستند: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

افتراضيا أي أن يكون ميتا: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
الأمر الذي جعل IE8 تقديم الصفحة باستخدام وضع معايير جديدة.

إذا لزم الأمر، يمكن أن تستخدم هذه الجملة لاستيعاب للمتصفحات الأخرى على النحو التالي:

<meta http-equiv="X-UA-Compatible" content="IE=8؛FF=3؛OtherUA=4" />

المزيد عن DOCTYPES:

إذا كنت غير مألوف حتى الآن مع هذا النوع من الحيوانات تسمى "DOCTYPE" ... وهنا بعض سريع القراءة
ما هي DOCTYPES؟ ما هي المراوغات متصفح ووضع الصارمة؟
وضع DOCTYPE في XSL

للحصول على أكثر في فهم عمق حوالي DOCTYPES، حاول زيارة هذه الروابط ...
وهناك قائمة بصرف النظر: إصلاح موقعك مع DOCTYPE الحق!
وهناك قائمة بصرف النظر: ما وراء DOCTYPE: معايير الويب، التوافق إلى الأمام، وIE8

ملاحظة: على الرغم من الكثير منا HTML / CSS الناس وقد تم تجاهل أهمية decleration DOCTYPE في وثائقنا، وتحديد DOCTYPE الحق، عادة ما يكون الجواب على القضايا متصفح معظم الصليب.

1 تعليق | العلامات: ، ، ، ، | نشر في المراوغات متصفح ، HTML

2008 4 أكتوبر 2008

تختفي HTML / DIV العناصر في Internet Explorer [أي]

كما جرت العادة، واحدة من بعض المشاكل الكثيرة غريب مع شركة آي إي، وهذا واحد لا بد صفوف في العلوية 10 من المراوغات IE.

بيان المشكلة (وهذا كان مشكلة لي، ربما لديك misbehaviors مشابهة):
لدي كثير من DIV في الصفحة مع فئة "sectionhead"، التي ليست سوى عنوان المقطع على الصفحة. لذلك لدي بعض نمط يبحث مثل هذا

. sectionhead {حجم الخط: 18px؛ خلفية: # cfcfcf؛ الحشو: 5PX؛}

وDIV هو شريط رمادي فاتح مع بعض النص الأسود. ما يحدث في IE هو يتم عرض بعض من هذه الرؤوس قسم موافق، ولكن بعضها غير مرئي، وحتى، التمرير الصفحة، أو انقر شيء على الصفحة وما إلى ذلك في وقت ما أنها تميل إلى أن تختفي عند النقر على "بديل" المفتاح عند أسفل الصفحة أو التمرير مع شريط التمرير. ويبدو انهم في بعض الأحيان، ليعاود الظهور عند تحميل (F5) في الصفحة. أنا قصير 1 DIV بسيط تماما مع بعض أسلوب بسيط يتصرف الكريهة.
ما الذي يمكن أن يسبب مثل هذا سلوك خاطئ؟ حسنا! بصراحة، ليس لدي أي فكرة!

ممكن الحل:
مرة أخرى لا تسألني لماذا، ولكن في كثير من الحالات هذه المشكلة يميل إلى أن تختفي عند إضافة موقف: نسبة إلى سوء تصرف عناصر النمط، مثل هذا

. sectionhead {حجم الخط: 18px؛ خلفية: # cfcfcf؛ الحشو: 5PX؛ الموقف: النسبية}

غريب ولكن ماذا أقول؟ بارك الله لي من شركة آي إي!

وتفعل مشاركتها مع الولايات المتحدة، إذا كان لديك مشاكل مشابهة.

لا توجد تعليقات | العلامات: ، ، ، | نشر في المراوغات متصفح ، CSS ، HTML

2008 3 أكتوبر 2008

، وخفيفة الوزن بسيط، صندوق الصور عبر متصفح لصفحة الويب الخاصة بك

ليس هناك سوى عدد قليل من العلبة الخفيفة والتي يمكنك أن تجد عند البحث. وكانت هذه المسألة مع معظم lightboxes التي وجدت أنها بدت جميع لاستخدام واحد أو الآخر JAVASCRIPT الوزن الثقيل مثل أطر النموذج، مسج، MOOTOOLS ويحب. انهم جميعا بارد وفاخر تبحث. ولكن إذا كان الشرط الخاص بك هو "لكني أريد ان SCRIPT الاليكتروني بسيط وخفيف الوزن لموقعي"، ثم هنا هو؛

بعض ملامح لطيفة من هذه العلبة الخفيفة

  1. خفيف جدا
    أ. 4KB من مخطوطات عندما معبأة (8 كيلوبايت مفتوح)
    ب. 2 ك من CSS
    ج. بعض أسطر HTML للحاوية الاليكتروني
  2. بسيطة لفهم وتنفيذ
  3. يمكن أن يكون Lightboxes متعددة على نفس الصفحة.
  4. يتم استخدام الحاويات الاليكتروني نفسه لإظهار، والمحتوى المختلفة (والتي يتم تضمينها على حدة الانقسامات كما المخفية في الصفحة)، وهذا يتوقف على الرابط / الخيار الذي يتم النقر.
  5. مراكز نفسه تلقائيا، مع الأخذ في الاعتبار جميع العوامل مثل ارتفاع النافذة والعرض (دقة الشاشة)، مبلغ صفحة التمرير وارتفاع محتويات العلبة الخفيفة
  6. اختبرت في آي إي 7 و FF

عرض تجريبي |
تحميل الكود المصدر الاليكتروني (التحميل 1792 مرات)

باستخدام صندوق الصور [الملفات في ملف مضغوط]

jo.js، jo_pack.js [نسخة معبأة]: - مجموعة بسيطة من الأشياء جافا سكريبت [JO]، الذي يحتوي على العنصر، نافذة ومخطوطات وثيقة لتحديد المواقع. يمكنك فتح JO.JS إذا كنت ترغب في الحصول على أيديكم القذرة مع بعض Javascripting متقدمة، وخلق وظائف مجردة، وتمتد خصائص العناصر وتلك. إذا كنت لا أكثر من اللازم في Javascripting، تترك وحدها.

lightbox.js، lightbox_pack.js [نسخة معبأة]: - تحتوي على ضوء النصوص مدير مربع. إذا كنت مصمم الصفحة، ومسؤول أيضا مع تنفيذ صندوق الضوء على الصفحة، تحتاج إلى فهم LightBoxManager. LightBoxManager يحتوي أساسا مجرد وظيفتين showLightBox وcloseLightBox.

lightbox.css: - إذا كنت تعرف CSS، يمكن أن تقوم به في جميع أنحاء مع lightbox.css إلى تخصيص مظهر-N-يشعر lightbox.css

index.html و: تنفيذ عينة من صندوق الضوء مع اثنين من محتوى مختلف

lb_underlay_bkg.png: - وهذا هو الضوء / سيمي صورة شفافة يستخدم الخلفية لبطانة صندوق الصور [البطانة هي طبقة تحت lighbox، والذي يمنع المستخدم من النقر على أي كيان آخر في الصفحة، في حين أن العلبة الخفيفة مفتوحة]. يمكنك استخدام أي صورة أو حتى بلون واحد لهذا الغرض، وهذا يتوقف على تصميم صفحة ومتطلبات.

icon_lb_close.gif: - صورة عن وثيقة مقبض العلبة الخفيفة على اليمين أعلى مربع الضوء. ويمكن استخدام أي صورة وفقا للتصميم

عرض تجريبي |
تحميل الكود المصدر الاليكتروني (التحميل 1792 مرات)

واسمحوا لنا أن تعليقاتك وملاحظاتك ...

لا توجد تعليقات | العلامات: ، | نشر في CSS ، التحميل ، HTML ، JavasScript ، مكونات واجهة المستخدم

2008 4 سبتمبر 2008

كتل صفحة ثابتة (ويبقى ثابت على نافذة التمرير) باستخدام CSS فقط

وهذا قد يكون آخر مثال جيد لعبارة "الجدة التدريس لامتصاص البيض" ... هذا هو السبب الأساسي فقط CSS السخافات. لكن بالنسبة لأولئك، مثل لي غافل، وهذا قد يكون نعمة مقنعة. كنت أعتقد دائما (أنا يمكن أن يفقد وظيفتي لقوله هذا)، كان من الممكن الوحيد للحفاظ على جزء من محتوى صفحة HTML ثابتة (معنى، وموقفه لا يزال كما هو في تمرير النافذة)، وذلك باستخدام بعض النصوص الذكية، وتفعل كل تلك العلمية الحسابات لإيجاد موقف ديناميكي، محاصرة الأحداث وتحديد مهلة Window.scroll الخ

لم أفكر يمكن أن بسيطة مثل هذا .... هنا في أقل من المغلق / HTML، ولدي أربع كتل جامدة، واحدة ثابتة على كل extrimities من الصفحة، أعلى، يمين، أسفل وإلى اليسار ... وغني عن القول ... يمكنك اختيار أي واحد أو أكثر إذا اقتضى الأمر ...

CSS
. ثابت {العرض: كتلة؛ Z-الفهرس: 10؛ اللون: # FFFFFF؛ تجاوز-X: خفي؛ تجاوز ص: خفية؛ الموقف: ixed؛
}
محتويات # {هامش: 100px 150px 160px 0px؛ الحدود: 1px الصلبة # e6e6e6}

# لف-T {الأعلى: 0px؛ خلفية: # 33CC66؛ العرض: 100٪؛ الطول: 55px؛}

# الختامية ل {الأعلى: 80px؛ خلفية: # FF9966؛ الطول: 300px؛ العرض: 150px؛ الحدود: 2px الصلبة # e6e6e6؛}

# الختامية ب {أسفل: 0px؛ خلفية: # 3333CC؛ العرض: 100٪؛ الطول: 55px؛}

# لف-R {الأعلى: 80px؛ الخلفية: # 6666FF؛ الطول: 300px؛ العرض: 140px؛ الحدود: 2px الصلبة # e6e6e6؛ حق: 0؛}

HTML
id="contents"> <div أنت محتويات الصفحة الرئيسية </ div> المصدر:
<div id="wrap-b" class="static">
ثابت المحتوى في أسفل الصفحة
</ div> المصدر:
<div id="wrap-t" class="static">
ثابت المحتوى على أعلى الصفحة
</ div> المصدر:

<div id="wrap-l" class="static">
غادر محتوى ثابت في الصفحة
</ div> المصدر:
<div id="wrap-r" class="static">
ثابت المحتوى على حق الصفحة
</ div> المصدر:

عرض عينة wroking هنا

لا توجد تعليقات | العلامات: | نشر في CSS ، HTML

2008 2 سبتمبر 2008

CSS الإختراق: جافا سكريبت، المغلق، أتش تي أم أل لفايرفوكس فقط

كثير من الأوقات نشعر بالحاجة إلى الكتابة الخارقة المتصفح specfic (رغم أنها ليست ممارسة جيدة، ونحن المطورين واجهة المستخدم تضطر الى اللجوء الى هذه الشرور حتى حروب المتصفحات الكبيرة تأتي الى هدنة). في وقت سابق، وكنت قد ذكرت في هذه المقالة للحصول على الكيانات المستقلة الخاصة بك فقط ، وكيفية كتابة قصاصة CSS التي من شأنها أن تكون واضحة للمتصفحات IE <IE7 فقط.

أمس، كان لي قضية، حيث أردت أن أكتب بعض محددة فايرفوكس CSS قصاصات. حسنا! ولست متأكدا إذا كان هناك رمز المغلق لهذا ولكن هناك HTML. ثمة الصيد الرغم من ذلك، هذه القطعة من التحقق من صحة HTML لا يتلقى تمريرة HTML. ولكن، anywaz! إذا كنت عالقة سيئة أو على هذا النحو، ليس لديهم فيما يتعلق مقابل التحقق من الصحة (في وقت ما لدينا لتكون قاسية)، يمكنك استخدام التالية لاعلان وصلة لأنماط فرنك فرنسي فقط، أو حتى مجرد رمز المغلق ضمن هذه المجموعة. الشفرة

ضع <comment> فايرفوكس فقط HTML / CSS / مخطوطات هنا </ تعليق>

على سبيل المثال
<comment>
<style>
الأنماط * / * لفقط FF /
fieldset {الحدود: 1px # dddddd الصلبة؛}
</ النمط>
</ تعليق>

أنا "انا سعيد لحظة ...

لا توجد تعليقات | العلامات: ، ، | نشر في المراوغات متصفح ، CSS ، HTML ، JavasScript

2008 15 مارس 2008

اختر مربعات مزعجة وضوحا من خلال التقسيمات قافزة

في مناسبات عدة، في حين تقوم تخطيطات الصفحات مع الانقسامات المنبثقة / lightboxes / نصائح الخ ونحن يأتي عبر الحالات التي يكون فيها بعض الكائنات نموذج SELECT يحدث أن تكون في إطار هذه الانقسامات POPUP، حسب التصميم وهذا يظهر من خلال .... يوك!

حسنا! هل يمكن بسهولة تحديد هذا عن طريق تعديل الخاص Z-INDEX القيم بشكل ملائم لFF و IE7. لكن جيد قديم (يقصد التورية) IE6 لا تتصرف على النحو المنشود .... وتظهر من خلال BOX SELECT، حتى بعد تطبيق بعض ارتفاع كبير Z-INDEX القيم إلى قسم الخاص قافزة ...! المشكله!

لا توجد حلول لهذه المشكلة، ولكن هناك، في اعتقادي، أكثر من وسيلة قليلة لعمل حول هذه المشكلة، ولكن هنا ايم ان اقول لكم أبسط الحلول التي استخدمها، والذي يعمل بشكل جيد بالنسبة لي، في معظم الحالات ....

"إخفاء مربع SELECT ROUGE عند إظهار POPUP"

ببساطة قصاصة في السيناريو الخاص بك حيث كنت تظهر المنبثقة الخاص، إضافة إلى قطعة من سيناريو لتحديد الرؤية للصندوق SELECT إلى "المخفية"

document.getElementById ('my_select') style.visibilty = "الخفية".

وتذكر باعادته الى الوراء في ختام القسم الخاص قافزة

. document.getElementById ('my_select') style.visibilty = "مرئي"؛

حيث "my_select" هو معرف من صندوق تهيج SELECT

ويساعد هذا الأمل ...

PS. هناك خيارات أخرى مثل فكورسي positionining حيوي IFRAME (بنفس الحجم كما كنت قافزة) تحت DIV قافزة ... وهذا يعمل بشكل جيد جدا، ولكن مع إضافة الكثير من عناصر DOM، ومخطوطات، وصداع. ولقد استخدم هذا الحل أيضا، وإذا كنت لا تحتاج الى أي مساعدة مع هذا الخيار، لا اسمحوا لي أن أعرف. سوف نكون سعداء للمساعدة!

لا توجد تعليقات | العلامات: ، ، ، ، | نشر في المراوغات متصفح ، CSS ، HTML ، JavasScript

NDK الرئيسية | معربا عن تكنولوجيا المعلومات | الحنك تعرب | Penmenship تعرب | الرهبة تعرب | تعرب عن نفسي