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

私のサイトには次のiframeがあります。 <iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe> そして、それはスクロールバーを持っています。 それらを取り除く方法は？

84 html  css  iframe 

幅と高さの比率を維持するように画像のサイズを変更する方法を見つけようとしていますが、画像の高さが含まれているdivの高さと一致するまでサイズが変更されます。これらの画像はかなり大きくて長い（スクリーンショット）ので、手動で画像のサイズを変更せずに、幅200ピクセル、高さ180ピクセルのdivに表示したいと思います。これを見栄えよくするために、画像の側面はオーバーフローし、含まれているdivで非表示にする必要があります。これは私がこれまでに持っているものです： http://jsfiddle.net/f9krj/2/ HTML <a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg"> <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" /> </a> CSS a.image_container { background-color: #999; width: 200px; height: 180px; display: inline-block; overflow: hidden; } a.image_container img { width: 100%; } ご覧のとおり、画像の親コンテナには灰色が表示されていますが、まったく表示されるべきではありません。そのコンテナを完全に満たすには、幅が両側で均等にオーバーフローする必要があります。これは可能ですか？高すぎる画像を説明することもできますか？

84 html  image  css 

周りを見回しましたが、探しているものが見つかりません。 現在、ページに：hoverによってトリガーされるcssアニメーションがあります。メディアクエリを使用してページの幅が700pxを超えてサイズ変更された場合、これを「クリック」または「タッチ」に変更したいと思います。 これが私が現在持っているものです：http：//jsfiddle.net/danieljoseph/3p6Kz/ ご覧のとおり、：hoverはモバイルデバイスでは機能しませんが、ホバーではなくクリックするだけで同じように機能することを確認したいと思います。 可能であればcssを使用したいのですが、JQueryにも満足しています。 これはとても簡単にできると思いますが、非常に明白な何かが欠けています！どんな助けでもいただければ幸いです。 これがcssアニメーションです： .info-slide { position:absolute; bottom:0; float:left; width:100%; background:url(../images/blue-back.png); height:60px; cursor:pointer; overflow:hidden; text-align:center; transition: height .4s ease-in-out; -webkit-transition: height .4s ease-in-out; -moz-transition: height .4s ease-in-out; } .info-slide:hover { height:300px; }

84 css  css-animations 

データリストのさまざまなオプションのリストの表示方法を変更したいと思います。いくつかのCSSプロパティを適用することは可能ですか？ <input list="languages" id="language_id"> <datalist id="languages"> <option value="html">HTML</option> <option value="java">Java</option> <option value="perl">Perl</option> <option value="php">PHP</option> <option value="ruby-on-rails">Ruby on Rails</option> </datalist> 私は試した option { background: red; } しかし、それは機能していないようです。

84 css  html  option  html-datalist 

私はbox-shadow4つの側面すべてにを適用しようとしています。私はそれを2つの側面でしか得ることができませんでした：

84 css  box-shadow 

それが右に整列したテキストに可能かどう誰もが知っている<select>か、より具体的<option>で要素のWebKitを。これは、IEを含むクロスブラウザーソリューションである必要はありませんが、可能であれば純粋なCSSである必要があります。 私は両方を試しました： select { text-align: right }およびoption { text-align: right }、ただし、どちらもWebKit（Chrome、Safari、またはMobile Safari）では機能していないようです。 どんな助けもありがたく受けました！

84 html  css  webkit 

私の理解では、すべてのBootstrapスタイルの要素は要素内に存在する必要があり<div class="container">ます。しかし、複数の「コンテナ」が存在するBootstrapの例を時々目にします。 <div class="container"> <!-- Blah, GUI stuff, blah --> </div> ... <div class="container"> <!-- Blah, more GUI stuff, blah --> </div> 私の質問： 複数の「コンテナdiv」を含む単一のHTMLページが必要になるのはいつですか。全身を1つの大きな「コンテナdiv」に入れるのとは対照的に、これにはどのような利点がありますか？ 「コンテナdiv」を他のdivの中にネストしたいと思ったことはありませんか？いつ/なぜ？

84 css  twitter-bootstrap 

