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

私は次のように機能するはずのネストされたフレックスボックスレイアウトに取り組んでいます。 最も外側のレベル（ul#main）は水平方向のリストであり、さらに項目が追加されると、右側に展開する必要があります。大きくなりすぎる場合は、水平スクロールバーが必要です。 #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } このリストの各項目（ul#main > li）には、ヘッダー（ul#main > li > h2）と内部リスト（ul#main > li > ul.tasks）があります。この内部リストは垂直であり、必要に応じて列に折り返す必要があります。より多くの列に折り返す場合、より多くのアイテムのためのスペースを作るために、その幅を増やす必要があります。この幅の増加は、外側のリストの包含アイテムにも適用されます。 .tasks { flex-direction: column; flex-wrap: wrap; /* ...and more... */ } 私の問題は、ウィンドウの高さが小さくなりすぎても、内部リストが折り返されないことです。私はすべてのflexプロパティを何度も改ざんし、CSS-Tricksのガイドラインに細心の注意を払って試みましたが、うまくいきませんでした。 このJSFiddleは、これまでのところを示しています。 期待される結果 （私が欲しいもの）： 実際の結果 （私が得るもの）： 古い結果 （2015年に取得したもの）： 更新 いくつかの調査の後、これはより大きな問題のように見え始めています。主要なブラウザはすべて同じように動作し、フレックスボックスのデザインがネストされていることとは関係ありません。さらにシンプルなフレックスボックスの列レイアウトでは、アイテムが折り返されるときにリストの幅を増やすことを拒否します。 この他のJSFiddleは問題を明確に示しています。Chrome、Firefox、IE11の現在のバージョンでは、すべてのアイテムが正しく折り返されます。rowモードではリストの高さは増加しますが、モードでは幅は増加しませんcolumn。また、columnモードの高さを変更しても、要素の即時のリフローはまったくありませんが、rowモードにはあります。 …

167 html  css  flexbox 

Rails 3.1.rc5を使用して最初のソロRailsアプリを作成しているところです。私の問題は、サイトにさまざまなCSSファイルを条件付きでレンダリングさせたいことです。私はBlueprint CSSを使用しており、screen.cssほとんどのprint.css場合、印刷時とie.cssInternet Explorerからサイトにアクセスするときのみ、スプロケット/レールをレンダリングしようとしています。 残念ながら、マニフェストのデフォルトの*= require_treeコマンドにはapplication.css、assets/stylesheetsディレクトリ内のすべてが含まれているため、CSSが不快になってしまいます。私の現在の回避策は、すべてを個別に指定する一種のブルートフォースメソッドです。 application.css： *= require_self *= require home.css ... *= require blueprint/screen.css 私のスタイルシートの部分（haml）では： <!--[if lt IE 9] <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ![endif]--> = stylesheet_link_tag "application" = stylesheet_link_tag 'blueprint/print', media: 'print' <!--[if lt IE8]] = stylesheet_link_tag 'blueprint/ie' ![endif]--> = javascript_include_tag "application" これは機能しますが、特にきれいではありません。私はこれまでに数時間の検索を行ってきましたが、見逃した簡単な方法があることを願っています。特定のディレクトリを（サブディレクトリを含めずに）選択的にレンダリングすることさえできれば、プロセス全体の柔軟性が大幅に低下します。 ありがとう！

166 css  ruby-on-rails-3.1  asset-pipeline  sprockets 

開発をスピードアップするためにコンパスとサスを使い始めたいと思います。現時点では、MacにSassをインストールして、入力用のscssファイルと生成された出力用のcssファイルを監視するように指示しました。 多くの記事から、SassはCompassで使用されています。なぜそうなのか、そしてSassにないコンパスには何が追加されているのでしょうか。例を挙げることができれば、より良いです。 ありがとう

166 css  sass  compass-sass 

background-imageSVG <path>要素にを設定することは可能ですか？ たとえば、要素を設定した場合class="wall"、CSSスタイルは.wall {fill: red;}機能しますが、.wall{background-image: url(wall.jpg)}機能しません.wall {background-color: red;}。

166 html  css  image  svg  background-image 

（XHTML Strict）ページがあり、テキストの通常の段落と一緒に画像をフロートさせます。段落の代わりにリストを使用する場合を除いて、すべてうまくいきます。リストの箇条書きは、浮動画像に重なっています。 リストまたはリストアイテムの余白を変更しても効果はありません。マージンはページの左側から計算されますが、フロートはリストアイテムをページ内の右側にプッシュしliます。したがって、マージンは、イメージよりも広くした場合にのみ役立ちます。 画像の横にあるリストをフローティングにすることもできますが、リストがフロートの横にあるときはわかりません。これを修正するためだけにコンテンツのすべてのリストをフロートしたくありません。また、画像をリストの左ではなく右にフロートすると、左にフロートするとレイアウトがめちゃくちゃになります。 設定li { list-style-position: inside }により、箇条書きがコンテンツと一緒に移動しますが、上の行ではなく折り返される行が箇条書きに揃えられます。 この問題は明らかに、弾丸がボックスの外側にレンダリングされ、フロートがボックスのコンテンツを（ボックス自体ではなく）右に押しているために発生します。これがIEとFFがこの状況を処理する方法であり、私の知る限り、仕様によると問題ではありません。問題は、どうすればそれを防ぐことができるかということです。

