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

コンテナー領域の幅全体に収まるテキストボックスを作成するのに苦労しています。 <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"> <button type="submit" class="btn btn-lg">Search</button> </form> </div> </div> 上記を実行すると、予想どおり、2つのフォーム要素はインラインになりますが、せいぜい数列を超えないようにしてください。Firebugでcol-md-12divにカーソルを合わせると、予想される全幅を占めていることがわかります。埋められないように見えるのは、テキスト入力だけです。インラインの幅の値を追加してみましたが、何も変わりませんでした。これは簡単なはずですが、今は本当に馬鹿げているように感じます。 ここにフィドルがあります：http : //jsfiddle.net/52VtD/4119/embedded/result/ 編集： 選ばれた答えはあらゆる点で徹底的であり、素晴らしい助けです。それは私が最終的に使用したものです。しかし、私の最初の問題は、実際にはVisual Studio 2013内のデフォルトのMVC5テンプレートの問題だったと思います。これには、Site.cssに含まれていました。 input, select, textarea { max-width: 280px; } 明らかにそれがテキスト入力の適切な拡張を妨げていました...将来のASP.NETテンプレートユーザーへの公正な警告...

138 html  css  twitter-bootstrap-3 

ページに次のCSSルールがあるとします。 body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで使用された定義済みフォントの1つを検出するにはどうすればよいですか？ なぜこれをしたいのかと思っている人のために編集します：検出しているフォントには他のフォントでは使用できないグリフが含まれており、ユーザーがそのフォントを持っていない場合は、ユーザーにそのフォントをダウンロードするように求めるリンクを表示します私のWebアプリケーションを正しいフォントで使用できます。 現在、すべてのユーザーにダウンロードフォントリンクを表示しています。正しいフォントがインストールされていないユーザーにのみ表示したいと考えています。

138 javascript  html  css  fonts 

HTML 5のボイラープレートテンプレート（http://html5boilerplate.com/から）を見ていて、"?v=1"CSSおよびJavaScriptファイルを参照するときにURLでが使用されていることに気付きました。 "?v=1"リンクおよびスクリプトタグでCSSおよびJavaScript URLに追加するとどうなりますか？ すべてのJavascript URLに"?v=1"（以下のサンプルの例：）があるわけではありませんjs/modernizr-1.5.min.js。これが事実である理由はありますか？ 彼らのサンプルindex.html： <!-- CSS : implied media="all" --> <link rel="stylesheet" href="css/style.css?v=1"> <!-- For the less-enabled mobile browsers like Opera Mini --> <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/modernizr-1.5.min.js"></script> <!------ …

138 html  css  browser-cache 

テンプレートがあり、次のようなGoogleフォントへの参照があります。 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'> それをダウンロードして、常にオフラインで実行しているページで使用するように設定するにはどうすればよいですか？

138 css  fonts  offline  google-fonts 

私は新しく、一般的でないCSSユニットについて学びました。vhそしてvw、それぞれのビューポートの高さと幅の比率を測定します。 私はスタックオーバーフローからこの質問を見ましたが、ユニットがさらに似ているように見えました。 vwおよびvhユニットの仕組み 答えは具体的に言う vwとvhはそれぞれウィンドウの幅と高さのパーセンテージです。100vwは幅の100％、80vwは80％などです。 これ%は、より一般的なユニットとまったく同じように見えます。 開発者ツールで、値をvw / vhから％に、またはその逆に変更してみたところ、同じ結果が得られました。 2つの間に違いはありますか？そうでない場合、なぜこれらの新しいユニットが導入されたのCSS3ですか？

138 css  viewport-units 

これが私がHTML / CSSで達成しようとしていることです： 高さと幅の異なる画像がありますが、すべて180x235未満です。だから私がしたいのはdiv、borderとvertical-align: middleそのすべてを作成することです。私はそれを成功させましたが、今私は適切に全体をhrefリンクする方法に行き詰まっていますdiv。 これが私のコードです： <div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;"> <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;"> <img src="myimage.jpg" height="62" width="180"> </div> </div> ここでは簡単にコピーペーストできるように、スタイルコードはインラインです。 コードの上に別の親divを追加し、その中でhrefを実行できることをどこかで読みました。ただし、一部の調査によると、これは有効なコードではありません。 まとめると、div（#parentdivimage）全体がhrefリンクになる必要があります。

138 html  css 

