- ベストアンサー
背景画像をブラウザ上部に隙間なく張る
HTML タグだと思うのですが、たとえば88×38 の画像を ブラウザ画面上部に隙間をあかないように貼るにはどうしたらいいのでしょうか。 例えば以下のように、 <TABLE border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#63cf63" background="gif/line.gif"> とかやると、いっけん、きっちり貼れているように 見えるのですが、リロードしたり、リンクからページを たどったりすると、時々画面右側が丁度スクロールバー ぶんくらいのスペースが空いてしまい、白く抜けて しまいます。 非常に見苦しいので、なんとかしたいです。。。
- yasu
- お礼率79% (173/218)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは。 いくつか方法あると思いますが、一番簡単なのは、88*38の画像の高さを3000くらいにして、余白をとった画像にしちゃって、<BODY>タグに背景指定する方法かな、と思います。 高さは、縦スクロールが最大に出た場合のページの高さ以上、が目安です（大抵、3000もあれば、事足ります）。 あとは、スタイルシートを使用する、という方法です。 横にだけ繰り返す、縦にだけ繰り返す、など指定できます。 横にだけ繰り返したいのであれば、 <HTML> <HEAD> <TITLE>タイトル</TITLE> <STYLE type="text/css"> <!-- BODY { background: white url(画像URL); background-repeat: repeat-x } --> </STYLE> </HEAD> <BODY> ..... というような感じで、スタイルシートを<HEAD>タグ内に記述します。 『repeat-x』とすると背景画像を横に１列だけ表示できます。縦なら、『repeat-y』に。 ただ、使い方や、ブラウザによってはスタイルシートの機能が使えなかったり、使えても、ユーザ側で使用しない、にチェックしてるとだめなので、微妙・・・・かな。 スタイルシートの詳しい解説については、以下を参照ください。
その他の回答 (2)
- gakushaneko
- ベストアンサー率68% (2350/3407)
<BODY bgcolor="#63cf63" background="gif/line.gif"> これじゃダメ？
お礼
回答ありがとうございます。 上記の方法はやってみたのですが、少なくとも私の環境下 ではだめだったのです。。。
こんばんは。 テーブルはどうも若干隙間が出ちゃったりしますよね。 じゃ、フレームで切っちゃうのはどうですか？ これなら隙間は空かないと思います。 何かもっとまともな方法もありそうですが.... 単に思いつきです。
お礼
回答ありがとうございます。 フレームの方法は最後の最後の手段で考えていました。 他に方法はないものかと探っていたのですが・・・・ やはり手はそうそう残されていないようです。 アドバイス感謝です。
関連するQ&A
- Mozillaで隙間を表示させなくするには？
以下のソースを見てください。 <table> <tr> <td bgcolor="red"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td><img src="1.gif"></td> <td><img src="2.gif" width="100%"></td> <td><img src="3.gif"></td></tr></tbody></table> <table class="side" style="border-left: 1px solid rgb(204, 204, 204); border-right: 1px solid rgb(204, 204, 204); border-bottom: 1px solid rgb(204, 204, 204);" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td align="left" bgcolor="#ffffff"> メニュー </td> </tr></tbody></table> </td> </tr> </table> サイトの横に設置するメニューバーの作成を行っています。バックグラウンドの色は赤でメニュー欄内を白に変換しています。 IEではメニュー欄の周りの囲んでいる線との間に隙間ができずに表示されるのですがMozillaだと隙間が表示され隙間部分に赤色が表示されます。 Mozillaでも隙間を表示させないようにするにはどうしたらいいのでしょうか？
- ベストアンサー
- HTML
- IE以外のブラウザで隙間ができる
お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30"> </td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30"> </td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。
- ベストアンサー
- HTML
- カウンタとその左右につける画像の隙間をなくしたいのですが
カウンタの左右に画像をつけて かわいらしいカウンタにしたいのですが どうしてもカウンタの数字の左右の画像との間に 隙間ができてしまいます。 今は下記のようにテーブルタグでつなげているのですが 完全に隙間をなくすことができません。 どうしたら完全に隙間をなくせますか？ <TABLE Border="0" CellSpacing="0"CellPadding="1"> <TR> <TD> <IMG Src="material/counter_r.gif" Border="0" Width="22" Height="25"></TD><TD><img src="cgi-bin/・・・/count.cgi?gif" Border="0"> </TD> <TD> <IMG Src="material/counter_l.gif" Border="0" Width="22" Height="25"> </TD> </TR> </TABLE> お忙しいところ申し訳ありませんが 教えていただけるとうれしいです。 よろしくお願いします。
- ベストアンサー
- HTML
- tableタグとtableタグの間の余白の消し方について
現在モバイル用のHPを作成しているのですが、 AUで見た際に、tableタグとtableタグの隙間(空白)が出来てしまいます。 tableタグ1個でまとめればどうってことのない問題なのですが、 デザイン上、どうしてもtableタグを分ける必要があるります。 ■以下ソースです。 ************************************* <html> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title>タイトル</title> </head> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#FFFFCC"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> ・ ・ ・ ************************************* ↑の… </table> ←この部分に余白ができます。 <table width="100%" border="0" cellpadding="0" cellspacing="0"> どなたか原因と解決法をご教示いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
- テーブルに設定された画像を差し替える方法を教えてください。
現在、dreamweaverを勉強中です。 そこで以前、これ編集してみれば？といわれたものを掘り出し、編集しているのですがわからないことがあります。 <table width="250" border="0" cellspacing="0" cellpadding="0" background="./img/index-img14.gif"> こういったものの場合「"./img/～」が画像の部分だと思うのですが、どうすれば画像を簡単に差し替えできるのでしょうか？ 手打ちですればなんとかなるとは思いますが、デザイン画面上で差し替えることはできないのでしょうか？ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- HPの背景設定について
こんばんは。 HPの背景を画像にしたいのですが、 全くできないんです・・・ 画像を表示するタグが<img src="○○○">です。 （利用しているHPのサイトで決まっています。） <html> <body background="<img src="○○○">" >←※ここです！ <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=30 WIDTH=650> <TR><TD ALIGN=center BGCOLOR=white><center> <font size="6"><font color="mazenda">～～～</font></body></html> ※のところの背景が表示されるには、どうしたらいいでしょうか？ 大変困ってます(:_;)よろしくお願いします。
- ベストアンサー
- ブログ
- 画像とテーブルの隙間をなくす。
トップページ一番上に画像を配置し、その下に表を載せ、その表の中にコンテンツを掲載しようと思っています。 ソースはこんな感じです。 <IMG src="images/obj_top_main.jpg" width="860" height="210" border="0"> <TABLE border="0" width="860" height="100%" cellpadding="0" cellspacing="0"> <TR> <TD bgcolor="#ffffff">ここにコンテンツ</TD> </TR> </TABLE> この、「画像と表の間」を0にして付けたいのですが、方法がわかりません。 CSSで出来そうな気がするのですが… 方法があれば教えてください。
- ベストアンサー
- CSS
- PHPファイルの画像背景について
PHPファイルでお問い合わせフォームを作りました。 画像背景を入れたいのですが なかなかうまくいきません。 スタイルは共通で以下ファイルを作りました。 <?php //style2.phpで書換え可能とする //背景色 $bgcolor = "#FFFFFF"; //文字色 $textcolor = "#999999"; //リンク色 $linkcolor = "#BC8F8F"; //訪問済リンク色 $vlinkcolor = "#cccccc"; //選択時リンク色 $alinkcolor = "#a48b82"; //フッター文字 $footertext = "(C)○○○○"; //水平線の色 $hrcolor = "#cccccc"; //枠の色(主にPC向け) $bordercolor = "#cccccc"; $style = array( "BODY"=>"<BODY bgcolor=$bgcolor text=$textcolor link=$linkcolor vlink=$vlinkcolor alink=$alinkcolor>" ,"FOOT"=>"<center>$footertext</center>" ,"HR"=>"<HR size=1 color=$hrcolor>" ,"TABLE_S"=>"<table border=1 align=center cellpadding=4 bordercolor=$bordercolor width=240 cellspacing=0><tr><td>" ,"TABLE_E"=>"</TD></TR></TABLE>" ,"TABLE_S2"=>"<table border=1 align=center cellpadding=4 bordercolor=$bordercolor width=480 cellspacing=0><tr><td>" ,"TABLE_S3"=>"<table border=1 align=center cellpadding=4 bordercolor=$bordercolor width=750 cellspacing=0><tr><td>" ); ?> お気づきの点がありましたらよろしくお願いします。
- 締切済み
- PHP
- スタイルシートの書き方
HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな（？）スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか？ 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>
- ベストアンサー
- CSS
お礼
さっそくやってみたら、実にすっきりとできました。 １ヶ月くらい悩んでいた問題なので、感謝感激です。 ２０ポイントくらいしか差し上げられないのが 残念です。 回答誠にありがとうございました。