- 締切済み
ホームページ 背景二枚重ね センタリング
ホームページを作製しています。ビルダーなどは使用していません。 背景を二枚重ねにし、一枚を画面の中央に配置したいのですが、左に寄ってしまいます。 全体の背景は自作の画像で、その中心に白い背景を設定したいのですが、下のようなｈｔｍｌで作製しましたところ、白い背景が左によってしまいます。 何か良い方法を教えてください。 ちょっと分かりにくい説明ですみません。 全くの素人で何もわからないのですがよろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <title></title> <style type="text/css"> <!-- html{background:url(../mysite1/back.jpg); text-align:center} body{width:800px; height:1100px; margin-left:auto; /* IE以外用の中央寄せ */ margin-right:auto; /* IE以外用の中央寄せ */ margin-top:0px; margin:0px; background-color:#ffffff } --> </style> </head> <body> </body> </html>
- rara5257
- お礼率40% (2/5)
- レンタルサーバ・ASP
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ICHI-yan
- ベストアンサー率33% (45/134)
１行とってみてください。自分で指示していますよ。 前略 margin-left:auto; /* IE以外用の中央寄せ */ margin-right:auto; /* IE以外用の中央寄せ */ margin-top:0px; margin:0px; /*★★★このmargin:0px;を削除してください。★★★*/
- tomoko_fujita
- ベストアンサー率32% (169/518)
ホームページビルダーで作ってました。TABLEタグを使用し、テーブルに「サイズ：800*1100，背景色：白」を設定しています。テーブルにセンタリングを設定し、「IE以外用の中央寄せ」は分らないので使っていません。 <html> <head> <title></title> </head> <BODY background="mysite1/back.jpg"> <CENTER> <TABLE bgcolor="#ffffff"> <TBODY> <TR> <TD width="800" height="1100"></TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </html>
関連するQ&A
- FFとIEでスクロールバー、背景画像を表示しセンタリングするときのズレ
IE7とFF3とOpera9で表示確認をしています。 スクロールバーを常時表示し、背景をセンタリングしたデザインをしたいと考えています。 FF3でスクロールバーを表示すると、背景よりボックスが1px右にずれてしまいます。 IEはもともとずれるのが判っているのでハックを使って調節しています。 Operaだと理想どおりに表示されます。 仕方が無いのでFFもハックして表示しました。 ソースは以下のとおりです。 実際こんなにハックしなくとも、スマートに表示できる方法があるのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style> <!-- body{ margin: 0; paddin:0; background-image:url(design/bg4.jpg); background-repeat:repeat-y; background-position:center; } /* firefoxのハック */ body,x:-moz-broken { margin-left:-1px; overflow-y:scroll; } /* IE7のハック */ *:first-child+html body { padding-left: 2px; overflow-y:auto; } /* IE6以下のハック */ *html body { overflow-y:auto; padding-left: 1px; } .base{ margin:auto; width:750px; background-color:red; } --> </style> </head> <body> <div class="base"> <p> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> </body> </html> 何かわかることがありましたら、よろしくお願いしたします。
- ベストアンサー
- HTML
- ホームページの背景画像が途切れてしまう。
こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
- ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!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> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
- CSSレイアウトでの中央寄せ
おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、 動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、 背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。 この解決方法はありますでしょうか。 ご教授のほど、よろしくお願いいたします。 ▼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> <style type="text/css"> <!-- body { margin:0; padding:0; text-align:center; background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } #wrapper { width:746px; height:100px; background-color: #CCCCCC; margin-left:auto; margin-right:auto; text-align:left; } p { margin:0; padding:0; } --> </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでのセンタリング
いつもすみません。 下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？ よろしくお願いします。 <!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"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</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
- 背景画像
つい先日もこちらで教えていただいたのですが、また分からないのでよろしくお願いします。ビルダー11を使っています。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> </style> </head> <BODY background="080aosirobudou_300.jpg" style="background-repeat:no-repeat"> htmlで全体を真ん中にして、画像はリピートしないようにしていますが 画像の下半分が切れてしまいます。画像を小さくするしかないでしょうか？（加工OKなものを使っています）それと出来れば画像を右端によせたいのですが、上記htmlに <STYLE TYPE="text/css"> <!-- BODY{background-image:url(画像url); background-position:right} --> </STYLE> とすると、画像やスタイルがつぶれます。どうすればよいのでしょうか？ただいま勉強中のため、できましたら素人にも分かりやすく答えていただければありがたいです。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- 背景画像がきれます
以前お聞きしたのですが、再度問題が出たのでよろしくお願いします。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> <!-- BODY{background-image : url(画像url); background-position:right top;} --> </style> </head> <BODY background="画像url" style="background-repeat:no-repeat"> でhtml書くと希望通り右上に画像が出たのですが、ずいぶん画像を小さくしなければなりません。もう少し大きくすると画像が切れてしまいます。今の状態で（小さい画像）では、実際サイトを見ると小さく画像の部分だけ区切ったような感じに見えます。どうすれば画像が区切ったような感じにならないのでしょうか？上記htmlが間違っているのでしょうか？それともう少し大きくして画像が切れない方法はないのでしょうか？よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- テーブルを上部に付けてセンタリング表示させたい
質問お願い致します。 ピクセルで幅の長さを指定したテーブルを上部に付けて センタリングしたいのですが、なぜか左に寄ってしまうのです。 いろいろな箇所にセンタリングのタグを打ち込んでも 利いてくれません。 ％指定をすると不恰好になってしまうのでどうしても ピクセル指定でセンタリングしたいのですが よろしければご指摘ください。 お願い致します。 ------------------以下ソースです---------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Travel Guide: Ragged Point Inn</title> <style type="text/css"> body{ float: center; margin-top: 0px; color: white; background:#000000; background-attachment:fixed; } table{ float: center; width: 700px; background: #FFFFFF; color: #000000; } </style> </head> <body> <table cellspacing="0"> <tr> <td id="content"> <table cellspacing="0" align="center"> <tr> <td>aaaaa</td> </tr> </table> </td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
お礼
どうもありがとうございます。 いちど試してみますね。