ラジオボタンとテキストがインラインであるため、そのテキストはラジオボタンの下に自分自身を合わせますが、テキストは、ラジオボタンの下にわずかにあるように見えます。
あなたはこれらの上に整列するには、div要素またはスパンのような別の容器に、ラジオやテキストを配置する必要があります（必要に応じて）、彼らは整列の世話をします。 それはあなたのデザインを簡単に、あまりにも、表のセルを使用する方が簡単だろう、それを可能にします。
これは、すべてのブラウザが若干異なる無線が表示されますので、あらゆるブラウザで同じように見えないので、いつもあなたが何をすべきかに関係なくサイズの問題がないようになるだろう。
HTML5はまだドラフトです。 私が書くように、2004年に開始したHTML 5の作業はまだ間の共同の努力で形 を与えられているW3C HTML WGとWHATWG 。 ワードは次の世代HTMLは機能強化や機能、ような新しい構造とセマンティクス、フォームコントロール、APIは、マルチメディア·タグなどを持っているということです。
簡単な英語で...それは私たちに、UI開発者が何を意味するのだろう...
<BODY> <HEADER> ... </ヘッダ> <nav> ... </ NAV> <article> の<section> ... </ 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>
例えば、
<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"> </オーディオ>
新しいバージョンにもっと多くの変更/アップグレードがあります...私が何か面白い有用なものaccrossに来るようにこの記事を更新し続けます。.... このスペースを見る
HTML 5仕様は開発に積極的にまだあるので、このドキュメントでは、正確な情報を提供することはできません。 疑問がある場合は、必ず確認してここにHTML 5の仕様を 。
このものを古い学校が、それは私の記憶のサプリメントですいつものように...
したがって、= "true"を、無効= "false"を同じ無効になっていますか？
......まあ、信じてはいけない！ それは...ここの方法はいくつかの簡単な説明であるthatsの...
"無効"フォーム要素/フィールドのいずれかの属性であるため、その性質により、任意の値を受け入れることができます。
この属性が存在する限り、同様に、要素はその値に関係なく無効になります。 例のために。
<input type="text" value="Thisです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">上記のすべては、このフォームフィールドに "DISABLED"になります。
単に属性 "DISABLEDは、"フィールド "エーブル"を維持...以下のように提供していない
<input type="text" value="Thisは/> disabled"はありません
覚えている"disabled属性の任意の値（またはまったく値）を、ブラウザはそれが無効になってレンダリングされます 。" 私たちの心のW3Cで物事を明確に維持するためには、私たちがこのような状況で無効になって= "無効"を使用することをお勧めします。
これはJavaScriptでこの属性を使用する場合でも違いは...
document.form.element.disabled = TRUE; / /要素は無効化されます
document.form.element.disabled = falseは、/ /要素が有効になります
上記の引数は、これらの属性および要素にも当てはまります。
あなたは、CSSの方であれば、クロスブラウザの作業、レイアウトを得ることに痛みを知っているだろう。 IE8はまだ私達の開発のための作品内の別のスパナです。 Anywaz！ 私はあなたの完璧な作業IE7のCSS（およびそれ以前）とFirefoxが突然IE8でかんしゃくを投げ始めた昨日、行ったようにあなたは、この問題にヒットした場合、次を試してみてください...それは素敵な瞬間のための私の問題を解決するように見えた....
META宣言を使用して、我々はIE8を使用したいレンダリングエンジンを指定することができます。 ので、IE8はIE7のようにレンダリングするために強制的に...あなたの文書の頭に次のメタタグを挿入します -<meta http-equiv="X-UA-Compatible" content="IE=7" />
デフォルトでは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は何ですか？ BROWSERの癖＆STRICTモードは何ですか？
XSLにDOCTYPEを設定する
DOCTYPES約深さを理解する上で詳細については、これらのリンクを訪問してみてください...
List Apartの：右DOCTYPEを使用してサイトを修正！
別にリスト：DOCTYPEを越えて：Web標準、前方互換性、およびIE8
注：しかし私たちの多くはHTML / CSSの人が右のDOCTYPEを設定すると、私たちの文書にDOCTYPE declerationの重要性を無視されているが、通常、ほとんどのクロスブラウザの問題への答えです。
いつものように、IEとこの1つはIE癖のトップ10にランクなければならない多くの奇妙な問題の一つ。
問題文（これは私の問題だった、多分あなたは同じような不正動作があります）：
私は多くのDIVは、ページ上のセクションの何もタイトルはありませんクラス "sectionhead"のページである必要があります。 だから私はこのようないくつかのスタイルを探しています
。sectionhead {フォントサイズ：18pxの;背景：＃cfcfcf;パディング：5pxの;}
divは、いくつかの黒のテキストとライトグレーのバーです。 何がIEで発生するこれらのセクションヘッダーの一部が[OK]表示されますが、、、ページをスクロールしたりするときに、ページの下には "ALT"キーをクリックしたときにいつかは消える傾向にあるなどのページで何かをクリックするまで、いくつかは、見えないされていまたはスクロールバーでスクロールします。 彼らは時々あなたが（F5）ページをリロードしたときに再度表示されているようだ。 私はいくつかのシンプルなスタイルと短い完全にシンプルなDIVはBADに動作します。
何がそのような不安定な動作を引き起こすだろうか？ よく！ 率直に言って、NO IDEA！
可能な解決策：
再び私に理由を尋ねるが、多くのインスタンスでこの問題はポジション追加したときに消滅する傾向がありません。このように、要素のスタイルを動作MISに相対的に
。sectionhead {フォントサイズ：18pxの;背景：＃cfcfcf;パディング：5pxの。位置：相対}
不気味ですが何を言うの？ 神はIEから私を祝福！
と似たような問題を抱えていた場合、米国と共有して。
わずかライトのときには、Googleを見つけることができ、それは存在しないこと。 私が見つけた物のほとんどの問題は、それらが皆、1つまたはjQuery、プロトタイプ、MooToolsのと同類のような他の重量のJavaScriptフレームワークを使用するように見えたということでした。 彼らはすべてのクールで見てしゃれています。 しかし、あなたの要件である" しかし、私は私のサイトの場合は単純で軽量なライトボックスのスクリプトを使用したい "場合は、ここにある。
このライトボックスの気の利いた機能
デモを見る |
ライトボックスのダウンロードソースの郵便番号（1804回ダウンロードされる）
jo.js、jo_pack.js [パックバージョン]： -要素は、ウィンドウやドキュメントの位置決めスクリプトを含むJavaScriptオブジェクトの単純なセット[JO]、。 あなたには、いくつかの高度なJavascriptingを持つ手が汚れて取得したいのであれば、抽象的な機能は、拡張要素のプロパティなどを作成し、JO.JSを開くことができます。 Javascriptingであなたはあまりされていない場合は、単独でそれを残す。
lightbox.js、lightbox_pack.js [パックバージョン]： -ライトボックスマネージャのスクリプトが含まれています。 ページ上でライトを実装するのにも責任を負いページデザイナーである場合、あなたはLightBoxManagerを理解する必要があります。 LightBoxManagerは基本的には2つの関数showLightBoxとcloseLightBoxが含まれています。
lightbox.css： -あなたがCSSを知っていれば、あなたはルック·アンド·フィールlightbox.cssをカスタマイズするには、lightbox.cssで遊ぶことができ
index.htmlの 2つの異なるコンテンツを持つ物のサンプル実装
lb_underlay_bkg.png： - [建築が開いている間は、アンダーレイは、ページ上の他のエンティティをクリックしてからユーザーを防ぐことができlighbox、下の層である]これは、ライトの下敷きの背景を使用されているシミ/光透明なイメージです。 ページのデザインと要件に応じて、さらに任意のイメージまたはこの目的のためにソリッドカラーを使用することができます。
icon_lb_close.gif： -ライトボックスの右上のcloseライトハンドルのイメージ。 デザインごとに、任意の画像を使用することができます
デモを見る |
ライトボックスのダウンロードソースの郵便番号（1804回ダウンロードされる）
私たちはあなたのコメントやフィードバックを持たせてください...
このポストは "卵を吸うために教育おばあちゃん"というフレーズの良い例かもしれない...これは単なる基本的なCSSの原料である原因。 しかし、これらのために、気づかない私のように、これは不幸中の幸いかもしれません。 私はいつも（私はこれを言うための私の仕事を失う可能性があります）、それは静的なHTMLページのコンテンツの一部を維持するためにのみ可能だと思ったすべてのこれらの科学を行う、いくつかのスマートなスクリプトを使用して、（つまり、その位置など、ウィンドウのスクロールに、ISのまま）計算はWindow.scrollイベントをトラップし、タイムアウトなどを設定し、動的な位置を見つけるために
それはこのような単純なことができるとは思わなかった.... ここで、以下のCSS / HTMLで、私は4つの静的ブロック、ページの各extrimitiesに固定し1、上、右、下と左の...不必要な言うことを持っている...ことを必要とする場合には、いずれか1つ以上を選択することができます...
CSS
静的{表示：ブロック;のz-index：10;色：＃000000;オーバーフロー×：隠された;オーバーフロー-Y：隠された;位置：ixed。
}
＃内容{マージン：100pxに875 0px 160px;国境：1px固体＃e6e6e6}＃ラップT {トップ：0px;背景：＃33CC66;幅：100％;高さ：55ピクセル;}
＃ラップ-L {トップ：80px;背景：＃FF9966;高さ：300pxの、幅：875、国境：固体＃e6e6e6 2PX;}
＃ラップは、-b {下：0px;背景：＃3333CC;幅：100％;高さ：55ピクセル;}
＃ラップ-R {トップ：80px;背景：＃6666FF;高さ：300pxの、幅：140px;ボーダー：＃e6e6e6固体2PX、右：0;}
HTML
<divのid="contents">あなたのメインページの内容</ 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>
何度も我々には、ブラウザspecficハックを（それが良い習慣ではありませんが、我々のUI開発者は、戦争が休戦になる偉大なブラウザになるまでそのような弊害に頼らなければならない）記述する必要を感じています。 以前、私はこの資料に記載していただけにIEの方法のみ<IE7 IEブラウザに表示されるであろうCSSのスニペットを書き込むには、。
昨日、私はいくつかのFirefox固有のCSSのスニペットを書きたかったケースを持っていた。 よく！ 私はこのためのCSSコードがあるかどうか分かりませんが、HTMLがある。 もののキャッチありますが 、HTML鞭のこの部分は、HTMLの検証を渡します。 しかし、anywaz！ あなたがひどく、またはのようなスタックされている場合は、検証のための無よろしく（いつか私たちは残酷なことする必要があります）がありません、あなたはFFのみスタイルシートへのリンクを宣言するには、次を使用するかだけでも、このブロック内のCSSをコーディングすることができます。 コードは
<COMMENT>ここにFirefoxのみHTML / CSS /スクリプトを入れて</コメント>
例えば、
<COMMENT>
<STYLE>
/ * FFのスタイルのみ* /
fieldset要素{国境：1px固体＃DDDDDD;}
</ STYLE>
</コメント>
私は "一瞬メートル幸せ...
いくつかの場面で、ポップアップ部門/ライト/ヒントを使用してページレイアウトをしている間は、我々が何らかの形でSELECTオブジェクトが設計することにより、これらのPOPUP部門の下にあることを起こる、それが透けて状況に遭遇formula要素.... YUK！
よく！ 簡単にFFとIE7のために適切にZ-INDEX値を調整することによってこの問題を解決可能性があります。 しかし、グッド·オールド（しゃれ）IE6は意図したとおりに動作しません.... でも、あなたはポップアップ部にいくつかの大幅な高Z-INDEX値を適用した後、SELECT BOXショーを通じ、...がっかり！！
この問題に対する修正はありませんが、ありますが、私は信じて、この問題を回避するには、いくつかの方法よりも、しかし、のほとんどで、私のため正常に動作している、あなたに私が使用する最も簡単な解決策を教えてここでイム例....
"あなたがPOPUPを表示するときROUGE選択ボックスを隠す "
単にあなたのスクリプトのスニペットで、あなたのポップアップを表示する場合には、 "hidden"にSELECTボックスの可視性を設定するスクリプトの一部を追加する
のdocument.getElementById（ 'my_select'）style.visibilty = "隠された";
そして、あなたのポップアップ部門のCLOSEにそれをセットバックすることを忘れないでください
のdocument.getElementById（ 'my_select'）style.visibilty = "見える化"。
"my_select"は刺激選択ボックスのIDです。
この情報がお役に立てば幸いです...
PS。 動的にポップアップDIVの下にIFRAME（あなたポップアップと同じサイズ）をpositioniningようにofcourseの他のオプションがあります...これはあまりにも動作しますが、DOMエレメント、スクリプトや頭痛の負荷を加えた。 私もこのソリューションを使用して、あなたがこのオプションを使用して任意の助けを必要とするならば、私に知らせてください。 助けて喜んでいるでしょう！
