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

Font Awesomeに含まれている検索アイコンを入力に使用するにはどうすればよいですか？私のサイトには（PHPmotionに基づく）検索機能があり、それを検索に使用したいと考えています。 これがコードです： <div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color: #ffffff" /> <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" …

89 html  css  font-awesome 

私が使用した： word-break:break-all; table-layout:fixed; テキストはChromeで折り返されますが、Firefoxでは折り返されません。 更新：ラップが不要になるようにデザインを変更することにしました。CSSの修正/ハックを整理しようとすると、イライラし、時間がかかりすぎることがわかりました。

89 css 

タグを含む1行のテキストをブラウザに出力したい。これがレンダリングされると、DIVによって改行が発生するように見えます。同じ行のdivタグにコンテンツを含めるにはどうすればよいですか？これが私のコードです。 <?php echo("<a href=\"pagea.php?id=$id\">Page A</a>") ?> <div id="contentInfo_new"> <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script> </div> 私はここでそれを片付けようとしました。この表示を1行にするにはどうすればよいですか？

89 html  css 

セルの背景色が白で、テーブルの背景色が青であるため、セル間にスペースを入れてテーブルを追加しようとしています。パディングとマージンが機能していないことが簡単にわかります（に適用していますtd）。セル内にスペースを追加するだけです。

89 html  css 

いくつかのテキストフィールドを持つフォームがあり、ページが読み込まれたときにフォームの最初のテキストフィールドにカーソル（オートフォーカス）を置きたいです。 javascriptを使わずにやりたいです。

89 css  html 

2つのdivが並んでいるdiv（#wrapper）があります。 right-divを垂直に揃えたいのですが。メインラッパーでvertical-align：middleを試しましたが、機能しません。それは私を夢中にさせています！ 誰かが助けてくれることを願っています。 http://cssdesk.com/LWFhW HTML： <div id="wrapper"> <div id="left-div"> <ul> <li>One</li> <li>Two</li> </ul> </div> <div id="right-div"> Here some text... </div> </div> CSS： #wrapper{ width:400px; float:left; height:auto; border:1px solid purple;} #left-div{ width:40px; border:1px solid blue; float:left;} #right-div{ width:350px; border:1px solid red; float:left;} ul{ list-style-type: none; padding:0; margin:0;}

89 html  css 

半透明のdivが画面全体をカバーするようにしようとしています。私はこれを試しました： #dimScreen { width: 100%; height: 100%; background:rgba(255,255,255,0.5); } しかし、それは画面全体をカバーするのではなく、div内の領域のみをカバーします。

89 css 

CSSでは、静的（デフォルト）配置と相対配置の違いは何ですか？

89 css  static  positioning  css-position 

table-layout: fixed幅が設定されたhtmlテーブルとtdがあります。列は、スペースを含まないテキストのコンテンツを保持するために引き続き展開されます。各tdの内容をdivでラップする以外にこれを修正する方法はありますか？ 例：http：//jsfiddle.net/6p9K3/29/ <table> <tbody> <tr> <td style="width: 50px;">Test</td> <td>Testing 1123455</td> </tr><tr> <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> <td>B</td> </tr> </tbody> </table> table { table-layout: fixed; } td { border: 1px solid green; overflow: hidden; } この例では、幅が50pxに明示的に設定されているにもかかわらず、AAAAAAAAAAAA ...の列が展開されていることがわかります。

89 html  css 

編集： 画面が480px幅未満に縮小されたときに、どのセレクターがサイドパディングを設定するかを尋ねる必要がありますか？私はこれを見つけるためにしばらくbootstrap-responsiveness.cssを閲覧してきましたが、これに影響を与えるものは何もないようです。 オリジナル 私は基本的に、小さなデバイス画面での応答性のために設定されたデフォルトのパディングまたはマージンを削除したいと思います。 私がしているbackground colorに上書きcontainer-fluidセレクタと大画面のために、彼らは幅にわたって完全に100％をレンダリングするが、それらの画面が小さいサイズに縮小され、デフォルトでは、ブートストラップは、上のマージンやパディングを追加しているようですcontainer-fluidかcontainer。 <div class="container-fluid"> <div class="row-fluid"> test </div> </div> カスタムcssを使用してBootstrapのデフォルトのスタイルを上書きする場合、小さい画面でこのパディングを削除するには、どのメディアクエリまたはセレクターに上書きする必要がありますか？