Google Chromeでスクロールバーを非表示にする方法を見つけたので、次のコードを使用しました。 ::-webkit-scrollbar { display: none; } 唯一の問題は、これがFirefoxでは機能しないことです。多くの方法を試しましたが、それでも機能しません。

84 css  firefox 

.btnBootstrapのすべてのプロパティを変更する方法はありますか？以下のものを試しましたが、それでもデフォルトの青色が表示されることがあります（たとえば、マウスをクリックして取り外した後など）。テーマ全体を完全に変更するにはどうすればよいですか？ .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited { background-color: #8064A2; }

84 css  twitter-bootstrap  twitter-bootstrap-3 

min-contentとmax-content値はCSSでどのように計算されますか？ そして、内在次元とはどういう意味ですか？

84 css 

私はCSSだけでアニメーションの心臓に取り組んでいます。 2回パルスし、少し休憩してから、もう一度繰り返します。 私が今持っているもの： small ==> big ==> small ==> repeat animation 私が何をしようとしているのか： small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation どうすればいいですか？ 私のコード： #button{ width:450px; height:450px; position:relative; top:48px; margin:0 auto; text-align:center; } #heart img{ position:absolute; left:0; right:0; margin:0 auto; -webkit-transition: opacity 7s ease-in-out; -moz-transition: opacity …

83 html  css  animation 

現在のところ、この質問は私たちのQ＆A形式には適していません。回答は事実、参考資料、または専門知識によって裏付けられることを期待していますが、この質問は、討論、議論、世論調査、または広範な議論を求める可能性があります。この質問を改善し、場合によっては再開できると思われる場合は、ヘルプセンターにアクセスしてガイダンスを入手してください。 8年前に閉鎖されました。 CSSでパーセンテージの代わりにピクセル数を使用することは互換性の点で悪いですか？低解像度はどうですか？1〜100の範囲でそれらを使用しても大丈夫ですか？

83 css  pixels  screen-resolution  resolution-independence 

いくつかのパディングのあるラッパーがあり、次にパーセンテージ幅（40％）のフローティング相対divがあります。 フローティング相対divの中に、親と同じサイズにしたい固定divがあります。固定divがドキュメントのフローから削除されているため、ラッパーのパディングが無視されていることを理解しています。 HTML <div id="wrapper"> <div id="wrap"> Some relative item placed item <div id="fixed"></div> </div> </div> CSS body { height: 20000px } #wrapper { padding: 10%; } #wrap { float: left; position: relative; width: 40%; background: #ccc; } #fixed { position: fixed; width: inherit; padding: 0px; height: 10px; background-color: #333; …

83 html  css 

クローズ。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善したいですか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 12か月前に閉鎖されました。 この質問を改善する 私は10年以上ウェブサイトを開発してきましたが、ウェブ用に開発する私の習慣の多くは、電子メールクライアント用に開発するときには役に立たないことがすぐにわかりました。これは私に非常に多くの欲求不満を引き起こしたので、私は質問をするだろうと思いました： 時々GmailやOutlookなどのデザインをしている私のような他の人にとってのベストプラクティスと必要な考慮事項は何ですか？ 例： <style>...</style> vsインラインCSS。 つまり、Webの世界から電子メールの世界に何が移行し、何が移行しないのでしょうか。

83 html  css  html-email 

私はそれを解決する方法を理解するのに苦労していますが、問題はかなり簡単です。 カスタムメイドの「iosスタイルのオン/オフトグル」と一緒にjQuery-uidatepickerを使用しています。このトグルは、現在私の日付ピッカーの上に表示されているいくつかの絶対位置の要素を使用します。 以下の7月6日をカバーする醜い円を参照してください... これを行うための汚い方法（少なくともimo）は、スタイルシートの1つにスタイルを書き込むことですが、これを行うためにピッカーが起動するときにJavaScriptを使用したいと思います。 私はすでに試しました $('.date_field').datepicker(); $('.date_field').datepicker("widget").css({"z-index":100}); そして $('.date_field').datepicker({ beforeShow: function(input, inst) { inst.dpDiv.css({"z-index":100}); } }); しかし、日付ピッカーが起動されるたびにz-indexが上書きされるようです。 どんな助けでも大歓迎です！

83 javascript  jquery  css  jquery-ui  datepicker