いくつかのcssを入力要素に適用したいのですが、無効にせず、送信タイプではない入力にのみ適用したいのですが、以下のcssが機能していません。 input:not(disabled)not:[type="submit"]:focus{ box-shadow:0 0 2px 0 #0066FF; -webkit-box-shadow:0 0 4px 0 #66A3FF; }

138 css  css-selectors  pseudo-class 

最新documentionがあります。 <p class="mb-0">Lorem ipsum</p> コードスニペットを実行する結果を非表示スニペットを展開 Q：mb-0とは何ですか？

138 css  twitter-bootstrap  bootstrap-4  twitter-bootstrap-4 

「OS Xがダークモードかどうかを検出する方法」に似ていますが、ブラウザのみです。 ユーザーのシステムがSafari / Chrome / Firefoxの新しいOS Xダークモードかどうかを検出する方法があるかどうか誰かが見つけましたか？ 現在の操作モードに基づいて、サイトのデザインをダークモードフレンドリーに変更したいと考えています。

138 css  macos  safari 

私が作業しているこのアプリケーションをロードすると、Chromeでこのエラーが発生します。 スタイルシート50のテキストの取得に失敗しました：指定されたIDのスタイルシートは見つかりませんでした 後続のページの読み込みでエラーが繰り返されますが、数値は異なります。 スタイルシート152のテキストの取得に失敗しました：指定されたIDのスタイルシートは見つかりませんでした これはChromeでのみ発生し、このアプリケーションでのみ発生します。スタックトレース、参照、または指定されたID、問題のスタイルシート、または一般にこれを引き起こしている原因に関する情報はありません。このエラーの原因を見つけて修正するにはどうすればよいですか？

137 css  google-chrome 

特定の言語を選択すると、サイトのCSSをRTLバージョンに上書きします。 絶対配置が必要な要素があります。LTRバージョンではleft: 0px;、左に揃えています。RTLバージョンでは、反対のことをで行いたいのですrightが、leftプロパティはオーバーライドされないため、左側にとどまります。 でハッキングを試みました!importantが、うまくいきませんでした。 設定しようとしましたleft: noneが、うまくいきませんでした。 オーバーライド中にnoneに設定するか、完全に削除するにはどうすればよいですか？

137 css  css-position 

ユーザー名がであるクラス名の要素にマウスを置いたときに、背景色を適用しようとしています"reMode_hover"。 要素があればしかし、私は色を変更したくないもあり"reMode_selected" 注：私はJavaScriptでなくCSSのみを使用できます。これは、ある種の限られた環境で作業しているためです。 明確にするために、私の目標は、ホバーの最初の要素に色を付けることですが、2番目の要素には色を付けません。 HTML <a href="" title="Design" class="reMode_design reMode_hover"> <span>Design</span> </a> <a href="" title="Design" class="reMode_design reMode_hover reMode_selected"> <span>Design</span> </a> 最初の定義が機能することを期待して以下を試しましたが、機能しません。何が悪いのですか？ CSS /* do not apply background-color so leave this empty */ .reMode_selected .reMode_hover:hover { } .reMode_hover:hover { background-color: #f0ac00; }

137 html  css  css-selectors 

div（位置：固定）に100％の幅（親divに関連）を与えようとしています。しかし、私はいくつかの問題を抱えています... 編集： 最初の問題は継承を使用して解決されますが、それでも機能しません。問題は、100％/継承幅を取る複数のdivを使用していることだと思います。あなたはjsfiddleアップデートで2番目の問題を見つけることができます：http ://jsfiddle.net/4bGqF/7/ キツネの例 #container { width: 800px; } #fixed { position: fixed; width: 100%; } とhtml <div id="container"> <div id="fixed">Sitename</div> <p> blaat </p> </div> または、それを試すことができます：http : //jsfiddle.net/4bGqF/ 問題は、固定要素が常にウィンドウ/ドキュメントの幅を使用していることです。誰がどのようにこれを修正するか知っていますか？ 私はjScrollPaneプラグインを使用しているため、固定要素に固定を与えることができません。スクロールバーの有無はコンテンツによって異なります。 どうもありがとう！ PS：2つのdivのテキストは互いに重なり合っています。これはほんの一例であるため、それほど重要ではありません。

137 jquery  css  jquery-plugins 

HTMLのスクロールをbody完全に無効にしたいと思います。私は次のオプションを試しました： overflow: hidden; （動作しません、スクロールを無効にしませんでした、それはスクロールバーを隠しただけです） position: fixed; （これは機能しましたが、完全に一番上までスクロールしましたが、これはこの特定のアプリケーションでは受け入れられません） これら2つのオプションの代替案を見つけることができませんでしたが、それ以上ありますか？

137 html  css  scroll 

これを追加しましたが、ボタンをクリックすると青い輪郭が表示されます。 .btn:focus { outline: none; } その醜いものを削除する方法？

137 css  twitter-bootstrap