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

[製品]をクリックして、白いdivを上にスライドさせます（添付の図を参照）。レスポンシブ（モバイルおよびタブレット）の場合、レスポンシブナビゲーションバーを自動的に閉じて、白いバーのみを表示したいと思います。 私は試した： $('.btn-navbar').click(); また試した： $('.nav-collapse').toggle(); そしてそれは機能します。ただし、デスクトップサイズでは、これは呼び出され、メニューにファンキーなことをして、1秒間縮小します。 何か案は？

86 javascript  html  css  twitter-bootstrap 

PHPを使用してクイズWebアプリケーションを作成しています。各質問は個別に構成され、ユーザーが自分の回答を選択できるようにするため<label>に使用radio buttonsする4つの可能な選択肢があります。1つの質問の現在のHTMLは次のようになります。 <label for="349">What is my middle name?</label> <br> <input id="349" type="radio" value="1" name="349">Abe <br> <input id="349" type="radio" value="2" name="349">Andrew <br> <input id="349" type="radio" value="3" name="349">Andre <br> <input id="349" type="radio" value="4" name="349">Anderson <br> ラジオボタンに関連付けられたテキストをクリックするオプションをユーザーに提供してほしい。 今のところ、ユーザーはラジオボタン自体をクリックすることしかできません。これは非常に面倒な作業だと思います。 選択テキストをクリックして特定のラジオボタンの選択肢を選択できないと読みました。タグの属性forとid属性を一致させるための提案があります。私はこれを行いましたが、それでも機能しません。 私の質問は、ラジオボタン自体を選択することしかできないのではなく、<input type="radio">オブジェクトのテキストをクリックできるようにしたいということです。 私は以前にこれについて読んだことがあることを知っていますが、私の問題の解決策を見つけることができないようです。どんな助けや提案も大歓迎です！

86 html  css  forms  input  radio-button 

ブートストラップ2.3ですでにグリフィコンを使用していましたが、ブートストラップ3.0にアップグレードしました。現在、iconプロパティを使用できません。 ブートストラップ2.3では、以下のタグが機能しています <i class="icon-search"></i> ブートストラップ3.0では、機能していません。

86 html  css  twitter-bootstrap-3 

Font Awesome Sassファイルhttps://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sassを使用して_font-awesome.sassにしているので@import、Sassプロジェクトに参加できます。また、http：//middlemanapp.com/を使用してSassをに変換していますCssます。質問： 使用済みのアイコンクラスのみを変換された.cssに取り込む方法はありますか？今は_font-awesome.sassのすべてのクラスを運んでいたからです ボーナス：再コンパイルすることは可能ですか？使用済みのアイコンクラスを使用してフォント、本番環境で使用ときにフォントを小さくすることは可能ですか？ 上記の＃1に関するヒントを得ることができれば、それで十分です。 ありがとう。

86 css  sass  font-awesome 

HTMLのメニューバーにはたくさんのチュートリアルがありますが、この特定の（IMHOの一般的な）ケースでは、適切な解決策は見つかりませんでした。 # THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD BE # # ^ ^ # テキストのみのメニュー項目の数はさまざまで、ページレイアウトは流動的です。 最初のメニュー項目は左揃えで、最後のメニュー項目は右揃えである必要があります。 残りの項目は、メニューバーに最適に配置する必要があります。 数はさまざまであるため、最適な幅を事前に計算する機会はありません。 TABLEはここでも機能しないことに注意してください。 すべてのTDを中央に配置すると、最初と最後のアイテムが正しく配置されません。 最初の応答を左揃えおよび右揃えにした場合。最後の項目では、間隔は最適ではありません。 HTMLとCSSを使用してこれをクリーンな方法で実装する明白な方法がないのは不思議ではありませんか？

86 html  css 

色付きの（そしてリンクになる）アイコンを取得し、ユーザーがアイコンの上にマウスを置くまで（画像に色を付ける）グレースケールに変えたいと思っています。 これは可能ですか？IEとFirefoxがサポートされている方法でですか？

86 css  mouseover  grayscale 

リスト内の箇条書きの色を薄い灰色に変更できるようにするだけです。デフォルトは黒で、変更方法がわかりません。 画像を使用できることはわかっています。私がそれを助けることができれば、私はむしろそれをしたくありません。

86 html  css  html-lists 

クローズ。この質問には詳細または明確さが必要です。現在、回答を受け付けていません。 この質問を改善したいですか？この投稿を編集して、詳細を追加し、問題を明確にしてください。 2年前に閉鎖されました。 この質問を改善する JavaScriptをまったく使用せずに、CSSのみのリンクを使用してテキストを表示および非表示にすることは可能ですか？ 例：このページ 「詳細」リンクに注意してください。クリックすると、テキストが再表示されます。この特定の例はJavaScriptですが、純粋なCSSで実行できるかどうかはわかりません。

86 css 

