プログラミング css

22

CSSプロパティを使用していますが、使用する場合page-break-after: always;=>前に余分な空白ページを印刷します page-break-before: always;=>を使用すると、後に余分な空白ページが印刷されます。これを回避する方法は？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> .print{ page-break-after: always; } </style> <script type="text/javascript"> window.print(); </script> </head> <body> <div class="print">fd</div> <div class="print">fdfd</div> </body> </html>

88 css printing

4

動的幅（CSS）の中央固定div

私はこのCSSを持つdivを持っています： #some_kind_of_popup { position: fixed; top: 100px; min-height: 300px; width: 90%; max-width: 900px; } さて、どうすればこのdivを中央に配置できますか？使用できますmargin-left: -450px; left: 50%;が、これは画面が900ピクセルを超える場合にのみ機能します。その後（ウィンドウが900ピクセル未満の場合）、中央に配置されなくなります。もちろん、ある種のjsでこれを行うことはできますが、CSSでこれを行う「より正しい」方法はありますか？

88 css html center

4

あるタグのセレクターの直後に別のタグが続く

これは、すべての選択<B>を直接タグの前で<A>タグ： A+B { /* styling */ } すべてのセレクタは何である<A>直接タグに続くことにより、<B>タグは？これが私の質問に合うサンプルHTMLです： <a>some text</a> <b>some text</b>

88 css css-selectors

5

親を埋めるためにCSSの幅を作る方法は？

この問題は以前に尋ねられたことがあると思いますが、答えが見つからないようです。私は次のマークアップを持っています： <div id="foo"> <div id="bar"> here be dragons </div> </div> 私の望みは、fooの幅を600px（width: 600px;）にし、barの動作を次のようにすることです。 padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; outerWidth: 100%; つまり、バーの幅をに設定する代わりに、バー592pxの外側の幅をに設定して、100%計算されるようにし592pxます。ここで重要なのは、fooの幅をに変更でき800px、これらすべてのインスタンスの計算を手動で行う代わりに、レンダリング時にbarが計算されることです。これは純粋なCSSで可能ですか？それでもう少し楽しい： #barテーブルの場合はどうなりますか？どのような場合#barTEXTAREAはありますか？ #bar入力の場合はどうなりますか？どのような場合は、#fooテーブルセルですか（td）？（これは問題を変更しますか、それとも問題は同じですか？）これまでのところtable#bar、input#bar議論されてきました。textarea＃barの良い解決策を見たことがありません。境界線/マージン/div折り返しのあるパディングのないテキストエリアは、の境界線divとして機能するスタイルで機能する可能性があると思いますtextarea。

88 css

5

Facebookスタイルの「赤」通知の最も簡単なCSS

Facebookスタイルの通知が必要ですが、クロスブラウザで見栄えのするものを取得するのは難しいようです。たとえば、ブラウザが異なればパディングの処理も異なるようで、通知の外観がおかしくなります。通知が適切に表示されるようにするための最良のクロスブラウザー方法は何ですか？javascriptの使用に悪影響はありませんが、もちろん純粋なcssが望ましいです

88 javascript html css user-interface user-experience

17

ブラウザにcss、javascriptなどを更新させる

XAMPPを通じてWordpressのソースコードに基づいたウェブサイトを開発しています。CSSコードやスクリプトなどを変更すると、ブラウザが変更を適用するのに時間がかかることがあります。これにより、複数のブラウザを使用して1つを更新することになります。新しいスタイルが適用されない場合は、2つ目のブラウザを試してみますが、これは常にこれです。この問題を回避する方法はありますか？以前の変更に気付かずにコードを変更することがあります。

88 javascript css browser xampp

22

スクロールが原因でレスポンシブテーブル内のブートストラップボタンのドロップダウンが表示されない

overflow: auto;プロパティのためにドロップダウンが表示されないため、応答がありスクロールがアクティブな場合、テーブル内のドロップダウンボタンに問題があります。これが折りたたまれているときにボタンのドロップダウンオプションを表示するために、どうすれば修正できますか？いくつかのjQueryを使用できますが、左右のスクロールに問題があったため、別の解決策を見つけることにしました。わかりやすくするために写真を添付しました。これが小さなjsフィドルです：

88 javascript jquery css twitter-bootstrap overflow

10

パディング専用の背景色を追加できますか？

