- ベストアンサー
DreamweaverでCSSを使用して画像を固定する方法
eg_nnの回答
<table> と <th>の幅指定がいけないようです。 <table width="700" → <table width="750" <th width="***" → <th width="150" にするだけで綺麗に並ぶはずです。 ※150は画像の幅です。 ＞ボタンが表示されず、ボタンの中の文字だけが... というのは、単純に画像が読み込まれていなく、altが表示されているのだと思います。 画像までのパスは合っていますか？ それから画像のファイル名が半角英数になっていないのはいけません。 ロールオーバー時の画像を含め、ファイル名は半角英数にしてください。 また、HTMLの基礎を学ぶと良いと思いますよ。 間違ったHTMLの解説本やサイトがたくさんあるので混乱するかもしれませんが、OKWave(教えてgoo)内で紹介されているものなら大丈夫かなと思います。 「HTML サイト」、「HTML 本」でサイト内を検索すると評価も合わせてたくさん出てきます。
関連するQ&A
- css初心者です。背景画像の固定について
現在、壁紙として配置した画像を固定させようとして苦戦しています。以下の記述にて試みましたがうまく行きません。他のrepeat属性などはうまく行くのですがこれだけうまく行きません。お心当たりございましたら、よろしくお願いします。 また、cssについて「あとあと変更修正などがらくになる」と言う文章を読みましたが これは外部cssについてのみ言える事なのでしょうか？外部はcssを変えるだけで自動的にhtmlに反映されますが、以下の例はhtmlに直接書き込んでいるため、例えば複数の共通スタイルを持っているhtmlの場合だとそれぞれをまたいちいち書き換えなければ行けない事になるのでしょうか？重ねてよろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title></title> <style type="text/css"> body { background-image: url('akete.jpg'); background-attachment: fixed; color: #22bb44; } </style> </head> <body> <h1>壁紙の指定</h1> <p>画面がスクロールしても背景画像を固定するためには、 background-attachment属性を使い、fixedを指定します。</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> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p>bbbbbbbbbb</p> </body> </html>
- ベストアンサー
- HTML
- 固定画像の右下に、ポイント画像を置くには？
お教えください。 今、FRONT PAGE EXPRESSを使用しつつ、タグページで書き込み調整をしております。 お聞きしたいのは、 「背景画像をスタイルシートで固定した上に、もう一つポイント画像を一つだけ右下に固定したい」 のですが、どのようにしたらよいのでしょうか？ 現在、下記のような状態です。 <html> <head> <style type="text/css"> <!-- body { background-image : url('○○背景画像.gif'); background-repeat:no-repeat ; background-attachment : fixed; background-position : right up ;} a{text-decoration:none;}--> </style> <meta http-equiv="Content-Language" content="ja"> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>△△</title> </head> ここにどのような手を加えると、右下に表示され、尚かつスクロール時も動かなくなるのでしょうか？ 宜しく御願いします。
- 締切済み
- その他（プログラミング・開発）
- 背景画像を固定したのに…ビルダーです。
こんにちは。 いま、ホームページビルダー７でホームページをつくっています。 よく、写真などの画像を右上に固定してるサイトってありますよね？スクロールしても動かないという。それをしたくてタグを調べ、ためしにやってみたのですが、画像が繰り返してしまうのです。 私は、１枚の空の写真だけを右上に貼りたいのですが…。 タグは以下のとおりです。 ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 HTML4.01 Frameset //EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ background-image : url(ファイル名.jpg); background-attachment : fixed; background-position : right top; background-repeat : no-repeat; } --> </STYLE> </HEAD> <BODY></BODY> </HTML> 一番不思議なのが、ビルダーで「繰り返さない」にチェックしているのになってしまっているということです。ただ画像が繰り返されてるのではなく、途切れ途切れに。 PC自身の問題なのでしょうか。 それと欲張ってもうひとつ。 スクロールバーの色をかえるタグをいれてみたのですが、ビルダー７では反映されないのでしょうか。まったくかわりません。 言葉で説明するのがどうも難くて…分かりづらくて申し訳ありません。お返事まっています。
- ベストアンサー
- ホームページ作成ソフト
- IE6でのexpressionを使用した要素固定対
--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> body{background:#ffffff url(null) fixed;} #fixed{position:absolute;top:expression(eval(document.documentElement.scrollTop+0));background:#ccc;} #fixed{width:100%;height:100px;} </style> </head> <body> <div id="fixed" class="specify"></div> <div id="contents" style="padding:100px 0px 1000px;"> <select> <option selected="selected" value="">選択してください</option> </select> </div> </body> </html> --- 余計な部分を省いていますが 上記の内容でIE6用にページ上部に常に表示されるナビを表示しています。 そうすると、スクロールする要素内にあるselectが DIV#fixedの上に乗っかってしまいます。 このバグを解決する方法をご存じの方、いらっしゃいますでしょうか？ 今更IE6ですいません。 かなり悩んだのですが解決策が見あたらず参っています。
- ベストアンサー
- HTML
- ホームページ作成
背景を右下に設定する時は <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> を<head>から</head>までに書けばいいと書いてあったので <html> <head> <meta http-equiv="content-type" content="text/html; charset=EUC-JP"> <title>無題</title> <meta name="generator" content=" 6.0.0.49"> <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> </head> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <p style="line-height:150%;"> </p> </body> </html> と書きましたがダメでした。 どこが間違っていますか？ またどうすれば直るか教えてください。 当たり前ですが、「画像URL」のところはちゃんとアドレスに置き換えました。
- ベストアンサー
- Windows XP
- Dreamweaver CSS
Dreamweaver 8をMac OS10.5で使用しているものです。 Dreamweaverで、htmlファイルを作成し、CSSを添付しています。 Dreamweaver上では、問題なくCSSが反映されていますが、SafariやFireFoxなどのブラウザでプレビューで見ると、一部しかCSSが反映されていません。 WEBで検索して、文字コードなどを変更してみたのですが、改善されません。 簡単なミスかも知れませんが、コードを記述しておくので、ご指摘いただけると幸いです。 ちなみに、症状としては、CSSで設定したheaderの背景色は、htmlでは反映されているのですが、h1の文字色の変更などは、htmlでは反映されていません。 ━html━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css" media="all"> <!-- @import url("price.css"); --> </style> </head> <body> <div id=wrapper> <div id=header> <h1>ヘッダー</h1> </div> <div id=content>本文</div> </div> </body> </html> ━━htmlここまで━━━━━━━━━━━━━━━━━━━━━━ ━━CSSここから━━━━━━━━━━━━━━━━━━━━━━ @charset "UTF-8"; /* CSS Document */ #wrapper { width: 800px; margin-right: auto; margin-left: auto; } #header { background-color: #00FFCC; height: auto; width: auto; padding-top: 5px; padding-bottom: 5px; } h1 { font-size: 2em; color: #FFFFFF; } ━CSSここまで━━━━━━━━━━━━━━━━━━━━━━━
- 締切済み
- CSS
- 背景画像固定タグ
こんばんは。 背景画像を右一列や左一列に固定をしたいのですが、今まで出来ていたのに何故か出来なくなってしまいました。 使用しているサーバーは2スタイルです。 画面全体に表示させることは出来ました。 <STYLE type="text/css"><!-- body{ background-image:url(アドレス); background-attachment:fixed; background-repeat:repeat-y; background-position:right;} --></STYLE> このタグで間違いはないと思うのですが表示できません。 HEADの間に入れています。 お力を貸してください。宜しくお願い致します。
- 締切済み
- HTML
- 背景を右下に固定する方法
ビルダーでＨＰ作成をしています。 どこかのＨＰで、下記のタグを使用しましたが、 保存すると、３行目の background-image:url("張りたい画像のURL"); の部分が消えてしまい、うまく表示されません。 どうしたらうまく行くでしょうか。 <style type="text/css"> <!-- BODY{background-image:url("張りたい画像のURL"); background-position:100% 100%; background-repeat :no-repeat; background-attachment:fixed;} --></style>
- 締切済み
- ホームページ作成ソフト
- 画像を固定して貼りたいとおもい、下記のように記述しました。
画像を固定して貼りたいとおもい、下記のように記述しました。 <STYLE type="text/css"> <!-- body { background-image : url("pigu1.png"); background-attachment: fixed; background-position: 0% 0%; background-repeat: no-repeat; background-color:#666666; } --> </STYLE> これをリンクにすることは可能でしょうか？ また、画像を横にもう一つ増やせるのでしょうか？ 教えてください。 宜しくお願いします。
- ベストアンサー
- HTML
- 壁紙（画像の固定）
http://dsc.jugem.jp/?tid=23 ↑のテンプレを使用するつもりですが、このトップに画像をおきたいのですが、 例えば、壁紙をダウンロードしてきて貼り付けたら、一つの画像がいっぱい反映されるのです。 っていう事は固定すべきですよね？ htmlで<STYLE type="text/css"> <!-- BODY { background-image : url("画像URL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat ; } --> </STYLE> ↑これは反映されなくて、ｃｓｓだと反映されます。 しかしｃｓｓに、 background-image:url(画像ＵＲＬ) background-repeat:no-repeat; background-position:right bottom; ↑こう入れても反映されません。何故でしょうか？どういうタグを使えばいいのですか？
- 締切済み
- ブログ
お礼
何度も詳しく教えていただいてありがとうございました。 HTMLの本はもっているのですが、内容があまり良くないようです…。 もっと活用できる本もこちらでさがしてみようと思います。