HPビルダー7でアップしたが左寄りに表示される

前へ 次へ
このQ&Aのポイント
  • HPビルダー7でアップしたサイトが左寄りに表示される問題について
  • 背景画像やコンテンツが左よりに表示される問題について
  • 背景画像のみを中央に表示させたいが、他の要素も中央にする方法について
回答を見る
  • ベストアンサー

HPビルダー7でアップしたが左寄りに表示される

たくさんググりましたが分からないので質問させてください。 HPビルダー7でFC2にサイトをアップロードしたんですが、 背景画像、コンテンツなどすべてが左よりに表示されてしまいます。 背景画像だけでも中央にと思い、以下のように、 background-position : center;のみを追加しました。 BODY{ background-repeat : no-repeat; background-position : center; } div{ width:800px; / margin-right: auto; margin-left: auto; } するとやはり、背景画像だけが中央にあり、 画像やテキストは左よりです。 画像やテキストによってはあえて中央に置きたくないのもありますので、 コンテンツ全体（もちろん背景画像も）を中央にするにはどうしたらいいでしょか？ ＨＴＭＬ、ＣＳＳはある程度理解できます。 回答をよろしくお願いします。 使用アプリなど： ホームページビルダー７ Google Chrome Vista

  • non4
  • お礼率77% (14/18)

質問者が選んだベストアンサー

  • ベストアンサー
  • Z31
  • ベストアンサー率37% (735/1957)
回答No.1

どのサイズのディスプレイでも画面中央に表示させるには、表を使います。 http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1037 画面の文章や画像の配列を表をうまく使ってレイアウトします。表の段数や列数を自由に決めて、またセルを結合したり分割したり、いろいろやってみてください。 最後に「表の枠を表示しない」にチェックを入れることをお忘れなく。

non4
質問者

お礼

