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

次のように、コンテナーdiv内に3つのdivを配置したいと思います。 [[LEFT] [CENTER] [RIGHT]] コンテナーdivは100％幅（設定された幅なし）であり、コンテナーのサイズを変更した後、中央のdivは中央にとどまる必要があります。 だから私は設定しました： #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} しかし、次のようになります。 [[LEFT] [CENTER] ] [RIGHT] 任意のヒント？

392 html  css  flexbox  alignment  css-float 

divを折りたたみから展開（およびその逆）にするにはどうすればよいですか？ 私が目にするほとんどすべては常に左から右です。

390 jquery  html  css  jquery-ui  position 

たとえば、MS WordのA4サイズのページのようにHTMLページを動作させることはできますか？ 基本的に、ブラウザーでHTMLページを表示し、A4サイズのページのサイズでコンテンツの輪郭を描けるようにしたいと考えています。 簡単にするために、HTMLページにはテキストのみが含まれ（画像などは含まれず）、<br>たとえばタグはないと想定しています。 また、HTMLページを印刷すると、A4サイズの紙ページになります。

388 html  css  printing 

これはおそらくばかげた質問ですが、画像を中央に揃える通常の方法が機能していないので、私は尋ねると思いました。コンテナーdiv内で画像を（水平に）中央揃えにする方法はありますか？ これがHTMLとCSSです。サムネイルの他の要素のCSSも含めました。降順で実行されるため、最高の要素はすべてのコンテナであり、最低の要素はすべての内部です。 #thumbnailwrapper { color: #2A2A2A; margin-right: 5px; border-radius: 0.2em; margin-bottom: 5px; background-color: #E9F7FE; padding: 5px; border: thin solid #DADADA; font-size: 15px } #artiststhumbnail { width: 120px; height: 108px; overflow: hidden; border: thin solid #DADADA; background-color: white; } #artiststhumbnail:hover { left: 50px } <!--link here--> <a href="NotByDesign"> <div id="thumbnailwrapper"> <a …

388 html  css 

CSSで背景画像のサイズを設定することは可能ですか？ 私は次のようなことをしたいです： background: url('bg.gif') top repeat-y; background-size: 490px; しかし、それをそのようにするのはまったく間違っているようです...

386 css 

3 x 3のテーブルがあります。すべての行の下部に境界線を追加しtrて、特定の色を付ける方法が必要です。 最初に私は直接的な方法、すなわち： <tr style="border-bottom:1pt solid black;"> しかし、それはうまくいきませんでした。だから私はこのようなCSSを追加しました： tr { border-bottom: 1pt solid black; } それでもうまくいきませんでした。 styleすべての行に属性を追加する必要がないため、CSSを使用したいと思います。にborder属性を追加していません<table>。それが私のCSSに影響を与えないことを願っています。

386 html  css  html-table 

StackOverflowには、offsetWidth / clientWidth / scrollWidth（および-Height）に関するいくつかの質問がありますが、それらの値の包括的な説明はありません。 また、Webには、混乱または不正確な情報を提供するソースがいくつかあります。 いくつかの視覚的なヒントを含む完全な説明を提供できますか？また、これらの値を使用してスクロールバーの幅を計算するにはどうすればよいですか？

385 html  css  dom 

私はを使用gulpして、変更とブラウザーの同期を維持するためのコンパイルとブラウザーの同期に使用するWebサイトに取り組んでいます。 gulpタスクはすべてを適切にコンパイルしますが、Webサイトではスタイルを確認できず、コンソールに次のエラーメッセージが表示されます。 ' http：// localhost：3000 / assets / styles / custom-style.css 'からのスタイルの適用は拒否されました。MIMEタイプ（ 'text / html'）はサポートされているスタイルシートMIMEタイプではなく、厳密なMIMEチェックが有効になっているためです。 今、私はこれがなぜ起こるのか本当に理解していません。 HTMLには次のようなファイルが含まれています（これは正しいと確信しています）。 <link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/> そしてスタイルシートは今のところBootstrapとfont-awesomeスタイルの融合です（まだカスタムはありません）。 これもフォルダ構造なので、パスも正しいです。 index.html assets |-styles |-custom-style.css しかし、エラーが発生し続けます。 どうなり得るか？これはおそらくgulp / browsersyncの何かですか？

