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

position: absoluteフローから要素がポップされ、隣接する要素との相互作用が停止することはわかっています。 これを達成するために他にどのような方法がありますか？

83 css 

サーブレットをJSPに転送しているときに、CSSと画像の読み込み、および他のページへのリンクの作成に問題があります。具体的には、をに設定<welcome-file>するindex.jspと、CSSが読み込まれ、画像が表示されます。私は私を設定する場合は、<welcome-file>するためにHomeServlet前方に制御するindex.jsp、CSSが適用されていないと私の画像が表示されていません。 私のCSSファイルはにありweb/styles/default.cssます。 私の画像はにありweb/images/ます。 私は次のようにCSSにリンクしています： <link href="styles/default.css" rel="stylesheet" type="text/css" /> 次のように画像を表示しています。 <img src="images/image1.png" alt="Image1" /> この問題はどのように発生し、どうすれば解決できますか？ 更新1：アプリケーションの構造と、役立つ可能性のあるその他の情報を追加しました。 このheader.jspファイルは、CSSのリンクタグを含むファイルです。HomeServlet私として設定されているwelcome-file中web.xml： <welcome-file-list> <welcome-file>HomeServlet</welcome-file> </welcome-file-list> サーブレットは、次のように宣言およびマップされますweb.xml。 <servlet> <servlet-name>HomeServlet</servlet-name> <servlet-class>com.brianblog.frontend.HomeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HomeServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> 更新2：最終的に問題が見つかりました-サーブレットが正しくマップされていませんでした。どうやらサーブレットを自分の<welcome-file>ものとして設定すると、URLパターンを設定できなくなります。これ/はサイトのルートディレクトリを表していないので、ちょっと奇妙だと思います。 新しいマッピングは次のとおりです。 <servlet-mapping> <servlet-name>HomeServlet</servlet-name> <url-pattern>/HomeServlet</url-pattern> </servlet-mapping>

83 css  image  jsp  servlets 

