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

私は実際には2つの問題を抱えていますが、最初の問題を最初に解決しましょう。 メニューのスクロールの左側に固定位置divがあります。右側は、適切にスクロールする標準のdivです。問題は、ブラウザのビューポートが小さすぎてメニュー全体を表示できない場合です。スクロールして表示する方法がありません（少なくともcssではできません）。CSSで別のオーバーフローを使用してみましたが、divがスクロールしません。メニューを含むdivは、min-height：100％とposition：fixed ..に設定する必要があります。両方の属性を保持する必要があります。 メニューを含むdivは、絶対的に配置され、高さが100％に設定された別のラッパーdiv内にあります。 コンテンツがdivに対して高すぎる場合、どうすれば垂直にスクロールできますか？ それは私にスクロールバーを表示したくないという他の問題を引き起こします...しかし、私はすでにその答えを持っていると思います（divをスクロールできないため、まだ動作しません）はじめに）。 解決策はありますか？おそらくJavaScriptが必要ですか？（私はほとんど知りません） JS Fiddleの例 そして、問題を引き起こしている関連コード（ここにすべてを投稿すると長すぎるので）： .fixed-content { min-height:100%; position:fixed; overflow-y:scroll; overflow-x:hidden; } height：100％も追加してみて、それが問題であるかどうかを確認しましたが、どちらも機能しませんでした。

150 javascript  css  scroll  overflow  css-position 

性別の選択リストがあります。 コード： <select> <option>male</option> <option>female</option> <option>others</option> </select> ドロップダウンリストの画像をdrop-down-icon.jpegとして使用したい。 ドロップダウンアイコンの代わりにボタンを追加したい。 どうやってするか？

150 html  css 