383 html  css  gulp  mime-types  browser-sync 

順不同リスト内： <li><span></span> The lazy dog.</li> <li><span>AND</span> The lazy cat.</li> <li><span>OR</span> The active goldfish.</li> クラスまたはスタイル属性の追加は許可されていますが、テキストのパディングおよびタグの追加または変更は許可されていません。 ページはCourier Newでレンダリングしています。 目標は、スパンを揃えた後にテキストを配置することです。 The lazy dog. AND The lazy cat. OR The active goldfish. 「OR」の正当化は重要ではありません。 怠惰な動物のテキストは追加の要素でラップされる場合がありますが、再確認する必要があります。

381 html  css 

imageUrl変数に画像のURLがあり、jQueryを使用してそれをCSSスタイルとして設定しようとしています： $('myObject').css('background-image', imageUrl); これは機能していないようです： console.log($('myObject').css('background-image')); を返しますnone。 何か考え、私は間違っているのですか？

379 javascript  jquery  css 

css3を使用してsvg要素にドロップシャドウを設定することは可能ですか？ box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; フィルター効果を使用して影を作成することについていくつかの発言を見ました。CSSを単独で使用する例はありますか？以下は、cusorスタイルが正しく適用されているが、影の効果がない実際のコードです。最小限のコードでシャドウ効果を得るのを手伝ってください。 svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70"> <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" /> </svg> …

379 html  css  svg  svg-filters 

次のページ（デッドリンク：）http://www.workingstorage.com/Sample.htmに、ページの下部に配置できないフッターがありました。 フッターにしたい ページが短く、画面がいっぱいにならない場合は、ウィンドウの下部に固定します。 （コンテンツを重ねるのではなく）1画面以上のコンテンツがある場合は、ドキュメントの最後に留まり、通常どおり下に移動します。 CSSは継承され、私を困惑させます。コンテンツの高さを最小限にしたり、フッターを一番下にしたりするように適切に変更できないようです。

379 css  footer 

私は次のようなコンテナを備えたシンプルなフレックスボックスのレイアウトを持っています： .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } 次に、最後の行のアイテムを他のアイテムと揃えます。 justify-content: space-between;グリッドの幅と高さを調整できるため、使用する必要があります。 現在のように見えます ここでは、右下のアイテムを「中央の列」に入れたいと思います。それを達成する最も簡単な方法は何ですか？これは、この動作を示す小さなjsfiddleです。 .exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px …

378 css  flexbox  grid-layout 

Bootstrap 3のデフォルトのナビゲーションバーを、テキストのブランド設定ではなく、イメージのロゴとともに使用したい。さまざまな画面サイズで問題を引き起こさずにこれを行う適切な方法は何ですか？これは一般的な要件だと思いますが、良いコードサンプルはまだ見ていません。すべての画面サイズで適切な表示ができること以外の重要な要件は、小さい画面でのメニューの折りたたみ性です。 navbar-brandクラスが含まれるAタグ内にIMGタグを挿入するだけで、メニューがAndroidフォンで正しく機能しなくなりました。また、navbarクラスの高さを上げてみましたが、それによってさらに混乱しました。 ちなみに、私のロゴ画像は、ナビゲーションバーの高さよりも大きくなっています。

376 css  twitter-bootstrap  twitter-bootstrap-3  navbar 

これらのネストされたdivがあり、内部のDIVに対応するためにメインコンテナーを（高さで）展開する必要があります <!-- head --> ... <!-- /head --> <body class="main"> <div id="container"> <div id="header"> <!--series of divs in here, graphic banner etc. --> </div> <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs --> <div id="items_list" class="items_list ui-sortable"> <div id="item_35" class="item_details"> </div> <div id="item_36" class="item_details"> </div> <div id="item_37" …

376 css  height