枠つきのスクロールバーをもらい
ブログにつけようとしましたが、
なぜか枠だけでスクロールバーだけが表示されません。。
原因はなんでしょうか?
改善の方法はありますか?
下のタグです
<div style="width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95">
<Tr><Td height="30" bgcolor="#004a95" align="left">
<font size="3" color="#ffffff" face="MS ゴシック">
タイトル部分</font>
</Td></Tr>
<Tr><Td bgcolor="#ffffff" align="center" valign="top">
内容部分
</Td></Tr>
</Table></div>
No.5ベストアンサー
- 回答日時:
すいません。
px入れるの忘れてました。(後から修正が出来ないのは不便ですね)<Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95">
<Tr><Td height="30" bgcolor="#004a95" align="left">
<font size="3" color="#ffffff" face="MS ゴシック">
タイトル部分</font>
</Td></Tr>
<Tr><Td bgcolor="#ffffff" align="center" valign="top">
<div style="width:337px;height:200px;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;">
内容部分
</div>
</Td></Tr>
</Table>
No.4
- 回答日時:
念のため、上のタグを位置だけ修正したものを書いておきます。
<Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95">
<Tr><Td height="30" bgcolor="#004a95" align="left">
<font size="3" color="#ffffff" face="MS ゴシック">
タイトル部分</font>
</Td></Tr>
<Tr><Td bgcolor="#ffffff" align="center" valign="top">
<div style="width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;">
内容部分
</div>
</Td></Tr>
</Table>
No.3
- 回答日時:
上記のタグではなく、アップしているページのタグを修正しましたので
<Tr><Td height="30" bgcolor="#004a95" align="left">
<font size="3" color="#ffffff" face="MS ゴシック">
タイトル部分</font>
</Td></Tr>
が抜けてます。
あとは、
<Table border="0" width="340" height="200" cellspacing="0" bgcolor="#bfdfff">
のwidthの数値を下のwidthに合わせてます。
<div style="border:thick dashed #bfdfff; width:335px; height:200px; ・・・
ここはwidthとheightの数値の後にpxを追加 IEはなくても大丈夫なんですが、Operaはpxがないとスクロールバーが出てこないので。
(ブラウザによって同じタグでも見え方が変わってきます)
width:335pxはwidth:337pxでもあまり変わらないのでどちらでもどうぞ。
border:thick dashed #bfdfff;はアップしているページに入ってたのでそのまま入れてます。
必要なければ削除してもいいです。
No.2
- 回答日時:
IE6 SP3ではスクロールバー出てますが、Opera9.61で見ると出てませんね。
しかもOpera9.61では、枠の表示がおかしくなってます。
ソースよく見ましたら<div style="width:337~scrollbar-track-color:#ffffff;">の入れる位置がまずいです。
<Tr><Td bgcolor="#ffffff" align="center" valign="top">の後に移動させて下のようにしてください。
<Table border="0" width="340" height="200" cellspacing="0" bgcolor="#bfdfff">
<Tr><Td align="center" valign="top"><div style="border:thick dashed #bfdfff; width:335px; height:200px; overflow:auto; scrollbar-3dlight-color:#ff00ff; scrollbar-arrow-color:#ff00ff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff00ff; scrollbar-track-color:#ffffff;">
<p><font color="#0080ff" face="MS ゴシック">内容部分</font></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div></Td></Tr>
</Table>
これでIE、Operaともスクロールバー出てきます。
スクロールバーが表示されることが確認できましたら<p></p>は削除してください。
回答ありがとうございます。
無事にできました。助かりました。ありがとうございます♪
<div style="width:337~scrollbar-track-color:#ffffff;">の部分は少し位置と入力文字も変わってるようですし、
他の段の部分も変わったようにおもうんですけど、
どこを変えたか教えてもらえますか?すいません。。
No.1
- 回答日時:
<div style="width:337;height:200;overflow:auto;
overflowが入っていますので、内容部分の高さが200px以上にならないとスクロールバーが出てきません。
試しにテーブル内の内容部分に連続して改行してみてください。
200pxを越したところでスクロールバーが出てきますので。
回答ありがとうございます。
やってみたんですけど、どうしてもでません、。。
かなり高さもあるとおもうんですけど。。
一度みてくれますか?
ttp://yasu2424.seesaa.net/
タイトルって書いてるブルーの枠のがそれです
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Formタグのブロックの高さについて
-
CSSのtransform: translate(-50...
-
CSSでh1とその下の文字との行間...
-
右寄せ表示方法
-
HPの文章が左寄りに・・・
-
IEでのレイアウト崩れ
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
ブラウザサイズによって変わるw...
-
アップロードするサーバーによ...
-
部分的な行間
-
css。横並びBOXに長文textを流...
-
引用文を囲むボックスの作り方
-
<h1>タグの後の行間を詰めたい。
-
IBMのホームページビルダー10で
-
横幅1200pxのHPをセンタリング...
-
IEで表示がおかしくなった?
-
macとwindowsのレイアウト崩れ...
-
CSS(スタイルシート)で画像の縦...
-
CSSでセンタリングしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
CSSの設定
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報