したがって、app/assets/stylesheets/次のようなディレクトリ構造があります。 |-dialogs |-mixins |---buttons |---gradients |---vendor_support |---widgets |-pages |-structure |-ui_elements 各ディレクトリには、複数のsassパーシャルがあります（通常は* .css.scssですが、1つまたは2つの* .css.scss.erb）。 私は多くのことを想定しているかもしれませんが*= require_tree .、application.cssにあるため、railsはそれらのディレクトリ内のすべてのファイルを自動的にコンパイルする必要がありますよね？ 最近、すべての色変数を削除してルートapp/assets/stylesheetsフォルダー（_colors.css.scss）のファイルに配置することにより、これらのファイルを再構築しようとしました。次に、app/assets/stylesheets次のようなファイルをmaster.css.scssというルートフォルダーに作成しました。 // Color Palette @import "colors"; // Mixins @import "mixins/buttons/standard_button"; @import "mixins/gradients/table_header_fade"; @import "mixins/vendor_support/rounded_corners"; @import "mixins/vendor_support/rounded_corners_top"; @import "mixins/vendor_support/box_shadow"; @import "mixins/vendor_support/opacity"; Railsがアセットのコンパイルの順序をどのように処理するかはよくわかりませんが、明らかに私の好みではありません。インポートされている変数またはミックスインがあることを認識しているファイルがないようです。そのため、エラーがスローされ、コンパイルできません。 Undefined variable: "$dialog_divider_color". (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb) Undefined mixin 'rounded_corners'. (in /home/blah/app/assets/stylesheets/widgets.css.scss) 変数$dialog_divider_colorは_colors.css.scssで明確に定義されており、_master.css.scss色とすべてのミックスインをインポートしています。しかし、どうやらレールはそのメモを受け取らなかったようです。 これらのエラーを修正する方法はありますか、それともすべての変数定義を個々のファイルに戻し、すべてのミックスインインポートに戻す必要がありますか？ 残念ながら、この男はそれが可能だとは思わないようですが、私は彼が間違っていることを望んでいます。どんな考えでも大歓迎です。

86 css  ruby-on-rails  asset-pipeline  sass 

Twitterブートストラップを使用していて、2つの列（span6）を持つ行があります。両方のスパンの間に垂直仕切りを作成するにはどうすればよいですか。 ありがとう、ムルタザ

86 html  css  twitter-bootstrap 

だから私は問題を抱えています。私は周りを見回しましたが、運がありません。体の背景を透明にしたいのですが、テキストは透明にしません。今のところ、私は両方を同じ不透明度にし続けています。これが私のコードです： @charset "utf-8"; body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #42413C; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; opacity:1; …

86 html  css  text  opacity 

はめ込み枠をHTML要素に適用する方法。ただし、その片側だけに適用します。これまで、画像を使用してそれを実行し（GIF / PNG）、それを背景として使用してストレッチし（repeat-x）、ブロックの上部から少し離して配置していました。最近、アウトラインCSSプロパティを発見しました。これはすばらしいことです。しかし、ブロック全体を囲んでいるようです...このoutlineプロパティを使用して、1つの境界線だけでそれを行うことは可能ですか？また、そうでない場合は、背景画像を置き換えることができるCSSのトリックはありますか？（後でCSSなどを使用してアウトラインの色をパーソナライズできるようにするため）。前もって感謝します！ これが達成しようとしていることの画像です：http： //exiledesigns.com/stack.jpg

86 html  css 

検索して検索しましたが、要件の解決策を見つけることができませんでした。 私は単純な古いHTMLテーブルを持っています。画像やJSを使用せずに、つまり純粋なCSSのみを使用して、角を丸くしたいのです。このような： コーナーセルの場合は丸みを帯びたコーナー、セルの場合は1px太い境界線。 これまでのところ私はこれを持っています： table { -moz-border-radius: 5px !important; border-collapse: collapse !important; border: none !important; } table th, table td { border: none !important } table th:first-child { -moz-border-radius: 5px 0 0 0 !important; } table th:last-child { -moz-border-radius: 0 5px 0 0 !important; } table tr:last-child td:first-child { -moz-border-radius: …

86 html  css  html-table  rounded-corners 

ユーザーがボタンをクリックすると、マウスボタンを押している間にスタイルが変わるようにボタンを作成しようとしています。また、モバイルブラウザでタッチした場合も同様にスタイルを変えてほしい。一見明らかなことは、CSS：active疑似クラスを使用することでしたが、それは機能しませんでした。：focusを試しましたが、うまくいきませんでした。：hoverを試してみたところ、うまくいったようですが、ボタンから指を離してもスタイルは保たれていました。これらの観察結果はすべて、iPhone4とDroid2で行われました。 モバイルブラウザ（iPhone、iPad、Android、そしてできれば他のブラウザ）で効果を再現する方法はありますか？今のところ、私は次のようなことをしています： <style type="text/css"> #testButton { background: #dddddd; } #testButton:active, #testButton.active { background: #aaaaaa; } </style> ... <button type="button" id="testButton">test</button> ... <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script> <script type='text/javascript'> $("*").live("touchstart", function() { $(this).addClass("active"); }).live("touchend", function() { $(this).removeClass("active"); }); </script> ：active疑似クラスはデスクトップブラウザ用であり、アクティブクラスはタッチブラウザ用です。 Javascriptを使わずにもっと簡単な方法があるのではないかと思います。

86 javascript  jquery  html  css  mobile 

私が持っているとしましょう <div class="myDiv">Hi there</div> 私は入れたいbackground-imageとそれを与えるopacityのを0.5-しかし、私は私が書かれているテキストが（完全に不透明になりますことをしたいです1）。 このようにCSSを書くとしたら .myDiv { opacity:0.5 } すべてが不透明度が低くなります–そして私はそれを望んでいません。 だから私の質問は-完全な不透明度のテキストで低不透明度の背景画像を取得するにはどうすればよいですか？

86 html  css  background  background-image