次の例を検討してください：（ライブデモはこちら） $(function() { console.log("width = " + $("td").width()); }); td { border: 1px solid black; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td>Hello Stack Overflow</td> </tr> </tbody> </table> コードスニペットを実行する結果を非表示スニペットを展開 出力は次のとおりwidth = 139です。省略記号は表示されません。 ここで何が欠けていますか？

150 html  css  ellipsis 

次のスタイルを設定します。 forms.py： from django import forms class ContactForm(forms.Form): subject = forms.CharField(max_length=100) email = forms.EmailField(required=False) message = forms.CharField(widget=forms.Textarea) contact_form.html： <form action="" method="post"> <table> {{ form.as_table }} </table> <input type="submit" value="Submit"> </form> 例えば、どのように私は設定しないクラスやIDがためにsubject、email、messageに外部スタイルシートを提供するには？

150 css  django  django-forms 

これはChromeで発生しているエラーであり、残念ながら検索しても多くの結果が得られません。フォント自体は正しく表示されています。ただし、まだこのエラー/警告が表示されます。より具体的には、これは完全な警告です： 「ダウンロードしたフォントのデコードに失敗しました： http：// localhost：8000 / app / fonts / Lato /」 私のCSSは次のとおりです。 @font-face { font-family:"Lato"; src: url("../fonts/Lato/"); } html, body { font-family:'Lato'; } 分かりません。フォントは正しく適用されていますが、警告は常にそこにあります。使用しようとするSans-Serifと、フォントが通常のブラウザフォントに戻るので、そうなる可能性がありますが、よくわかりません。検索しても何も見つかりません。ありがとう！ 編集 さまざまなフォントファイルがあり、すべて同じファミリのものです。それらをすべてロードしようとしています。フォントファイルは.ttfです。私は、ローカルフォルダからそれらをロードしていますし、様々なフォントファイル、などがあるLato-Black.ttf、Lato-Bold.ttf、Lato-Italic.ttfなど

149 css  html  fonts 

JavaScriptやテキスト装飾を使用せずに、テキストの一部を旧式のスタイルに点滅させたいと思っています。 遷移なし、* blink *、* blink *、* blink *のみ！ 編集：これはその質問とは異なります。私は連続的な遷移なしで点滅を要求するのに対し、他の質問のOPは点滅を連続的な遷移で置き換える方法を尋ねます

149 html  css  css-animations  blink 

私はhtml5キャンバス要素を使用して、ブラウザーで画像のサイズを変更します。品質が非常に低いことが判明しました。私はこれを見つけました：<canvas>のスケーリング時に補間を無効にしますが、品質の向上には役立ちません。 以下は、CSSとJSのコードと、Photoshopで呼び出され、キャンバスAPIで拡大縮小された画像です。 ブラウザで画像を拡大縮小するときに最適な品質を得るにはどうすればよいですか？ 注：大きな画像を小さな画像に縮小し、キャンバスの色を変更して、結果をキャンバスからサーバーに送信します。 CSS： canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS： var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $img.load(function() { var originalContext = $originalCanvas[0].getContext('2d'); originalContext.imageSmoothingEnabled = false; originalContext.webkitImageSmoothingEnabled = false; originalContext.mozImageSmoothingEnabled = false; originalContext.drawImage(this, 0, 0, 379, 500); }); photoshopでサイズ変更された画像： …

149 javascript  css  html  canvas  html5-canvas 

CodePen：http ://codepen.io/anon/pen/RPNpaP 。 サイドバイサイドビューの赤いボックスの幅を25 emだけにしたいのですが、このメディアクエリ内にCSSを設定してこれを実現しようとしています。 @media all and (min-width: 811px) {...} に： .flexbox .red { width: 25em; } しかし、私がそうすると、これが起こります： http://i.imgur.com/niFBrwt.png 私が間違っていることは何か考えていますか？

149 html  css  flexbox 

水平メニューを中央揃えにする必要があります。/ / の組み合わせなど、さまざまな解決策を試しましたが、成功しませんでした。inline-blockblockcenter-align これが私のコードです： <div class="topmenu-design"> <!-- Top menu content: START --> <ul id="topmenu firstlevel"> <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li> <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li> <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li> </ul> <!-- Top menu content: END --> </div> 更新 をul内で中央揃えにする方法を知っていますdiv。これは、Sarfrazの提案を使用して達成できます。しかし、リスト項目は依然として内に残っていulます。 これを行うにはJavaScriptが必要ですか？

148 css  xhtml  menuitem 

TABLEレイアウトからDIVレイアウトに切り替えて以来、1つの共通の問題が残っています。 問題：DIVに動的テキストを入力すると、必然的にdiv列の端を超えて非常に長い単語が存在し、サイトが専門外のように見えます。 RETRO-WHINING：これは、テーブルレイアウトでは発生しませんでした。表のセルは常に最も長い単語の幅にうまく拡張されます。 重大度：この問題は、ほとんどの主要なサイト、特に「速度制限」などの一般的な単語でさえ非常に長いドイツのサイト（「Geschwindigkeitsbegrenzung」）でも見られます。 誰かがこれに対して実行可能な解決策を持っていますか？

148 css  layout  html 

設定したサイズを維持するためにHTMLテーブルが必要なページを書いています。テーブルの上部にあるヘッダーが常に表示されるようにする必要がありますが、テーブルに行がいくつ追加されても、テーブルの本体がスクロールする必要があります。Excelのミニバージョンを考えてください。これは簡単な作業のようですが、私がWebで見つけたほとんどすべてのソリューションにはいくつかの欠点があります。どうすればこれを解決できますか？

148 javascript  html  css  html-table 

背景画像を中央に配置したい。divは使用されていません。これはCSSスタイルです。 body{ background-position:center; background-image:url(../images/images2.jpg) no-repeat; } 上記のCSSは全体を並べて中央に配置しますが、画像の半分は見えず、上に移動するだけです。私がやりたいのは、画像を中央に配置することです。21インチの画面でも表示する画像を採用できますか？

148 css 

私はこの質問を見つけただけで、ユーザーがこれまでに見たことのない表記法を使用していることに気づきました。 @font-face { /* CSS HERE */ } では、この@シンボルはCSS3の新しいものなのか、それとも私がどうにか見落としている古いものなのか？これは、IDを使用#したり、クラスを使用したりするようなもの.ですか？Googleはこれに関連する良い記事をくれませんでした。@CSS のシンボルの目的は何 ですか？

148 css  syntax  symbols 

子供からコンテンツをマスクするために、親divの角を丸くする必要があります。overflow: hidden単純な状況で機能しますが、親が比較的または絶対的に配置されている場合、WebkitベースのブラウザーとOperaで機能しなくなります。 これはFirefoxとIE9で機能します。 CSS #wrapper { width: 300px; height: 300px; border-radius: 100px; overflow: hidden; position: absolute; } #box { width: 300px; height: 300px; background-color: #cde; } HTML <div id="wrapper"> <div id="box"></div> </div> JSFiddleの例 助けてくれてありがとう！ 更新：この問題の原因となったバグは、Chromeで修正されました。ただし、OperaやSafariの再テストは行っていません。

147 html  rounded-corners  css 

テーブルコンテナー内のテーブルセル要素の数が不確定です。 <div style="display:table;"> <div style="display:table-cell;"></div> <div style="display:table-cell;"></div> </div> 異なるサイズのコンテンツが含まれている場合でも、テーブルセルの幅を等しくする純粋なCSS方法はありますか？ ありがとう。 編集：最大幅を持っていると、私が思うにいくつのセルを持っているかを知る必要がありますか？

147 html  css  html-table