Dw CS6でウィンドウサイズと画像の位置について
- Dw CS6でウィンドウサイズを狭めても画像の位置が固定されてしまう場合、CSSでウィンドウサイズに合わせて画像の位置を変える方法を教えてください。
- サイトロゴの位置設定ができれば他の部分にも応用できるかもしれないので、まずはサイトロゴの位置設定方法を教えてください。
- Dw CS6でブラウザのウィンドウサイズを狭めたときに、画像が左上にくるようにするにはどうすれば良いのでしょうか？
- ベストアンサー
Dw CS6でウィンドウサイズと画像の位置について
色々ググってみましたが解決出来なかったので質問させてください。 Dw CS6でサイト作成しています。 CSSで画像の位置を決めていますが、ブラウザのウィンドウサイズを狭めても画像は固定された位置になっています。 背景のようにウィンドウサイズに合わせて画像の位置が変わる（ウィンドウサイズを狭めても、画像が左上にくるようにしたい）ようにするには、 CSSでどうのように記述すればよいでしょうか？ 添付画像の左側がいつものウィンドウサイズで右側がウィンドウサイズを狭めたものです。 この画像の位置はHPのサイトロゴがきます。メニューやヘッダー、コンテンツ、フッターも あります。まずサイトロゴの位置設定が出来れば他の部分にも応用出来るかと思います。 以下ソースです。 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> <link href="test.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <h1 class="header"><img src="images/sora.jpg" width="150" height="150" alt="空" /></h1> </body> </html> CSS @charset "UTF-8"; /* CSS Document */ body{ background-image: url(./images/back_ground_img_top2.gif); background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .header{ position: absolute; top: 10px; left: 300px; } よろしくお願いします。
- non4
- お礼率77% (14/18)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<body> <div style="width: 600px; margin:0 auto"> <h1><img src="images/sora.jpg" width="150" height="150" alt="空" /></h1> <h2><img src="images/sora.jpg" width="150" height="150" alt="空" /></h2> <h3><img src="images/sora.jpg" width="150" height="150" alt="空" /></h3> <h4>ロゴ</h4> </div> </body> h1{ padding: 10px 0 0 10px;} h2 img{ margin: 10px 0 0 10px;} h3{ position: relative; height:150px;} h3 img{ position: absolute; top: 10px; left: 10px;} h4{ background:url(images/sora.jpg) no-repeat 10px 10px; height:150px; text-indent:-9999px;} 貴方の表示方法は、 bodyの表示領域の 左から300pxの位置に固定しているのだから、 ブラウザを狭くしても左から300pxの位置になる。 逆にブラウザを広げ（1500pxとか）ると、同じ様に意図しない背景の外側に表示されてしまう・・・ 構造段階で、 幅を指定したdiv枠を設定し、その中にコンテンツや画像を配置するだけです。 上記例の他にも枠内で配置する方法は多々あります。 他のテキストとか画像の干渉の問題が出てきますので・・・ 色々やってみて、失敗を繰り返しましょう。
関連するQ&A
- ディスプレイサイズにあわせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthを調整するとかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat;//ライン画像の一部 position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x;//ライン画像 position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- Visual Basic
- ディスプレイのサイズに合わせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthをちょうせいする。とかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x; position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- CSS
- ieでだけ背景画像が表示されません
internet explorerのすべてのバージョンにおいて、背景画像が反映されません。firefoxやopera、safariでは問題なく反映されます。 HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body background="haikei.jpg"> てすと </body> </html> CSS: body {font-family:"ＭＳ Ｐゴシック";background-image:url(haikei.jpg);background-repeat:repeat;} なにが問題なのかわかる方、教えてください。よろしくお願いします。
- ベストアンサー
- ブログ
- safariだけcssが反映されない
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> あ </body> </html> このhtmlはbase.css（以下）を読み込んでいます。 /* CSS Document */ @charset "Shift_JIS"; body { background-image: url(images/bg.jpg); background-repeat: repeat; } fire fox、operaでは背景画像images/bg.jpgが 表示されていますが、safariでは真っ白です。 index.html内に <style type="text/css"> <!-- body { background-image: url(images/bg.jpg); background-repeat: repeat; } --> </style> と記述してしまえば、safariでも当然のように反映されていますが、 これが外部ファイルになると反映されません。 今回の例は、おかしい部分を抽出してみたのですが、 bodyの背景が表示されない、一番上に10pxくらいの空白(マージン? )が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。 floatを使ったページはsafariでは背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか？
- ベストアンサー
- HTML
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －
- ベストアンサー
- HTML
- 背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示する方法
背景画像の位置を固定し、背景画像の上に表示している画像を常に中央に表示するようにしたいと思ったのですが、背景画像も常に中央に表示されてしまいます。 そのため、上記の現象の対処法について何かご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたい事】 1. ブラウザの横幅が1024の際、背景画像を画面中央に表示したい。 2. ブラウザの横幅が1024の際、背景画像の上に表示されている画像を画面中央に表示したい。 3. ブラウザの横幅が1000以下の際、ヘッダーやコンテンツやフッターという文言の表示方法と同じように、左側を基準に表示したい。 4. ブラウザの横幅が1000以下の際、背景画像の上に表示されている画像は画面中央に表示したい。 【現状】 1,2,4は出来ています。 ただ、3については、ヘッダーやコンテンツやフッターという文言の表示方法と同一にする方法が分からず、画面中央に表示されてしまいます。 【ソースコード】 <!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" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css"> <!-- body { text-align: center; margin:0; padding:0; } #wrapper_index_up, #wrapper_index_bottom { margin: 0 auto; text-align: left; } #wrapper_index_up, #wrapper_index_bottom, #header, #contents, #footer { width: 1000px; } #header { background-color:red; } #top_img_wrapper { background-image:url(http://cdn.oshiete.goo.ne.jp/images/top/search_bk.gif); background-repeat:no-repeat; background-position: center; } --> </style> </head> <body> <div id="wrapper_index_up"> <div id="header">ヘッダー</div> </div> <div id="top_img_wrapper"> <img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" alt="" width="139" height="92" /> </div> <div id="wrapper_index_bottom"> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html> どうかよろしくお願いします。
- ベストアンサー
- HTML
- ページ上部に空白ができます
いつもお世話になります。 dreamweaver8でホームページを作っています。 下記のような記述をすると、ページ上部に空白ができます。 どこを直せばよいのでしょうか、教えて下さい。 【CSS】 #body{ font-family:"メイリオ", Meiryo,"ＭＳ Ｐゴシック", Osaka,"Hiragino", "ヒラギノ角ゴ Pro W3", sans-selif,; color: #333333; font-size:10px; margin: 0; padding: 0; text-align: center; } #wrapper { width: 722px; margin-top:0px; margin-left: auto; margin-right: auto; background-image: url(img/sidebk2.jpg); background-repeat:repeat-y; } #header { background-color: #FFFDE5; background-image:url(img/title_bar.jpg) ; background-repeat:no-repeat; height: 62px; width: 722px; margin-bottom : 0px; } #header p { position: relative; margin: 0; top:42px; left:570px; width:150px; color:#ffffff; font-size: 11px; } 【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=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body> <div id="wrapper"> <div id="header"> <p>| <a href="http://***.com" target="_blank">ブログ </a>|<a href="../sitemap.html">サイトマップ</a> | </p> </div> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- hタグ 印刷時の背景画像
おせわになります。 hタグで背景画像を使用しており、 プリント表示させると、その背景画像が消えてしまいます。（IE6、IE7） プリントアウト時も同じように印刷させたいのですが、 対策はありますでしょうか。 ※今の段階でどうしても不可能な場合は、 media="print"指定で、border-bottomで対応しようと考えております。 ▼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=shift_jis" /> <title>test</title> <style type="text/css"> <!-- h1 { padding-bottom:10px; background:url(http://www.geocities.jp/ajax3210/dotline.gif) repeat-x bottom; } --> </style> </head> <body> <h1>テスト見出し</h1> </body> </html>
- ベストアンサー
- CSS
- 背景画像を任意の位置に置きたい
こんにちは、Santaと申します。 いつもお世話になっております。 Firefox ８．０ Chrome １６．０ 背景画像を任意の位置に置きたいです。 画像のとおりです。 背景画像の大きさは width:950px; height:800px; です。 左右にオレンジ色の矩形を置いております。オレンジの矩形の間の白いところは、白の矩形です。 左右では、center真ん中に来るように、上からは200px;の位置に置きたいと思っております。 自分の書いたCSSでは、絵柄が少し表示されるだけで、全体の画像も表示することができませんでした。 css --------------------------------- body { background-image:url(../images/background_line_wall.gif); background-position:50% 50%; background-repeat:no-repeat; } ----------------------------------- どのように書きましたら、上から２００pxの位置へ、左、右からは中央へセンタリングできますでしょうか？ よろしくお願いいたします 失礼致します。
- ベストアンサー
- CSS
お礼
回答をありがとうございます。 試行錯誤を繰り返してみます。