境界線とパディングを含むヘッダーボックスとそのボックスの背景色があります。境界線の後のパディングされた領域の背景色のみを変更してから、残りの幅（つまり、指定されたコードでは灰色）の背景色を変更できますか？？埋め込みの背景色が必要なコードのピンチ： nav { margin:0px auto; width:100%; height:50px; background-color:grey; float:left; padding:10px; border:2px solid red; }

88 css

11

スクロールバーなしでビューポート幅（vw）を計算することは可能ですか？

タイトルで述べたように、vwcssだけでスクロールバーなしで計算することは可能ですか？たとえば、私の画面の幅は1920px。です。vw戻ります1920px、素晴らしい。しかし、私の実際の体幅はのようなものにすぎません1903px。 1903pxcssのみで値を取得する方法はありますか（の直接の子だけでなくbody）、またはこれにはJavaScriptが絶対に必要ですか？

88 css viewport-units

9

動作しないパーセンテージとしての行の高さ

行の高さに問題があり、頭がよくなりません。次のコードは、div内の画像を中央揃えにします。 CSS .bar { height: 800px; width: 100%; line-height:800px; background-color: #000; text-align: center; } .bar img { vertical-align: middle; } HTML <div class="bar"> <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" /> </div> ただし、行の高さを100％に変更すると、行の高さは有効になりません（または、少なくともdivの100％にはなりません）。 jsfiddleの例誰かが私が間違っていることを知っていますか？

87 css

8

ページのTwitterブートストラップタブを中央に配置するにはどうすればよいですか？

Twitterブートストラップを使用して、切り替え可能なタブを作成しています。これが私が使っているCSSです： <div class="container"> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> </div> このhtmlはタブを正しく表示しますが、左側に引っ張られます（これが起こるはずです）。CSSをいじってタブをページの中央に配置しようとしましたが、まだうまくいきません。私は、CSSの経験が豊富な方なら、これを行う方法を知っていると思いました。メモとして、ナビピルの中央揃えについて別の質問がありますが、試してみましたが、単純なナビタブだけでは機能しませんでした。ありがとう。

87 html css twitter-bootstrap

9

幅がそれぞれ50％の2つのインラインブロック要素が、1つの行に並べては収まりません

<!DOCTYPE html> <html> <head> <title>Width issue</title> <style type="text/css"> body { margin: 0; } #left { width: 50%; background: lightblue; display: inline-block; } #right { width: 50%; background: orange; display: inline-block; } </style> </head> <body> <div id="left">Left</div> <div id="right">Right</div> </body> </html> JSFiddle：http ://jsfiddle.net/5EcPK/ 上記のコードは、＃left divと#right divを1つの行に並べて配置しようとしています。しかし、上記のJSFiddle URLを見るとわかるように、そうではありません。 1つのdivの幅を49％に減らす問題を解決できます。http://jsfiddle.net/mUKSC/を参照してください。ただし、2つのdivの間に小さなギャップが生じるため、これは理想的なソリューションではありません。私が問題を解決できる別の方法は、両方のdivをフローティングにすることです。http://jsfiddle.net/VptQm/を参照してください。これは正常に動作します。しかし、私の元の質問は残ります。両方のdivがインラインブロック要素として保持されているのに、それらが並んでフィットしないのはなぜですか？

87 html css

3

background-position-x（background-position-y）は標準のW3C CSSプロパティですか？

気になるbackground-position-xとbackground-position-y。Gecko（Firefox）とPresto（Opera）はそれらをサポートしていませんが、Webkit（Chrome、Safari）はサポートしています... これが規格に含まれている（または含まれる）かどうかは（公式参照で）誰か知っていますか？

87 css background-position

10

スパンまたはdivを水平に配置するにはどうすればよいですか？

私の唯一の問題は、それらを3つに並べ、等間隔にすることです。どうやら、スパンは幅を持つことができず、div（およびdisplay：blockのあるスパン）は横に並べて表示されません。提案？ <div style='width:30%; text-align:center; float:left; clear:both;'> 私が今持っているものです。

87 css html

13

CSSを使用してホバー時に画像にズーム効果を作成しますか？

現在、4つの画像の1つにカーソルを合わせるとズーム効果を作成しようとしています。問題は、ほとんどの例で、通常、テーブルまたはマスクdivを使用して何らかの効果を適用することです。これが私がこれを望むものを実装する1つの例です。これはこれまでの私のコードです。 HTML <div id="menu"> <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt=""> <img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt=""> <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt=""> <img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt=""> </div> CSS #menu { max-width: 1200px; text-align: center; margin: auto; } #menu img { width: 250px; height: 375px; padding: 0px 5px 0px 5px; overflow: …

87 html class css

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

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