166 html  css 

私のHTMLには、.required必須フィールドに割り当てられているというクラスがあります。 HTMLは次のとおりです。 <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div class="form-group required"><label class="col-md-2 …

166 css  forms  twitter-bootstrap-3  form-fields 

私のCSS： #content_right_head span { display:inline-block; width:180px; overflow:hidden !important; } 現在、コンテンツcontentを表示しています でもコンテンツのように見せたい ... コンテンツの後にドットを表示する必要があります。コンテンツはデータベースから動的に取得されます。

166 html  css 

を設定することで、divコンテナがページの高さ全体を占めるようにする方法を見つけましたmin-height: 100%;。ただし、ネストされたdivを追加してsetするとheight: 100%;、コンテナーの高さまで伸びません。それを修正する方法はありますか？ html, body { height: 100%; margin: 0; } #containment { min-height: 100%; background: pink; } #containment-shadow-left { height: 100%; background: aqua; } <div id="containment"> <div id="containment-shadow-left"> Hello World! </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

166 css  html 

HTMLをPNGのような画像にレンダリングする方法はありますか？canvasでそれが可能であることは知っていますが、たとえばdivのような標準のhtml要素をレンダリングしたいと思います。

166 javascript  html  css  image  render 

私は現在、html5およびjQuery for iPad Safariを使用してWebアプリを開発しています。大きなスクロール領域が原因で、画面の外にある要素が下にスクロールしたときに遅れて表示されるという問題が発生しています。 つまり、画面外にある画像（またはグラデーションのあるdiv）の行がある場合、下（または上）にスクロールすると、期待される動作は要素が画面に次のように表示されることです。私はそれにスクロールしています。 しかし、私が見ているのは、画面から指を離してスクローラーがすべてのアニメーションを完了するまで、要素が表示されないことです。 これは私にとって非常に顕著な問題を引き起こし、全体が不安定に見えますが、そうではありません。iPad Safariがメモリを節約するために何かしようとしているのだと思います。この途切れが起きないようにする方法はありますか？さらに、iPad Safariが実際に何をしようとしているのかを誰かに明かしていただければ幸いです。

165 css  ios  ipad  html  mobile-safari 

内のボディ要素の背景画像と色をどのように制御できiframeますか？埋め込まれたbody要素にはクラスがあり、これiframeは私のサイトの一部であるページです。 これが必要な理由は、サイトの本文に黒い背景が割り当てられており、テキストを含むdivに白い背景が割り当てられているためです。WYSIWYGエディターはiframe編集時にコンテンツを埋め込むためにを使用しますが、divが含まれていないため、テキストが非常に読みにくくなっています。 iframeエディターのwhen の本体には、他のどこでも使用されていないクラスがあるので、これがそこに置かれていると想定して、このような問題を解決できると思います。ただし、class.bodyスタイルを適用しても、ボディに適用されているスタイルは上書きされません。奇妙なことに、スタイルはFirebugに表示されるので、何が起こっているのかわかりません！ ありがとう 更新-私はボディのクラスであるクラスにスタイルを追加する@mikeqのソリューションを試しました。メインページのスタイルシートに追加すると機能しませんが、Firebugで追加すると機能します。これは、Firebugがページ上のすべての要素に適用されているのに対し、CSSはiframe内には適用されていないためと考えています。これは、JavaScriptでウィンドウをロードした後にcssを追加すると機能することを意味しますか？

165 css  iframe  styles  overriding 

幅広いブラウザで最小高さ100％の要素を作成する最良の方法は何ですか？ 特に、headerとfooterの固定のレイアウトがある場合height、 どのようにして、下部に固定された状態で、中間のコンテンツ部分100%をその間のスペースで埋めfooterますか？

164 html  css  xhtml 

標準のチェックボックスの代わりにしたいのですが、基本的には画像を使用し、ユーザーが画像をクリックするとフェードアウトしてチェックボックスをオーバーレイします。 本質的には、Recaptcha 2のように、特定の基準を満たす画像をクリックするようにしたいのですが。ここでRecaptchaのデモを見ることができますが、画像の選択とは対照的に、テキストの質問を解決できる場合があります。これがスクリーンショットです。 いずれかの画像（この場合は、ステーキの写真が含まれています）をクリックすると、クリックした画像のサイズが縮小され、青いチェックマークが表示され、チェックしたことを示します。 この正確な例を再現したいとしましょう。 私は9つの非表示のチェックボックスを持つことができることに気付き、画像をクリックすると非表示のチェックボックスが選択または選択解除されるようにjQueryをいくつかアタッチします。しかし、画像の縮小/目盛りのオーバーレイについてはどうですか？

164 javascript  jquery  css  html 

の外観を変更することは可能<input type="file">ですか？

164 html  css  file-upload  input 

私は次の要素を持っています： <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" > <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> モーダルダイアログは次のように表示されます。基本的に、スクロールバーが全体に表示され、表示しようとしているコンテンツが含まれてmodal-dialogいませんmodal-body。 画像は次のようになります。 スクロールバーmodal-bodyだけを取得するにはどうすればよいですか？ に割り当てようとstyle="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"しましたmodal-bodyが、うまくいきませんでした。

164 css  twitter-bootstrap