89 css  twitter-bootstrap  responsive-design  media-queries 

私は3つのdiv要素を持っています。 1番目divは大きく（ラップ）、position:relative; 2番目divは1番目のdiv相対位置に対して絶対的に配置されます（そして1番目に含まれますdiv） 3番目divは2番目に含まれ、div絶対位置もあります。 <div id="1st"> <div id="2nd"> <div id="3rd"></div> </div> </div> 相対位置を持つ1番目ではなく、3div番目の位置が2番目div（1番目の絶対位置でもある）に対して絶対的であるのはなぜですか？divdiv 3番目divは絶対位置の2番目への絶対位置だからdivです。

89 html  css  css-position 

方法W3Schoolsのはそれフレーズを、彼らは同じに聞こえます。 W3SchoolsのCSSリファレンス div + p<p>要素の直後に配置される すべての要素を選択し<div>ます div ~ p<p>要素が前にある すべての要素を選択し<div>ます <p>要素が要素の直後にある場合、<div>それは<p>要素の前に要素があることを意味しません<div>か？ とにかく、与えられた要素の直前にある要素を選択できるセレクターを探しています。

89 css  css-selectors 

私は現在、会社のモバイルランディングページに取り組んでいます。これは本当に基本的なレイアウトですが、ヘッダーの下には常に100％の幅になる製品の画像があります（デザインは常に端から端まで行くことを示しています）。画面の幅に応じて、画像の高さは明らかにそれに応じて調整されます。私はもともとimg（CSS幅100％）でこれを行いましたが、うまく機能しましたが、メディアクエリを使用して、さまざまな解像度に基づいてさまざまな画像を提供したいと思いました。たとえば、同じ画像の大きなバージョン。CSSでimgsrcを変更できないことはわかっているので、HTMLのimgタグではなく、画像にCSSの背景を使用する必要があると考えました。 背景画像のdivは背景を表示するために幅と高さの両方を必要とするため、これを適切に機能させることができないようです。明らかに「幅：100％」を使用できますが、高さには何を使用しますか？150pxのようなランダムな固定高さを設定すると、画像の上部150pxが表示されますが、固定高さがないため、これは解決策ではありません。私は遊びをして、高さがあれば（150pxでテスト）、「background-size：100％」を使用して画像をdivに正しく合わせることができることを発見しました。このプロジェクトはモバイルのみを対象としているため、最新のCSS3を使用できます。 以下に大まかな例を追加しました。インラインスタイルを失礼しますが、質問をもう少し明確にするための基本的な例を示したいと思いました。 <div id="image-container"> <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> </div> コンテナdivにページ全体に基づいてパーセンテージの高さを指定する必要があるのでしょうか、それともこれを完全に間違って見ているのでしょうか。 また、CSSの背景がこれを行うための最良の方法だと思いますか？たぶん、デバイス/画面の幅に基づいて異なるimgタグを提供する手法があります。一般的な考え方は、ランディングページテンプレートはさまざまな製品画像で何度も使用されるため、これを可能な限り最善の方法で開発する必要があります。 申し訳ありませんが、これは少し時間がかかりますが、このプロジェクトから次のプロジェクトへと行ったり来たりしているので、この小さなことをやりたいと思います。よろしくお願いします。よろしく

89 html  css  background-image  responsive  responsive-images 

境界線のある2つのdivが隣り合っているとします（https://chrome.google.com/webstore/category/homeを参照してください）。 私のdivが二重の境界線を持っているように見えるのを防ぐ方法（できればCSSトリック）はありますか？私が何を意味するかをよりよく理解するためにこの画像を見てください： 2つのdivが出会う場所で、二重の境界線があるように見えることがわかります。

89 css 

順序付けられていないリストを<li>固定幅に中央揃えするにはどうすればよいdivですか？ <table width="100%"> <tbody> <tr> <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td> <td width="59%"><p align="left"> </p> <h1 align="left">StudioTeknik.com</h1> <p><br align="left"> <strong>Marc-André Ménard</strong></p> <ul> <li>Photographie digitale</li> <li>Infographie </li> <li>Débug et IT (MAC et PC)</li> <li> Retouche </li> <li>Site internet</li> <li>Graphisme</li> </ul> <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p> <p …

88 css  html  html-lists