プログラミング css

17

Bootstrap 3のモーダル機能を使用して、YouTubeビデオを表示しようとしています。動作しますが、YouTube動画のボタンをクリックできません。これについて何か助けがありますか？これが私のコードです： <div id="link">My video</div> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script> $('#link').click(function () { …

157 jquery css twitter-bootstrap youtube twitter-bootstrap-3

6

font-awesomeアイコン付きのカスタムliリストスタイル

font-awesome（または他のアイコンフォント）クラスを使用してカスタムを作成することが可能かどうか疑問に思っています <li>リストスタイルタイプですか？私は現在、これを行うためにjQueryを使用しています。つまり、 $("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>"); ただし、これは適切にスタイル設定されません <li>アイコンが実際の行頭文字ではなくテキストの一部であると見なされるためテキストがページ全体に回り込む。任意のヒント？

156 css html-lists font-awesome

5

フレックスボックスがアスペクト比を維持するのではなく、なぜ画像を引き伸ばすのですか？

Flexboxには、画像を本来の高さに伸ばすという動作があります。つまり、子画像を含むflexboxコンテナがあり、その画像の幅をサイズ変更すると、高さがまったくサイズ変更されず、画像が引き伸ばされます。 div { display: flex; flex-wrap: wrap; } img{ width: 50% } <div> <img src="https://loremflickr.com/400/300" > <h4>Appify</h4> <p> some text </p> </div> コードスニペットを実行する結果を非表示スニペットを展開何が原因ですか？このCodePenを追加して、私の意味を説明しました。

156 html css flexbox

16

css：テキストを中央にして円を描く方法は？

私はこの例をstackoverflowで見つけました： CSSのみを使用して円を描くそれは素晴らしいです。しかし、円の中央にテキストを含めることができるようにその例を変更する方法を知りたいですか？私はこれも見つけました： CSSで円のテキストを垂直方向と水平方向に中央揃えにします（iPhone通知バッジのように）しかし、何らかの理由で、それは私にとってはうまくいきません。次のテストコードを作成すると、 <div class="badge">1</div> 円ではなく楕円形になります。私はコードをいじって、どのように機能させるかを確認しようとしています。

155 css css-shapes

9

相対位置と絶対位置

違いは何であるposition: relativeとposition: absoluteCSSでは？そして、あなたはどちらを使うべきですか？

155 css

12

IEの代替のcss 'pointer-events'プロパティ

ドロップダウンナビゲーションメニューがあり、クリックすると他のページに移動できないタイトルがあります（これらのタイトルをクリックするとドロップダウンメニューが開きます）一方で、他のナビゲーション（これらにはドロップダウンがなく、直接移動する必要があります）です。ただし、両方とも型がhref定義されていますこれを解決するために、以前のタイプのタイトルに次のcssを追加しました pointer-events: none; 正常に動作していますが、このプロパティはIEでサポートされていないため、いくつかの回避策を探しています。面倒なのは、HTMLとJavaScriptのコードを完全に変更するためのアクセス権と特権がないことです。何か案は？

155 html css internet-explorer browser cross-browser

16

-webkit-transformを使用すると、固定位置が機能しない

-webkit-transform（および-moz-transform / -o-transform）を使用してdivを回転させています。また、divがユーザーと共にスクロールダウンするように、位置が固定されています。 Firefoxでは正常に動作しますが、Webkitベースのブラウザでは機能しません。-webkit-transformを使用すると、固定位置が機能しなくなります。そんなことがあるものか？

155 html css positioning rotation

12

<head>または<body>内にcssファイルを置いた場合の違いは何ですか？

通常cssファイルはに入れられますが、中<head></head>に入れたらどう<body></body>なりますか？

155 html css

9

CSS：アニメーションと遷移

そのため、CSS3トランジションとアニメーションの両方を実行する方法を理解しています。はっきりしないのは、私がググってみましたが、いつどれを使用するかです。たとえば、ボールをバウンドさせたい場合は、アニメーションが最適です。キーフレームを提供すると、ブラウザが中間フレームを実行し、素晴らしいアニメーションが作成されます。ただし、いずれの方法でも上記の効果が得られる場合があります。シンプルで一般的な例は、Facebookスタイルのスライド式ドロワーメニューを実装することです。この効果は、次のような遷移によって実現できます。 .sf-page { -webkit-transition: -webkit-transform .2s ease-out; } .sf-page.out { -webkit-transform: translateX(240px); } http://jsfiddle.net/NwEGz/ または、次のようなアニメーションを通じて： .sf-page { -webkit-animation-duration: .4s; -webkit-transition-timing-function: ease-out; } .sf-page.in { -webkit-animation-name: sf-slidein; -webkit-transform: translate3d(0, 0, 0); } .sf-page.out { -webkit-animation-name: sf-slideout; -webkit-transform: translateX(240px); } @-webkit-keyframes sf-slideout { from { -webkit-transform: translate3d(0, 0, 0); …

155 css css-transitions css-animations

2

親にカーソルを合わせたときに子要素にスタイルを設定する

親要素にホバーがあるときに子要素のスタイルを変更する方法。可能であれば、これにはCSSソリューションを使用します。：hover CSSセレクターを通じて可能な解決策はありますか？実際に、パネルにホバーがあるとき、パネル内のオプションバーの色を変更する必要があります。すべての主要なブラウザをサポートしようとしています。

155 css css-selectors

14

CSS：ウィンドウの幅の50％である背景色を設定します

「2つに分割」されているページの背景を取得しようとしています。反対側の2つの色（タグにデフォルトbackground-colorを設定しbody、次にdivウィンドウの幅全体を拡大するに別の色を適用することによって行われるようです）。私は解決策を考え出しましたが、残念ながらbackground-sizeこのプロジェクトはこのプロジェクトに必須のIE7 / 8では機能しません- body { background: #fff; } #wrapper { background: url(1px.png) repeat-y; background-size: 50% auto; width: 100%; } 単色についてだけなので、通常のbackground-colorプロパティのみを使用する方法はありますか？

155 css background-color

17

ブートストラップ3の入力幅

もう一度更新します。質問を本当に理解せずに人々が回答を追加できないように、上の回答を選択してこの質問を閉じます。実際には、グリッドを使用したり、CSSを追加したりせずに、組み込み機能でそれを行う方法はありません。help-blockたとえば、短い入力を超える必要がある要素を処理している場合、グリッドはうまく機能しませんが、それらは「組み込み」です。それが問題である場合は、BS3のディスカッションで見つけることができる追加のCSSクラスを使用することをお勧めします。BS4がリリースされたので、付属のサイジングスタイルを使用してこれを管理することができるので、これはそれほど長くは関係ありません。この人気のあるSO質問への良い入力に感謝します。更新：この質問は、グリッドに頼らずに入力幅を管理するBSの組み込み機能に関するものであるため、未解決のままです（場合によっては、個別に管理する必要があります）。これを管理するためにすでにカスタムクラスを使用しているため、これは基本的なCSSのハウツーではありません。タスクはBS 機能のディスカッションリストにあり、まだ対処されていません。元の質問： BS 3で入力幅を管理する方法を誰かが理解していますか？現在、その機能を追加するためにいくつかのカスタムクラスを使用していますが、ドキュメントに記載されていないオプションの一部を見逃している可能性があります。現在のドキュメントでは.col-lg-xを使用するように言われていますが、コンテナーdivにしか適用できないため、レイアウト/フロートのあらゆる種類の問題が発生するため、明らかに機能しません。ここにフィドルがあります。奇妙なことに、フィドルではフォームグループのサイズを変更することさえできません。 http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control"> </div> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

154 css twitter-bootstrap twitter-bootstrap-3

5

CSSのtextareaの行とcols属性

私は設定したいtextareaのrowsとcolsCSSを経由して属性を。 CSSでこれを行うにはどうすればよいですか？

154 css styling

14

JavaScriptでCSSをどのように追加しますか？

strong { color: red }JavaScriptを使用してCSSルール（など）を追加するにはどうすればよいですか？

154 javascript css

5

2つの<div>をどのようにオーバーラップさせますか？

次のようにするには、2つのdivが必要です。 | | ---| LOGO |------------------------ | |_______________| LINKS | | CONTENT | それらをきれいにオーバーラップさせる最も美しい/最もエレガントな方法は何ですか？ロゴの高さと幅は固定され、ページの上端に触れます。

154 css html overlap

タグ付けされた質問 「css」

タグ付けされた質問「css」