内のすべての要素は、.track-container奇妙な余白やパディングなしで与えられた200pxの高さによって制約され、それぞれが並んできれいに並んでいる必要があります。代わりに、前述のフィドルで発生する奇妙さがあります。 何が原因.album-artworkで.track-infoページの途中まで押し込まれ、どうすれば修正できますか？また、テーブルがこのセットアップ全体にアプローチするためのより良い方法である可能性があることを認めますが、この間違いから学ぶことができるように、上記のコードから問題を理解したいと思います。 .track-container { padding:0; width: 600px; height: 200px; border: 1px solid black; list-style-type: none; margin-bottom: 10px; } .position-data { overflow: none; display: inline-block; width: 12.5%; height: 200px; margin: 0; padding: 0; border: 1px solid black; } .current-position, .position-movement { height: 100px; width: 100%; margin: 0; padding: 0; border: 1px …

83 html  css 

これらのdivのマージンが重複している理由がわかりません。 .alignright {float: right} #header .social {margin-top: 50px;} #header .social a {display: inline-block;} #header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;} #header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;} #header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;} #header .contact span {color: …

83 html  css  margins 

Chromeでcursor：pointerプロパティが適用されているDivに触れると、青いハイライトが表示されます。どうすればそれを取り除くことができますか？ 私は以下を試しました： -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; ただし、カーソルを押したときの青色の強調表示には影響しません。

83 html  css  mobile  touch  highlight 

ユーザーインターフェイスにHTMLとCSSを使用しながらC ++プログラムを開発することは可能ですか？Webkitコンテナを使用したJavascriptでのプログラミングについては知っていますが、C ++開発に非常に興味があります。 Windowsで開発したときはC＃WPFに夢中になりましたが、今はLinuxに移行し、インターフェイスにマークアップを使用するための優れたツールが見つかりませんでした。このために、非常に軽量で使いやすいHTMLとCSSを、C ++コードとWPFのようなものと組み合わせたいと思います。 ああ、もう1つ、Webではなくデスクトップ開発を探しています。

83 c++  html  css  user-interface  desktop-application 

@font-faceユーザーがすでにフォントを持っている場合にブラウザがフォントをダウンロードしないように使用する正しい方法は何ですか？ @ font-faceを使用して、システム（Linux）にすでにインストールされているDejaVuを定義しています。Firefoxはフォントをダウンロードしていませんが、Chromiumは毎回フォントをダウンロードしています。 font squirrelに基づく私のCSSコードとその質問は、次のようになります。 @font-face { font-family: 'DejaVu Serif'; src: url('DejaVuSerif-webfont.eot'); src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg'); font-weight: normal; font-style: normal; } /* ... @font-face definitions for italic and bold omitted ... */ @font-face { font-family: 'DejaVu Serif'; src: url('DejaVuSerif-BoldItalic-webfont.eot'); src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') …

83 css  font-face 

からテストのパフォーマンスへの移行を使用して、css3実験で6000個の小さなdiv要素を移動top: 0しtop: 145pxています。 ハードウェアアクセラレーションを使用しないと、 GoogleChromeでスムーズに実行されます。 ハードウェアを有効にするtranslateZ(0)と、パフォーマンスによるアクセラレーションがひどくなります。 どうしてこんなことに？ これが私のサンプルコードです：http：//dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html 更新（2014-11-13）：この質問はまだ注目を集めているので、最新のハードウェアで提供されているデモでは言及された吃音が表示されなくなったとしても、問題自体はまだ存在しているように見えることを指摘したいと思います。古いデバイスでもパフォーマンスの問題が発生する可能性があります。

82 css  css-transitions  hardware-acceleration 

少しごみのタイトルでごめんなさい。私はこれをよりよく説明する方法を考えることができませんでした。 私は自分のサイトにGoogleFriend Connectメンバーガジェットを実装しようとしています（スキームに入ったばかりで、少なくともテストのために、大幅な再設計なしで実装したいと考えています）。 私の問題は次のとおりです。 メインページ（本体）の90％の幅を持つコンテナdivがあります。この中に、divを右に浮かせ、その幅を300pxに設定し、その中にgoogleガジェットを配置しています。私が欲しいのは、Googleガジェットのdivの左側に残っているスペースの95％をdivで埋められるようにすることです。 pxと％をdivとwidthsと混在させることができるかどうかはわかりません。 これが理にかなっていることを願っています。 ありがとう

82 css 

幅と高さが％のコンテナがあるので、外部要因に応じてスケーリングします。コンテナ内のフォントは、コンテナのサイズに対して一定のサイズにしたいと思います。CSSを使用してこれを行う良い方法はありますか？font-size: x%のみ（100％であろう）元のフォントサイズに応じてフォントをスケーリングすることになります。

82 javascript  css  font-size 

さて、HTMLで<b>タグを使用できることは知っていますが、タグで"weight=bold"使用できる属性はありません<p>か？ それともCSS、またはJavascriptですか？

82 html  css 

アプリにモーダルダイアログがあり、y方向にかなり長くなる可能性があります。これにより、ダイアログのコンテンツの一部がページの下部に隠れてしまうという問題が発生します。 ダイアログが表示されたときにウィンドウのスクロールバーがダイアログをスクロールし、長すぎて画面に収まらないようにしたいのですが、本体はモーダルの後ろに置いたままにしておきます。Trelloを使用している場合は、私が何をしようとしているのかがわかります。 これは、JavaScriptを使用してスクロールバーを制御しなくても可能ですか？ これまでにモーダルとダイアログに適用したCSSは次のとおりです。 body.blocked { overflow: hidden; } .modal-screen { background: #717174; position: fixed; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.9; z-index: 50; } .dialog { background: #fff; position: fixed; padding: 12px; top: 20%; left: 50%; z-index: 10000; border-radius: 5px; box-shadow: 0, 0, 8px, …

82 css  scroll 

一部のプラグインCSSのオーバーライドに問題があります。そのCSSを直接​​編集することは、プラグインの更新のリスクを高めるため、実際にはオプションではありません。 問題：要素には絶対位置があり、元の要素にはtop：0pxがあります。bottom：0pxで上書きしたい。 例のために .element {position:absolute; top:0;} /* in another file */ .my .element {bottom:0;} Firefoxではこれは問題なく動作します（bottom：0が適用されたスタイルです）が、safari / chromeはtop：0を超えていないようです。 この問題を回避することはできますが、クリーンな解決策を考え出すとよいでしょう。

82 css  webkit  css-position 

注意を払う！ このプルリクエストのマージ後、ブートストラップアイコンが元に戻ります。 過去数週間これを行ったり来たりした後、Glyphiconsアイコンフォントをメインリポジトリに復元することにしました。UIにアイコンがどれほど普及しているかを考えると、CSSやJSと同じ場所にアイコン（または他のアイコンフォント）を含めないことは、ほとんどの人にとっておそらく不利益です。 このアップデートには、次のものが含まれます。 ドキュメントを復元します（[コンポーネント]ページ） 新しい変数、@icon-font-pathおよび@icon-font-nameアイコンフォントの追加と削除の柔軟性のために、 最新のグリフィコンへのアップグレード（40個の新しいアイコンの追加） CSSページから古いGly​​phiconsの言及を削除します 将来的には、アイコンフォントのカスタマイズを改善して、フォントライブラリの交換が簡単になるようにする予定です（これが元の削除の全体的な動機でした）。 新しいバージョンのTwitterBootstrapGlyphiconsのCDNURLはどれですか？ Bootstrap 3から、それらは別のリポジトリに移動されましたが、CDNは見つかりませんでした。 公式ドキュメントから： Bootstrap 3のリリースに伴い、アイコンは別のリポジトリに移動されました。これにより、プライマリプロジェクトが可能な限り無駄のない状態に保たれ、アイコンライブラリの交換が容易になり、Bootstrapの外部のより多くの人々がGlyphiconsアイコンフォントをより簡単に利用できるようになります。 上の公式サイト、彼らはアイコンのCDNのURLを提供していません。 どこで見つけることができますか？リポジトリをダウンロードしてプロジェクトに含めたくありません。

82 html  css  twitter-bootstrap  cdn  twitter-bootstrap-3 

これはメニュー用です。 たとえば、3つのスパンを持つdiv要素があり、そのすべてにマージン、最大幅、フロート（左または右）があります。 左側から配置され、次のようになります。次のよう [[span1][span2][span3] - lots of free space here]. に均等にしたい： [[span1] - space - [span2] - space - [span3]] CSSを使用してこれを行うにはどうすればよいですか？それが不可能だと私はちょっと疑っています。 メニュー項目を追加または削除するときに同じスタイルを維持したいことに注意してください。 HTML： <div id="menu"> <span class="menuitem"></span> <span class="menuitem"></span> <span class="menuitem"></span> </div> CSS： #menu { ... width:800px; } .menuitem { display:block; float:left; margin-left:25px; position:relative; min-height:35px; max-width:125px; padding-bottom:10px; text-align:center; }

82 css