プログラミング css

7

たとえば、次のHTMLがあるとします。 <div class="someDiv"></div> そしてこのCSS： .opacity { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .radius { border-top-left-radius: 15px; border-top-right-radius: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; } .someDiv { background: #000; height: 50px; width: 200px; /*** How can I reference the opacity and radius classes here so this div has those generic rules …

100 css

17

<a href=“”>リンクをボタンのようにする方法は？

私はこのボタンの画像を持っています： <a href="">some words</a>リンクをボタンとして表示するシンプルでスタイルを作ることができるかどうか疑問に思っていましたか？可能であれば、どうすればよいですか？

100 html css

4

CSSテーブル列の自動幅

次のように、最後の列をコンテンツに合わせて自動サイズ調整するにはどうすればよいですか？（最後の列は、コンテンツに合わせて幅を自動サイズ設定する必要があります。3つのli要素がある場合と比較して、縮小する必要があるli要素が1つしかない場合など）： <table cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td> <td class="tc">Type</td> <th>File</th> <th>Sample</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td>Division 5</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> <td>Division 4</td> <td class="last"> <ul …

100 html xhtml css

2

Webサイトで.woffフォントを使用するにはどうすればよいですか？

CSSがフォントにアクセスできるように、フォントをどこに配置しますか？ブラウザの非標準フォントを.woffファイルで使用しています。「awesome-font」が「awesome-font.woff」ファイルに保存されているとしましょう。

100 html css fonts woff

10

チェックボックスをテーブルセルの中央に配置する方法は？

セルにはチェックボックスしかありません。テーブルのヘッダー行にテキストがあるため、幅が広めです。チェックボックスを中央に配置するにはどうすればよいですか（HTMLにインラインCSSを使用していますか（知っています））。私は試した <td> <input type="checkbox" name="myTextEditBox" value="checked" style="margin-left:auto; margin-right:auto;"> </td> しかし、それはうまくいきませんでした。何が悪いのですか？更新：これはテストページです。チェックボックスが列の中央に配置されるように、HTMLのCSSインラインを使用して誰かがそれを修正できますか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Alignment test</title> </head> <body> <table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1" cellpadding="1" cellspacing="1"> <tr> <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th> </tr> <tr> <td> <input type="checkbox" name="query_myTextEditBox" style="text-align:center; vertical-align: middle;"> </td> <td> myTextEditBox …

100 html css

14

ホバー時にRGBA背景色のアルファのみを変更することは可能ですか？

のセットがあります <a>RGBAの背景色が異なるが、アルファは同じタグのます。rgba属性の不透明度のみを変更する単一のCSSスタイルを書くことは可能ですか？コードの簡単な例： <a href="#"><img src="" /><div class="brown">Link 1</div></a> <a href="#"><img src="" /><div class="green">Link 2</div></a> そしてスタイル a {display: block; position: relative} .brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);} .green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);} 私がやりたいの<a>は、がホバーされたときに不透明度を変更しながら、色を変更しない単一のスタイルを書くことです。何かのようなもの a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

100 css hover background-color rgba

4

パーセンテージを使用してテーブルセルの最大幅を設定するにはどうすればよいですか？

<table> <tr> <td>Test</td> <td>A long string blah blah blah</td> </tr> </table> <style> td{max-width:67%;} </style> 上記は動作しません。パーセンテージを使用してテーブルセルの最大幅を設定するにはどうすればよいですか？

100 html css html-table

4

textareaが親のDIV要素を超えて拡大しないようにするにはどうすればよいですか？（google-chromeの問題のみ）

textareaが親DIV要素を超えて拡大しないようにするにはどうすればよいですか？このテキストエリアはDIV内のテーブル内にあり、テーブル全体が境界からはみ出しているようです。もっと単純な場合でも、div内にテキスト領域を配置するだけで同じ状況の例を確認できます（www.stackoverflow.comで使用されているもののように）下の画像から、textareaが親のサイズを超えて伸びていることがわかりますか？これを防ぐにはどうすればよいですか？ CSSは初めてなので、どのCSS属性を使用すればよいのか本当にわかりません。私はいくつかのような表示を試み、オーバーフローしました。しかし、彼らはトリックを行っていないようです。他に見逃したものはありますか？更新：HTML CSS textarea { max-width: 50%; } #container { width: 80%; border: 1px solid red; } #cont2{ width: 60%; border: 1px solid blue; } このコードをhttp://jsfiddle.net内に配置すると、動作が異なることがわかります。textareaはそのcssスタイルで宣言されたパーセンテージに制限されますが、それでも親テーブルを必要な大きさにすることが可能であり、親ボーダーを超えてはみ出すことがわかります。これを修正する方法について何か考えはありますか？