早速のご回答をありがとうございます！ 表を使うんですね。 早速やってみます。 参考ページの情報もありがとうございます！

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • IEとFirefoxでの背景表示の違いについて　（CSS）

    いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }

    • ベストアンサー
    • CSS
  • ホームページの背景画像が途切れてしまう。

    こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページは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; } -----------------------------------------------------------------

  • IE6で、背景画像とコンテナを常に中央表示させたい

    bodyの背景画像と、コンテナを ブラウザウインドウ幅に対して、 常に中央表示させたいです。 IE7、8、FireFox、Safari　では上手くいっているのですが、 IE6だけ、うまく行きません。（何故かずれてしまいます） コードは以下です ------------------------------------------------------- ●HTML <body> 　　<div id="container"></div> </body> ●CSS body{ 　　background: url(画像のパス) no-repeat; 　　background-position: center top; 　　text-align: center; } container{ 　　width: 900px; 　　margin: 0 auto; } ----------------------------------------------------------------------------------- どうやらIE6では、 コンテナも bodyに置いた背景画像も だいたい中央表示されているのですが 軸がズレている？？ようなかんじで お互いがずれて、だいたい真ん中、という感じになってしまいます。 どなたか詳しい方いらっしゃいましたら よろしくお願いいたします。。

    • ベストアンサー
    • HTML
  • HPの作成を教えてください。

    HP作成を見よう見まねで作成しているのですが最初からつまずきました。 作成したいのはDIVで#headerでヘッダー領域を作りその中にヘッダー#header-inを作りその中を区分けしたいので#header-logoと#header-logo2をCSSで作成したのですが#header-logoと#header-logo2の文字が表示されません。 何分初心者なので分かりやすく教えて頂ければ助かります。 body , html { height: 100%; margin: 0; padding: 0; text-align: center; /* 標準文字色 */ font-size : 100%; background-image : url(../imege/bg01.png); background-repeat : repeat-x;background-position : left top; } /* Safari用ハック 文字サイズ調整 */ /*\*/ html:\66irst-child body{ font-size: 90%; } /* end */ } img{ border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; } #container { width: 100%; position: relative; height : 100%; min-height: 100%; background-image : url(../imege/fbg01.png); background-repeat : repeat-x;background-position : left bottom; } #header{ width: 100%; height : 84px; margin-top : 0px; margin-bottom : 0px; text-indent : -9999px; } #contents { padding-top : 84px; padding-bottom: 100px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; } #footer { position: fixed; bottom: 0; width: 100%; height: 100px; margin-left : auto; margin-right : auto; } #header-in{ width : 900px; height : 84px; position : relative; margin-left : auto; margin-right : auto; margin-top : 0px; margin-bottom : 1px; } #contents-in{ margin-left : auto; margin-right : auto; width : 900px; position : relative; margin-top : 0px; margin-bottom : 0px; } #footer-in{ margin-left : auto; margin-right : auto; margin-bottom : 0px; width : 900px; height : 100px; position : relative; margin-top : 0px; } #header-logo{ width : 500px; height : 84px; float : left; z-index: 2; } #header-logo2{ width : 200px; height : 84px; float : left; z-index: 2; } <div id="container"> 　<div id="header"> 　<div id="header-in">ヘッダー 　　　 <div id="header-logo">トップロゴ</div> 　　　 <div id="header-logo2">お問い合わせ</div> 　　 </div> </div> 　 　<div id="contents"> 　　<div id="contents-in">コンテンツ</div> 　</div> 　<div id="footer">　　 　<div id="footer-in">フッター</div> 　</div> </div> よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSでDIVで挟んでいるのに背景色が出ない？

    CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。

    • ベストアンサー
    • HTML
  • Firefoxのみ下に空白が出来るバグ

    背景を２枚使用し、それぞれ上と下に固定して、本文がのびると真ん中（画像のない場所）がのびるようにしたいのですが、 Firefoxのみ、下の画像に空白ができて埋まりません。 画像は、bodyに下の画像を、containerに上の画像を入れています。 いい方法はないでしょうか？ ----html------------------ <html> <body> <div id="container"> </div> </body> </html> ---css------------------ body{ background-image:url(../images/back_01.jpg); background-repeat:repeat-x; background-position:bottom; margin:0 auto; height:100%; } div#container { background-image:url(../images/back_02.jpg); background-repeat:repeat-x; width:100%; height:100%; margin:0 auto; text-align:center; } ちなみにhtmlにcssでheight：100％などを入力すると、画像が消えて表示されなくなります。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • ホームページのブロック配置　Float

    Float left のブロックの右に別のブロックを配置したいのですが float right 指定しても回り込んでくれません。一度は上手くいったようにみえたのですが。 原因と注意点をお教え下さい。 　--------------------------------------------------------------------------- | header | |--------------------------------------------------------------------------- | dspbody (menuとtopを含む) | | ------------------------------------------------------------------------- | | menu | top | |--------------------------------------------------------------------------- | footer | ---------------------------------------------------------------------------- 【テスト中のスタイルシート】 * { margin:0; padding:0; } body { /* background-color:#ffffff; *//*内容全体の背景色*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#pagebody { width:1000px; margin:0 auto; /*内容全体をセンタリング*/ text-align:left; /*テキストの配置を左揃えにする*/ } div#header { height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/ text-align:center; /*テキスト・画像の配置を中央揃えにする*/ background-image: url(img/FF054_change.png); background-repeat: repeat-x; } div#dspbody { width:1000px; height:800px; background-color: #999999; } div#menu { width:152px; height:800px; margin:0; 　　　　 float:left; /*内容全体を左に配置*/ text-align:left; /*テキストの配置を左揃えにする*/ /* background-color: "saddlebrown"; */ background-image: url(img/FF085_change.png); /* background-repeat: repeat-y; */ } div#top { /* width:700px; height:600px; */ float:right; text-align:center; /*テキストの配置を中央揃えにする*/ font-size: 9pt; background-color: #ccffcc; } div#top table { margin: auto; /*テーブルの配置を中央揃えにする*/ } div#footer { clear:both; text-align:center; /*テキストの配置を中央揃えにする*/ } a:link { color: yellow} a:visited { color: yellowgreen}

  • 影付き(透過)ロゴタイトルの表示ないし背景との同調について

    影付き(透過)ロゴタイトルの表示ないし背景との同調について 只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。 そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。 ちなみにそのタイトルを表示させる部分は #wrapper{ margin:0px; padding: 0px; text-align: center; } #contents{ width: 880px; margin-left:auto; margin-right:auto; } で内包してあります。html上で簡単に書くと ・ ・ ・ <body> <div id="wrapper"> <div id="contents"> ここに画像タグ </div> </div> </body> といった感じです。 背景は横一列で固定するようにしています。 body{ font-size: 13px; line-height:160%; background-image: url(img/back.gif); background-repeat:repeat-x; background-position: 0% 0%; } こんな感じです。 CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。

    • ベストアンサー
    • CSS
  • macのsafariとFirefoxで背景が表示されない

    bodyとcontainerで背景をリピートさせています。 WindowsのIE6、IE7、Firefoxでは背景は正常に表示されるのですが、macのFirefoxとsafariでは背景がまったく表示されません。 どうしたら表示されるか、どなたかお教えいただけませんでしょうか。 body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; text-align:center; } #container { width:776px; margin:0px auto; background-image:url(main.gif); background-repeat:repeat-y; text-align:left; }

    • ベストアンサー
    • CSS
  • CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？

    初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する