自作HPが実家のPCで上手く表示されないんです(´-`)

そのページは、まずフレームで横に分割の後、縦に分割して3分割の状態にし(図1)、上ページに縦分割のフレームページを読み込ませて、全部で4分割されたページです(図2)。
┌───┐
├┬──┤←図1
└┴──┘
┌┬──┐
├┼──┤←図2
└┴──┘
それで、右下フレーム以外のBODYタグ内に「style="overflow-x:hidden;overflow-y:hidden;"」と書き、右下フレームにもスクロールバーの色をオレンジ色に変えるスタイルシートを読み込ませています。
でも実家のPCでは、全フレームにスクロールバーが出ていて、右下フレームのスクロールバーもオレンジ色じゃないんです。

私自身のや学校のPCで表示した時はスクロールバーは出ません。たぶん実家のPCのブラウザ設定に原因があると思います。何か考えられる原因があれば教えて下さいm(_ _)mその他、友達のHPの掲示板(CGI)も表示されなくて、書き込めなくて困ってます。そちらの解決法もあれば教えて下さい。実家のPCはWin98、IE4.0です。バージョンが古いだけでしょうか?

また、自作HPの方で同じような表示になる別の書き方は無いでしょうか?
右下のフレーム以外は飾りみたいな感じです。右上フレームの背景は横に、左下フレームには縦に緑のギザギザが続くようにして、左上フレームの背景は全面が緑色になるようにしています。そして左下フレームにメニューを縦に並べてます。右下フレームにメニューで選んだ内容が表示されます。
(本当はHPのURLを書いた方が早いんでしょうけど…)

やはりフレームを使わない方が良いでしょうか?何か良い案があれば教えて下さい。お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

■スクロールバーの色



 スクロールバーの色がオレンジに表示されないのは、ご自宅のPCのIEのバージョンが古いからのでは?
 IE6.0以前のブラウザでは、スクロールバーの色設定に対応してないと思います。
 ネスケでも対応していません。

■全フレームにでるスクロールバー

 背景画像の縦横サイズを表示しようとブラウザが思っているので、背景画像のピクセル寸法とフレームのピクセル寸法を同じにすれば大丈夫だと思います。

 しかし、それよりもフレームページのソースで編集したほうが便利だと思います。


--全体.htmlのソース

<FRAMESET rows="50%,50%" frameborder="NO">
<FRAME src="上フレーム.html">
<FRAMESET cols="50%,50%" frameborder="NO">
<FRAME src="下左.html" scrolling="NO">
<FRAME src="下右.html" scrolling="AUTO">
</FRAMESET>

 こうするとスクロールバーは、右下のページ以外は
バーが出ません。

 上のフレームは2分割してありますから、


---上フレーム.htmlのソースの一部

<FRAMESET cols="50%,50%" frameborder="NO">
<FRAME src="上左.html" scrolling="NO">
<FRAME src="上右.html" scrolling="NO">
<FRAMESET>

こう直します。


 
    • good
    • 0
この回答へのお礼

スクロールバーの色の方は、対応していないブラウザがまだまだ多い事は十分承知なので、諦めます(^-^)

> SCROLLING="no"
そう言えば、そんなのありましたね!忘れてました(^^;)付け足したら思った通りに表示されました。ありがとうございました!

お礼日時:2002/02/10 12:15

> ネスケだと、TDの背景指定をすると、テーブルの背景を指定しなくてもTDのと同じ背景が指定されるとか聞いたんですけど…


それはないと思います。簡単なHTMLで試しましたが、NN4.7 及び NN6.2 では問題ありませんでした。

それから、フレームのきり方とテーブルについてなんですが、No.3の方法だとNN4で表示が崩れることが分かりました。
なので、フレームは
┌┬──┐
|├──┤
||   |
└┴──┘
となるようにし、左側のHTMLをテーブルで上下に切るとOKのようです。

○フレーム設定
<FRAMESET cols="100,*" border="0" frameborder="no">
 <FRAME src="menu.html" name="menu" noresize scrolling="no">
 <FRAMESET rows="20,*" border="0" frameborder="no">
  <FRAME src="ue.html" name="ue" noresize scrolling="no">
  <FRAME src="main.html" name="main" noresize scrolling="auto">
 </FRAMESET>
</FRAMESET>

○テーブル設定(menu.html)
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" background="縦のギザギザ画像">
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="20" bgcolor="緑色">
<TR><TD><IMG src="space.gif" width="100" height="20"></TD></TR>
</TABLE>
<!-- ここからメニューの内容 -->
       :
</BODY>

※テーブルは中に何か入れないとつぶれてしまうので、透明のGIF画像(ここでは space.gif)を用意し、サイズ指定をして入れてやります。
    • good
    • 0
この回答へのお礼

ありがとうございます!早速そういう風に変えようと思います。

お礼日時:2002/02/12 10:22

> でも、テーブルの背景画像指定って、ネスケで表示する時に変に表示されませんでしたっけ?



TABLE や TD タグの background 属性は、IE3/NN4 以上で有効ですので、たいていの環境では大丈夫だと思います。

あと No.3 の回答で、</FRAMESET> であるべき部分を、間違えて </FRAMEBORDER> と書いてしまいました。
すみません。
    • good
    • 0
この回答へのお礼

あ、詳しく書かなくてすみません。

ネスケだと、TDの背景指定をすると、テーブルの背景を指定しなくてもTDのと同じ背景が指定されるとか聞いたんですけど、じゃぁそれも大丈夫ですか?何回も聞いてしまってすみません。問題無いようならテーブル使おうと思います。

お礼日時:2002/02/10 22:21

スタイルシートは、ブラウザの種類やバージョンによって機能しなかったり、効果が違ったり、バグによって表示に障害が起きたりするので、使用には十分な注意が必要であると共に、スタイルシートが機能しないと表示に支障をきたすようなページ作成は避ける必要があります。



まず overflow-x と overflow-y についてですが、これらの属性は IE5 以上でないと機能しません。
これらは縦横に異なる設定をするために用意された属性でなので、両方に同じ指定をするのであれば、一括して指定を行う overflow (IE4 以上で有効)を使うとよいでしょう。
ただし、フレームごとのスクロールバーの表示制御は、FRAME タグの scrolling 属性で指定するのが一般的です。
また、スクロールバーの色指定を行う scrollbar-XXX-color という属性は、全て IE5.5 以上でないと機能しません。

これより下はアドバイスです。
フレームは分割数が多いほど表示までの時間が遅くなり、サーバーにも負荷がかかります。
説明を読んだ限りでは、フレーム分割を行う HTML が2枚、表示用 HTML が4枚あるように思うのですが、下記のような工夫でフレーム分割 HTML は1枚(図1のもの)、表示用 HTML は3枚に抑えることができます。

○フレーム設定例
<FRAMESET rows="20,*" border="0" frameborder="no">
 <FRAME src="ue.html" name="ue" noresize scrolling="no">
 <FRAMESET cols="100,*" border="0" frameborder="no">
  <FRAME src="menu.html" name="menu" noresize scrolling="no">
  <FRAME src="main.html" name="main" noresize scrolling="auto">
 </FRAMEBORDER>
</FRAMEBORDER>

○ue.html の例
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
 <TR>
  <TD width="100" bgcolor="緑色"></TD>
  <TD background="右上用だったギザギザ画像"></TD>
 </TR>
</TABLE>
</BODY>

※FRAMESET タグ内の 20 や 100、及び TD タグ内の 100 は、適宜調整して下さい。
    • good
    • 0
この回答へのお礼

フレーム4分割は多いですよねー…私もその点はちょっと問題ありかなぁと思ってたんです。でも、テーブルの背景画像指定って、ネスケで表示する時に変に表示されませんでしたっけ?私の記憶違いだったら良いんですけど…すみません。

overflowについて、ありがとうございました!これは知りませんでした。まだまだスタイルシート勉強中なので、参考になります(^-^)

お礼日時:2002/02/10 12:23

スタイルシートはIE5.5以上からですね(たしか・・・)


少なくとも私は見れてますので。
5.0はダメだったような・・・

ウイルス対策の為にも5.5SP2にアップされた方がいいと思いますよ。
    • good
    • 0
この回答へのお礼

やっぱりIE4.0は少し古いですよね。
実家の者はあまりパソコン詳しくないようなので、新しいのインストールしようと思います。ありがとうございました。

お礼日時:2002/02/10 12:17

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q三分割フレーム(┤)で、左上のフレームの、

HTML初心者です。
今、HPを作成中です。フレームを三分割しました。(┤)です。

左上のボタンをクリックして、右のフレームを変えること、左下のフレームを変えることは、教科書により、何とかできました。

質問は、
左上のボタンをクリックして、左下と右のフレームを同時に変えたいのです。

HTMLでは無理でしょうか。無理でしたら、Javascriptでもかまいません。

よろしくお願いします。

Aベストアンサー

<a href="index2.html" target="_top">リンク</a>

というリンクを作って、
index2.htmlというファイルを作成し、3分割フレームにしてください。
左上に表示するファイルを最初に表示していたファイルと同じファイル名を指定すると、
左下と右側の部分が同時に変わったように見えます。

この方法はJavaScript不要です。

Qoverflow:hiddenでスクロールバー

<div id="header">
<div id="main">
<div id="footer">
の構成でそれぞれにoverflow:hiddenをCSSにて記述しています。
最近 main 部分がはみ出すとブラウザにスクロールバーが
出ることに気付きました。

色々調べた結果、bodyに直接overflow:hiddenを
書けば良いことが分かりました。
ええっとそういうものなのでしょうか。ちょっと変に感じてますが。

Aベストアンサー

>ええっとそういうものなのでしょうか。ちょっと変に感じてますが。

何のoverflowがhiddenなのかを考えれば明白です。

#header, #main, #footerに指定したoverflow:hiddenは、それらの要素内のはみ出しを無視する指定になります。
(ここでいう「はみ出し」はwidth, heightで指定した範囲外の部分です。)
ということは、#header, #main, #footerが(ブラウザのリサイズなどで)bodyからはみ出した場合、bodyでoverflow:hiddenしていなければbodyのスクロールバーが表示されることになります。

Qswfをoverflow: hiddenできない

HTMLカテゴリに登録しましたが、CSSの質問です。
divタグの大きさをCSSでwidthとheightで指定し、overflow: hiddenの設定をしました。
ここでdivタグ内に文書を書き、それがCSSで指定したdivタグのサイズ(範囲)を超えてしまった場合、はみ出た部分はoverflow: hiddenにより見えなくなります。
画像でも同様だったのですが、何故かFlash(swfデータ)はIE以外のブラウザ(NN、Firefox、Operaなど)で見たところ、overflowが効いていません。隠したい部分も見えてしまいます。なぜなのでしょうか?

ソースは以下になります。
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/xhtml1/xhtml1-transitional/">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
#clip {
border: 1px solid blue;
width: 500px;
height: 100px;
overflow: hidden;
}
//-->
</style>
<title></title>
</head>
<body>
<div id="clip">
<embed src="flash.swf" width="500" height="250" />
</div>
</body>
</html>

お分かりのように、本来はheight=250pxのswfをheight=100px分だけ表示したいのです。

HTMLカテゴリに登録しましたが、CSSの質問です。
divタグの大きさをCSSでwidthとheightで指定し、overflow: hiddenの設定をしました。
ここでdivタグ内に文書を書き、それがCSSで指定したdivタグのサイズ(範囲)を超えてしまった場合、はみ出た部分はoverflow: hiddenにより見えなくなります。
画像でも同様だったのですが、何故かFlash(swfデータ)はIE以外のブラウザ(NN、Firefox、Operaなど)で見たところ、overflowが効いていません。隠したい部分も見えてしまいます。なぜなのでしょうか?

ソースは...続きを読む

Aベストアンサー

flashデータは他の通常出力とは異なり、
わかりやすく言うと、htmlに埋め込まれず特別なレイヤーに
表示されるのでそのような現象になります
ただ単に100pxより下をカットして表示したいのならば、
cssによるoverflowは特に使用せずに、

<embed src="flash.swf" width="500" height="100" scale="noscale" salign="lt" />

とすればよいでしょう

どうしてもoverfrow:hiddenで表示しないようにしたいのならば、

<embed src="flash.swf" width="500" height="250" wmode="opaque" />

のように、htmlに埋め込む記述を追記すれば可能です
ただFlashのwmodeの設定はIE向けに企画された内容とmacromediaが述べています
また、キー操作の不具合等も報告されているので、
できるだけこの方法を避け、前途salign scaleの設定による表示方法の変更をしたほうが無難です

flashデータは他の通常出力とは異なり、
わかりやすく言うと、htmlに埋め込まれず特別なレイヤーに
表示されるのでそのような現象になります
ただ単に100pxより下をカットして表示したいのならば、
cssによるoverflowは特に使用せずに、

<embed src="flash.swf" width="500" height="100" scale="noscale" salign="lt" />

とすればよいでしょう

どうしてもoverfrow:hiddenで表示しないようにしたいのならば、

<embed src="flash.swf" width="500" height="250" wmode="opaque" />

のように、ht...続きを読む

Qフレーム分割の件で質問です、先ず上下分割、そして、次に下のフレームのみ、左右分割するとします

フレーム分割の件で質問です、先ず上下分割、そして、次に下のフレームのみ、左右分割するとします、このとき、先に、仕切った上下分割のフレームの境界線のみを消す方法を知りたいのですが?
そんな、タグはないでしょうか?
フレームについての説明はWEB上にあるのですが、具体的に、そのまま使えるタグをしましてくれているものは無くて、、、、

Aベストアンサー

<frameset rows="120,*" frameborder="0">
では?
その説明ページを読んでなぜ理解できなかったのかがわかりません。
これであってるとよいですが・・・。

Q背景色を設定しているのにFirefox,Opera等で背景出ない。overflow:hiddenではコンテンツ下部が途中で切れてしまう

CSSでサイトを制作中ですが、背景が出ないことで困っております。

わかりやすくするためレイアウト画像を添付しましたのでレイアウトをご確認ください。

端的に書くと、コンテンツの白色の背景を記述しているのに、なぜか色がでず、両脇の背景色が表示されてしまっています。

このようになってしまうブラウザは、Firefox3,Opera8.5、NS7等です。IEは6なのですが、これだけ大丈夫でした。

でもIE6だけOKではダメなので、調べると、overflow:hiddenで直るような記載を見つけたのでやってみました。

すると、今度は
■IE6でコンテンツが終わっていないのに、途中で切れてフッターが出現してまう

■ミドルコンテンツであるdiv id="mdl"の中の左サイドバーと右コンテンツが両端に離れてしまい、間が開きすぎてしまう。

というようになってきました。どうやって回避すればよいでしょうか?


以下ソースです。
●CSS
------------------------------------------------------------
div#hdr-wrap {
background:url(../img/cmn/hdr_bg.gif) repeat-x;
top:0px;
width:100%;
height:120px;
text-align:center;
}

div#hdr {
width:900px;
_width: 902px;/*IE対策*/
height:120px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#gbnavi-wrap {
background:url(../img/cmn/gbnv_bg.gif) repeat-x;
top: 120px;
width:100%;
height: 51px;
text-align:center;
}

div#gbnavi {
width: 900px;
_width: 902px;/*IE対策*/
top: 120px;
height: 51px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#main-wrap {
top:171px;
width:100%;
height:100%;
background: url(../img/cmn/bg.gif) repeat;
text-align:center;
}

div#main {
overflow: hidden;/*BGcolor表示対策(Firefox,Opera,NS)*/
width: 920px;
_width: 922px;/*IE対策*/
height:100%;
background: #fff;
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#ftr-wrap {
clear: both;
width: 920px;
_width: 922px;/*IE対策*/
height:151px;
background: url(../img/cmn/ftr_bg.gif) repeat-x;
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
margin-left: auto;
margin-right: auto;
text-align: center;
}

div#footer{
clear: both;
color: #415880;
width: 900px;
_width: 902px;/*IE対策*/
height:151px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
------------------------------------------------------------

●HTMLソースは、単にくくっているだけです。
<div id="hdr-wrap">
<div id="hdr">
</div>
</div>
<div id="gbnavi-wrap">
<div id="gbnavi">
</div>
</div>
<div id="mdl-wrap">
<div id="mdl">
</div>
</div>
<div id="ftr-wrap">
<div id="ftr">
</div>
</div>
------------------------------------------------------------

CSSでサイトを制作中ですが、背景が出ないことで困っております。

わかりやすくするためレイアウト画像を添付しましたのでレイアウトをご確認ください。

端的に書くと、コンテンツの白色の背景を記述しているのに、なぜか色がでず、両脇の背景色が表示されてしまっています。

このようになってしまうブラウザは、Firefox3,Opera8.5、NS7等です。IEは6なのですが、これだけ大丈夫でした。

でもIE6だけOKではダメなので、調べると、overflow:hiddenで直るような記載を見つけたのでやってみました。

...続きを読む

Aベストアンサー

#1です。
教えていただいたお礼に
添付ソースで動作させてみた(gifファイルは適当に変更)けど
Firefox3.0.6で問題なさそうなのですが・・・。
overflow: hiddenを入れても入れなくても違いがよくわからなかった。


このカテゴリの人気Q&Aランキング

おすすめ情報