- ベストアンサー
CSSでセルの縦の指定が・・
ロールオーバーすると背景画像が変わるメニューをスタイルシートで作っています。 背景画像は30×180で、セルの高さと幅も画像に合わせて30×180にしているつもりなのですが・・・ IE6で表示すると思うように出来ているのですが、Mozillaで表示すると縦が30pxより長いような気がします。 どのブラウザでも縦30pxに固定させるにはどうしたらよいのでしょうか。 色々調べたのですがお手上げです。 背景をリピートさせなければ、とりあえず見た目変 は解消できると気が付きましたが、それでは、納得できないので質問させていただきました。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- crepon133
- ベストアンサー率51% (399/776)
No.2です ＞こうしなくちゃダメなんだよという理由を そんなだいそれたことを言えるほどのものではありませのでご勘弁を・・・ 文字の上下位置を line-height: にまかせただけで 他にもっと良い方法があるかもしれません
お礼
>他にもっと良い方法があるかもしれません お言葉に甘えて、待ってみましたが・・・・crepon133さんの解答で十分なのだと思いました。 line-heightはいつも文字に対して％ばかりで、pixel値を入れたことが無かったのです。 文字の位置をline-heightで指定すれば、上下のpaddingは必要なしというのがわかりました。ありがとうございました。 またの機会がありましたらよろしくお願いします。
- partita
- ベストアンサー率29% (125/427)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> → <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 試しいませんが、上記のように変更してみてはどうでしょうか。
お礼
そういう所で表示が変わったりするのかと、自分の勉強足りなさにドキ！っとしました。 残念ながら、表示は変わりませんでしたが、解答ありがとうございます。
関連するQ&A
- css：背景の縦長グラデーション画像がブラウザの高さによって伸び縮み？
http://www.cyberagent.co.jp/index.html このサイトのように、グラデーションのかかった背景画像を使用する場合についてお願いします。 例えばこのサイトだと、「画像がブラウザの高さに合わせて縦に伸びている」と…見えるのですが、実際はどうなっているのでしょうか？ 自分で、グラデーション画像を作って background: url(back.jpg) repeat-x （もしくはno-repeat）のように指定しても、 元画像back.jpgの高さにしかならず、フッターあたりは空いてしまって白地になるのですが。。 （画像の高さが600pxで、ブラウザが800pxだったら、下に200px空いてしまうということ） 何か指定すべきプロパティなどあれば教えてください！
- ベストアンサー
- HTML
- html/css について質問です。
現在、htmlとcssを勉強しながら、トップページのコーディングしています。 以下の処理を行っています。 〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。 〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。 〇javaScriptでランダムにトップの画像を表示している。 しかし、３点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、 上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか？ ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、 この範囲がブラウザを大きくすると消えて見えなくなります。 だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか？ ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか？ どなたかご指導お願いします。 [html] <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.jpg)"; bgc[1] = "url(../image/bg2.jpg)"; bgc[2] = "url(../image/bg3.jpg)"; bgc[3] = "url(../image/bg4.jpg)"; bgc[4] = "url(../image/bg5.jpg)"; n = Math.floor(Math.random()*bgc.length); document.body.style.backgroundImage = bgc[n] </SCRIPT> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> </div> </body> [css] #container{ width:100%; height:100%; } #top_header{ background-image: url(../image/top_header.gif); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ background-image: url(../image/top_footer.gif); height: 42px; bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; }
- ベストアンサー
- CSS
- CSSでの２つの背景画像指定
現在、Wordpressでサイトを運営しています。 既に背景画像を以下の感じで指定しています background:#f0f0f0 url(images/背景画像) repeat; そこで、この背景画像を残した状態で、新たに左側に20px幅程度の画像を 上から下までfixedで付け足したいと考えております。 ところが、現在の背景画像を残したままでどうしても画像の追加が出来ません。 たとえば、上記CSSタグに追加で background: url(images/追加画像) repeat-y fixed left top; を記述しますと、最初の画像が消えてしまいます。 両方の画像を有効にするには、どのような記述にすればよいのか アドバイスを宜しくお願い致します。
- ベストアンサー
- CSS
- CSSの設定でわからない箇所があります。
CSSの設定でわからない箇所があります。 ベタ塗りの背景画像と本文エリアのページ両端をドロップシャドウ効果で 縦にリピートするライン画像の背景を使用したいのですが、 途中でドロップシャドウの線が止まってしまいます。 <body> <div id="wrapper"> <div id="header"></div> <div id="main"></div> <div id="footer"></div> </div> </body> のように指定して、 body { background-image: url(img/back.gif); background-repeat: repeat; } と #wrapper { width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-image: url(img/shadow.png); background-repeat: repeat-y; } のように設定しました。 そうすると、footerエリアは#wrapper内なので、 指定したドロップシャドウのラインの背景がブラウザ画面を拡大すると切れてしまいます。 ブラウザのサイズ、拡大縮小に関係なく、ページ最下部までドロップシャドウの背景を伸ばしたいです。 ＊back.gif＝（ベタ塗り背景）。shadow.png＝（ドロップシャドウ効果のライン）です。 それら背景をブラウザのサイズ関係なく最下層まで切れずに表示させたいです。（高さが50pixでも1000pixでも表示させたいです。） ＊ページは中央配置、横幅は固定、縦は各ページで成り行きにしたいです。 ＊現在背景は、ベタ塗りの背景画像と、ドロップシャドウ効果のラインの背景画像の２種を使用しています。設定方法、CSSの適用場所は選びません。 以上、ご教授下さい。 宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- css
プリント時のCSS設定についておたずねします。 現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。 これを印刷時にはbodyに指定している背景画像を非表示にして 印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。 別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ そもそもなぜこのような事がやりたいのかというと コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。 背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、 一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。 ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に グラデが表示されてしまうという事です。
- 締切済み
- ホームページ作成ソフト
- サイズ指定したテーブルを縦に並べるとセルがズレる
色々と試しているんですが解決できないので教えてください。 CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容（テキストの長さ）によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。 .menu-table{ width:500px; padding:0px; border-collapse:collapse; } .menu-title{ margin:0px; padding:5px; border:1px solid #ff9900; } .menu-img{ width:110px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style1{ width:70px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style2{ width:300px; margin:0px; padding:5px; } .menu-style3{ margin:0px; padding:5px; } <table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table"> <tr> <td colspan="3" class="menu-title">商品名</td> </tr> <tr> <td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td> <td class="menu-style1">説明1</td> <td class="menu-style2">あいうえお</td> </tr> <tr> <td class="menu-style1">説明2</td> <td class="menu-style2">かきくけこ</td> </tr> <tr> <td class="menu-style1">価格</td> <td class="menu-style2">\1,000￥</td> </tr> <tr> <td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td> </tr> </table> こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。
- 締切済み
- CSS
- IE6とXHTML+CSS
外部スタイルシート＋XHTMLでサイトを作成したのですがその際メニュー項目のロールオーバーのオーバー時がIE7だと正常に見えるのですがIE6だとオーバー時の画像が消えてしまいます。その部分の外部スタイルシートとXHTMLをそれぞれ記述するので詳しい方アドバイスお願いします！ちなみにメニューボタンの高さは一緒で幅はそれぞれ違います。 <XHTML> <div id="sabNavi"> <ul> <li class="smenu01"><a href="#">サイトマップ</a></li> <li class="smenu02"><a href="#">プライバシーポリシー</a></li> <li class="smenu03"><a href="#">お問合せ</a></li> </ul> </div> <外部スタイルシート> #sabNavi{ width:300px; } #sabNavi a{ height:20px; display:block; text-indent:-9999px; } #sabNavi a:hover{ background-position:0 -20px; } .smenu01 a{ background:url(images/btn_sitemap.gif) no-repeat 0 0; width:71px; } .smenu02 a{ background:url(images/btn_privacy.gif) no-repeat 0 0; width:108px; } .smenu03 a{ background:url(images/btn_information.gif) no-repeat 0 0; width:55px; } .smenu01:hover{ background:url(images/btn_over_sitemap.gif) no-repeat 0 0; } .smenu02:hover{ background:url(images/btn_over_privacy.gif) no-repeat 0 0; } .smenu03:hover{ background:url(images/btn_over_information.gif) no-repeat 0 0; }
- 締切済み
- HTML
- ＣＳＳでの背景の指定について質問いたします。
ＣＳＳでの背景の指定について質問いたします。 background: url(../img/bg.gif) 0 -36px repeat-y; この場合の、0 -36px はどのような意味ですか？ 背景画像の位置の指定なのでしょうが、具体的にどのように指定しているものなのか 教えていただけませんか？ よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSS/背景画像をセンタリングした際に、スクロールバーの有無で位置が変わってしまうのを防ぐには？
背景画像を中央で縦に並べる形でサイトを作っております. background-repeat:repeat-y; background-position:50%（或いはcenter) ページによって、スクロールバーの有無があるのですが、これによって（バーの幅による）中央の背景位置に微妙なズレが生じてしまいます。 フレーム使用のため少々対応に困っております. スクロールバーをどのページでも出す、背景画像をpx指定、これ以外に何か方法はあるものでしょうか？ よろしければお教えいただければありがたく思います.
- 締切済み
- HTML
- ＣＳＳについての質問です。
WEBサイト製作で使うCSSについての質問です。 結論からいうと「background」での背景画像が表示できません。 HTMLバージョンは「HTML4.01 Transitional」です。 形式は div#menu li { width: 180px; height: 40px; ⇒background: #555 url(img/ooo.png) no-repeat; margin: 0px; padding: 3px 0px 0px 0px; } です。 この命令の１こ前と１こ後はちゃんと正常に反映されているのですが、 この背景画像だけが表示できません。 ボックスと背景画像の大きさは合わせています。 色々直してみたりしたのですがさっぱりです。 回答お待ちしています。よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
補足
解答ありがとうございます！ ちゃんと表示されました！ すこしお話を伺いたいのですが・・・ 自分でもtext-decoration: none;やmargin: 0px;を付けてもダメだった記憶があるのです。 こうしなくちゃダメなんだよという理由をご伝授いただけませんでしょうか？ よろしくお願いいたします。