100 css google-chrome textarea

5

位置：絶対と親の高さ？

私はいくつかのコンテナを持っており、その子は絶対的/相対的に配置されています。コンテナの高さを設定して、子供が中に入るようにする方法は？これがコードです： HTML <section id="foo"> <header>Foo</header> <article> <div class="one"></div> <div class="two"></div> </article> </section> <div style="clear:both">Clear won't do.</div>  <section id="bar"> <header>bar</header> <article> <div class="one"></div><div></div> <div class="two"></div> </article> </section> CSS article { position: relative; } .one { position: absolute; top: 10px; …

100 html css position height absolute

9

CSSのテーブルtdの中央の画像

テーブルtdの中央に画像を配置しようとしています。margin-leftを特定の値に設定することで機能しましたが、tdのサイズも大きくなり、それが私が望んでいたものとは異なりますこれを行う効率的な方法はありますか？テーブルの高さと幅にはパーセンテージを使用しました。

100 html css

15

アニメーションCSS3：ディスプレイ+不透明度

CSS3アニメーションに問題があります。 .child { opacity: 0; display: none; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .parent:hover .child { opacity: 0.9; display: block; } このコードは、の変更を削除した場合にのみ機能しdisplayます。ホバー直後の表示を変更したいのですが、トランジションを使用して不透明度を変更する必要があります。

100 animation css

7

CSSに `pointer-events：hoverOnly`または同様のものはありますか？

pointer-eventsCSSのプロパティで遊んでいるところです。をdiv除くすべてのマウスイベントで非表示にしたいものがあります:hover。したがって、すべてのクリックコマンドはdiv、その下を通過しますが、divは、マウスがその上にあるかどうかを報告できます。これができるかどうか誰かに教えてもらえますか？ HTML： <div class="layer" style="z-index:20; pointer-events:none;">Top layer</div> <div class="layer" style="z-index:10;">Bottom layer</div> CSS： .layer { position:absolute; top:0px; left:0px; height:400px; width:400px; }

100 html css pointer-events

4

オーバーフローの外側に子を表示する：非表示の親

CSSではoverflow:hidden、フローティング子の高さで拡張できるように、が親コンテナに設定されています。しかし、それと組み合わせると、別の興味深い機能もありmargin: autoます... PREVIOUS兄弟がフローティング要素である場合、実際にはそれと並置されて表示されます。つまり、兄弟がその場合、float:leftコンテナfloat:none overflow:hiddenは兄弟の右側に表示され、改行は表示されません。通常のフローに浮かんでいるかのように表示されます。前の兄弟がfloat:rightその場合、コンテナは兄弟の左側に表示されます。このコンテナのサイズを変更すると、フローティング要素の中央に正確に表示されます。あなたが以前の2人の兄弟、1があれば言ってやるがfloat:left他にfloat:right、コンテナは2わたってるしき中央に表示されます。だからここに問題があります... 子供をマスキングせずにそのタイプのレイアウトを維持するにはどうすればよいですか？ Web全体をグーグルで検索するclear:bothと、コンテナを拡張する方法がわかります...しかし、左/右の前の子の中心を維持するための代替ソリューションは見つかりません。コンテナを作成すると、コンテナoverflow:visibleは突然フローティング要素のレイアウトフローを無視し、フローティング要素の上に階層化されて表示されます。だから質問： overflow:hiddenレイアウトを維持するためにコンテナが必要です... 子供たちがマスクされないようにするにはどうすればよいですか？コンテナの外側で、子を親に対して絶対的に配置する必要があります。または overflow:visibleコンテナの外側で親に対して子を絶対に配置できるようにするにはどうすればよいですか...まだ兄弟のfloat-like-layout-flowを保持しますか？

100 css overflow css-float center hidden

1

フレックスアイテムが伸びないようにする

サンプル： div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> コードスニペットを実行する結果を非表示スニペットを展開 2つの質問があります。なぜそれは基本的に起こるのspanですか？フレックスコンテナ内の他のフレックスアイテムに影響を与えずに伸びないようにするための正しいアプローチは何ですか？

100 html css flexbox

18

YiiフレームワークにCSS、javascriptファイルを含める

YiiフレームワークにJavascriptまたはCSSファイルを含める方法は？私は含めたいので、少しJavascriptのアプリケーションを実行している私のサイトのページを作成したい.jsと.css、特定のビューでファイルを。

99 javascript php css yii

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

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