![]()
- firefoxとIEの背景画像の位置を合わせる
背景画像の中央にテキストがくるよう指定するのに、CSSでline-heightで調整しています。 firefoxではピタリと中央にきますが、IEだと少しずれます。 paddingで調整するとIEだと中央にきますが、firefoxだと少しずれます。 両ブラウザー共にテキストを中央配置する方法を教えてください。 よろしくお願いします。
- ブラウザのウインドウ下部に画像を固定する方法
Webプログラミングに関する質問です。 ブラウザのウインドウ下部に画像を固定する方法があれば教えて下さい。 例になるサイトが無くて申し訳ないのですが、 まず、webブラウザのウインドウ一面にスクロールなしで画像Aを配置し、 その画像に重なるように、もう一枚の画像B(バナーのような横長のもの)を ウインドウの底に固定させて配置する方法がわかりません。 「ウインドウのサイズを変更させることで、画像Aが画像Bの下に隠れる」 というページを作りたいのですが、 知恵不足でつまずきました。 説明が下手で申し訳ありませんが、 分かる方がいらっしゃいましたら、よろしくお願いします。
- FireFoxでMacとWinで表示がずれる
FIreFoxはver3.6.13です。（他のバージョンでは試していないので不明です） Macで見た時とWinで見た時で、同じサイトの表示がずれます。 オブジェクトとオブジェクトの空きスペースが違っています。 これは何故でしょうか？ まったく同じソースコードなのですが。。 よろしくお願いいたします。
- ベストアンサー
- noname#179453
- HTML
- 回答数1
- CSSシグネチャ
CSSシグネチャと言う言葉を最近知り、調べたのですがいまひとつメリットというか、意味が分かりません。 どんな優位性があるのでしょうか？
- ベストアンサー
- tarono0123
- HTML
- 回答数2
- CSSシグネチャ
CSSシグネチャと言う言葉を最近知り、調べたのですがいまひとつメリットというか、意味が分かりません。 どんな優位性があるのでしょうか？
- ベストアンサー
- tarono0123
- HTML
- 回答数2
- a:visitedの対応状況
bloggerでcssを書いているのですが、 li.archivedate a{ background:url('./hiyoko_close.gif') no-repeat; padding-left:1em; } li.archivedate a:visited{ background:url('./hiyoko_open.gif') no-repeat; padding-left:1em; } ↑いまここです。 visitedをきちんと表示させたいのですが、Macのchrome8とMac Safari5では色は変わるのですが、backgroundの画像がaのまま(hiyoko_close.gif)です。 winではIE6.0 FF3.6で確認したところ、意図したとおりに表示されてはいるのですが、WinChromeとWinSafariではどうなんでしょうか？ また、 li.archivedate a:visited:before{ content:url('./hiyoko_open.gif') no-repeat; padding-left:0em; } などとして行頭の文字だけアイコンで置き換えることは不可能でしょうか？ visitedとbeforeを両方指定するのはむりですか？(:beforeはIE6は非対応のようですが）
- ベストアンサー
- noname#127176
- HTML
- 回答数5
- htmlでのfloatを解除すると 親要素も解除に
だだいま、ホームページを作成中です。 現在、 ＿＿＿＿＿＿＿ | | ￣￣￣￣￣￣￣ |￣| |￣￣|aabbcc |親| | |aabbcc |要| | | |素| ￣￣ | |★ |＿| ddeeff ddeeff float:leftを使って二重で回り込みを させています。 上記の aabbcc aabbcc の部分で floatを解除させるために clear:leftをすると、 親要素のfloatも解除されてしまします。 次に入力する文章の ddeeff ddeeff を「★の場所」に表示されるようにしたいのですが、 親要素のfloatが解除された場所に表示されてしまいます。 cssの仕様で、 floatの解除をすると、親要素まで解除されるということですが 何か、解決する良い方法はないでしょうか？？ どなたか、ご教授お願いします。
- ベストアンサー
- infumi1126
- HTML
- 回答数5
- IE6でのxml宣言について
IE6で先頭にxml宣言をいれると後方互換モードに切り替わってしまいますが、xml宣言をとらずに標準モードにする方法はないですか? utf-8の場合は省略できるというのはわかっていますが、これ以外の方法でお願いします。
- IE8だと内側に線が引かれてしまいます。
ブラウザ IE8 スタイルシートで例として ------------------------ h3{ width:230px; height:60px; background:#000; border:3px double #000; color: #ffffff; } ----------------------- このように背景と線の色を同じにすると内側に線が引かれるので２重線になりません。 IE7だと外側に線が引かれるので綺麗な2重線になるのですが・・・ IE8でも外側に線を引くことは可能なのでしょか？ 宜しくお願い致します。
- DIVタグの背景に画像を配置できない
<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。
- shift_jis にするとＣＳＳを読まない
フォームメールのページ送信すると文字化けが起こるので、utf-8からshift_jisに変えたところ 今度は外部ＣＳＳを読まうず、ＩＥ,firedoxでレイアウトが崩れてしまいます。 なんとかならないでしょうか？
- ベストアンサー
- kurobon619
- HTML
- 回答数1
- DIVタグの背景に画像を配置できない
<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。
- IE6でレイアウトが時々崩れる
お世話になります。 IE6ではCSSのバグがあり、レイアウト崩れは周知のこととは思いますが、 常に崩れるわけではなく、時々崩れる（更新2回に1回ほどの頻度）という現象で、 原因がどこにあるのかわからず困っております。 また、本番サイト上でのみ発生し、該当画面をHTML保存しても、ローカルでは再現しません。 本番サイトと同ソースの開発環境がありますが、こちらも再現しません。 （サイトはphp+smartyで構築しています） 現象としては、左側にメニューエリア、横にメイン表示エリアがありますが、 特定のページのみ、メインエリアがメニューエリアの下にずれてしまいます。 マージンが二倍になってしまうバグかと思い、CSSを修正しましたが改善しません。 開発環境と本番環境での気になる違いは、本番環境ではネットワークの関係で、読込がやや遅いことです。読込レタリングの途中までメニューの横に表示していたのに、何かのタイミングで下へずれてしまいます。 ietesterやMicrosoft Expression Web 3 SuperPreview for Internet Explorerなどを使用して調査しています。 時々崩れるという現象について、 何かアドバイスがありましたら、宜しくお願い致します。
- 締切済み
- mama123456789
- HTML
- 回答数3
- divインラインボックスの改行を制御する方法
皆さん、こんにちは。ちょっと質問させてください。 HTML+CSSでWEBページを作っています。DIVタグで作ったブロックをdisplay:inline-blockでインライン化して表示させているのですが、ウィンドウを小さくするにともなってネストしたインラインボックスが改行されるとき、先に改行されるインラインボックスを強制したいのですが、方法はありますでしょうか？ ちょっと分かりにくいので図を書きました。 ブロックAとブロックBがインラインブロック化されて同じ行に配置されているとします。 更に、そのブロックB内にブロックB1とB2がネストしてインライン化されています。 ここでブラウザのウィンドウを小さくしたとき、chromeではまずブロックAとブロックBのインライン表示部分で改行されて、右下の図のようになりました。 期待しているのはそうではなくて、左下の図のように改行して欲しいのです。 これを強制する記述はありますでしょうか？ よろしくお願いします。
- divインラインボックスの改行を制御する方法
皆さん、こんにちは。ちょっと質問させてください。 HTML+CSSでWEBページを作っています。DIVタグで作ったブロックをdisplay:inline-blockでインライン化して表示させているのですが、ウィンドウを小さくするにともなってネストしたインラインボックスが改行されるとき、先に改行されるインラインボックスを強制したいのですが、方法はありますでしょうか？ ちょっと分かりにくいので図を書きました。 ブロックAとブロックBがインラインブロック化されて同じ行に配置されているとします。 更に、そのブロックB内にブロックB1とB2がネストしてインライン化されています。 ここでブラウザのウィンドウを小さくしたとき、chromeではまずブロックAとブロックBのインライン表示部分で改行されて、右下の図のようになりました。 期待しているのはそうではなくて、左下の図のように改行して欲しいのです。 これを強制する記述はありますでしょうか？ よろしくお願いします。
- HTMLで組織図を作成する方法
HTMLで組織図を作りたいと思っています。 テーブルタグは使用しないで、リストかボックスで組み合わせたいのですが、なかなか上手くいきません。 どんなタグが良いでしょうか？ アドバイスをお願いします。 ※線は背景で画像を配置しますので、省いてください。
- 親html内の要素を新しいウィンドウで表示するには
宜しくお願い致します。 親htmlとして閲覧している時には表示されない特定のdiv要素を「表示する」といったようなボタンをクリックすることで、子ウィンドウに読み込ませて表示させることができるコードを探しております。 通常、親htmlから子ウィンドウを表示させるには、子ウィンドウに読み込むhtmlファイルを別に用意し、親htmlから子ウィンドウを表示させるのが普通かと思うのですが、事情があり、子ウィンドウ用のhtmlを用意できません。 なので、親htmlに子ウィンドウとして読み込ませるdiv要素を書き、親htmlとして閲覧している時はdisplay:none;のような感じで非表示にしておき、「子ウィンドウを開く」などといったボタンをクリック、子ウィンドウに親htmlに書かれているdiv要素を読み込んで表示させる、というようなことはできないものかと思っております。 やりたいことが抽象的で、検索しても思うような事例が見つからないため、こちらで質問させて頂きました。 子ウィンドウを開くためのコードは下記のようになっております。 ■親html <html> <head> <script type="text/javascript"> <!-- function gene_window(mypage, myname, w, h, scroll) { var win_width = (screen.width - w) / 2; var win_height = (screen.height - h) / 2; win_detail = 'height='+h+',width='+w+',top='+win_height+', left='+win_width+',scrollbars='+scroll+',resizable' win = window.open(mypage, myname, win_detail) if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); } } --> </script> </head> <!--普通に表示する部分--> <div> <a href="●●" onClick="gene_window(this.href, 'name','500','400','yes');return false;">子ウィンドウを開く</a> </div> <!--子ウィンドウとして表示したい部分※親htmlでは非表示--> <div style="display:none">hogehoge</div> </body> </html> 子ウィンドウを開くと、<div style="display:none">hogehoge</div>の部分だけが子ウィンドウに読み込まれ、<div>hogehoge</div>として表示される。 分かりにくい説明で申し訳ありません。 補足説明致しますので、もしお分かりの方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。
- ベストアンサー
- patsaysnow
- JavaScript
- 回答数1
- サイドバーとコンテンツの高さをそろえるには
こんにちは。 自分のホームページを作っているのですが、 サイドバー（navi）とコンテンツの高さを合わせられず、困っています。 どなたか詳しい方、教えて頂けないでしょうか。 <div id="container"> <div id="contents"></div> <div id="navi"></div> </div> として、floatでコンテンツを右、naviを左に配置。 ボーダーは、containerの左右に実線 navi の右に実線をしていますが、 naviがcontentよりも短いと、図の左のように線がかけてしまいます。 背景色は白で、ボーダーで区別をしたいのですが、 navi と、コンテンツの高さを自動で合わせるにはどうすればいいでしょうか。 検索で調べてみると、背景色を利用したものやJavaを使ったモノなど様々で、 僕の利用用途に合わないので困っています。 どうぞよろしくお願いします。
- ナビゲーションボタンについて
どうぞ、よろしくおねがいします。 ホームページを作る際に、 「TOP」ですとか「Q&A」といったページなどに誘導する ナビゲーションボタンがありますが、 これは、普通にボタン用の画像を貼り付けて、 それにリンクを貼って並べる、というやり方は一般的ではないのでしょうか？ 色々なサイトのソースを見て調べているのですが、 このようなやり方で記述されているサイトがなく、 質問させていただきました。
- IE6でレイアウトが時々崩れる
お世話になります。 IE6ではCSSのバグがあり、レイアウト崩れは周知のこととは思いますが、 常に崩れるわけではなく、時々崩れる（更新2回に1回ほどの頻度）という現象で、 原因がどこにあるのかわからず困っております。 また、本番サイト上でのみ発生し、該当画面をHTML保存しても、ローカルでは再現しません。 本番サイトと同ソースの開発環境がありますが、こちらも再現しません。 （サイトはphp+smartyで構築しています） 現象としては、左側にメニューエリア、横にメイン表示エリアがありますが、 特定のページのみ、メインエリアがメニューエリアの下にずれてしまいます。 マージンが二倍になってしまうバグかと思い、CSSを修正しましたが改善しません。 開発環境と本番環境での気になる違いは、本番環境ではネットワークの関係で、読込がやや遅いことです。読込レタリングの途中までメニューの横に表示していたのに、何かのタイミングで下へずれてしまいます。 ietesterやMicrosoft Expression Web 3 SuperPreview for Internet Explorerなどを使用して調査しています。 時々崩れるという現象について、 何かアドバイスがありましたら、宜しくお願い致します。
- 締切済み
- mama123456789
- HTML
- 回答数3