ホームページビルダー16でページセンター表示する方法
- ホームページビルダー16でページをセンター表示する方法についてご質問です。
- 試しにやってみた結果を共有します。HTMLのメタ情報とCSSを使用して、ページをセンター表示する方法を説明します。
- 具体的な手順は以下の通りです。まず、HTMLのメタ情報の中にContent-TypeとContent-Style-Typeを追加します。次に、CSSのbody要素にtext-align: center;とmargin-left: auto; margin-right: auto;のプロパティを設定します。これにより、ページがセンターに表示されます。
- ベストアンサー
ホームページビルダー16 ページセンター表示
現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。 調べて色々試してみましたがセンターに表示されません。 どのようにするのでしょうか？ 以下は試しにやってみた結果です。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.1.0 for Windows"> <title></title> <style type="text/css"> <!-- body{ text-align : center; margin-left : auto; margin-right : auto; } --> </style> </head> <body> <div style="width : 180px;height : 100px;top : 33px;left : 252px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo11.gif" width="86" height="37" border="0" alt="テスト"></div> <div style="width : 950px;height : 840px;top : 4px;left : 2px; position : absolute; z-index : 1; visibility : visible; " id="Layer1"></div> </body> </html>
- -_0_-
- お礼率16% (54/334)
- ホームページ作成ソフト
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 tableを使用するどこでも配置モードは、決して使用してはならない手法ですので論外ですが・・ 「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」 「国内のウェブサイトにおける非互換要因の一つとして、ホームページ・ビルダーの名前が調査書の中で挙がっている( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC#.E4.BD.9C.E6.88.90.E3.81.97.E3.81.9F.E3.82.A6.E3.82.A7.E3.83.96.E3.82.B5.E3.82.A4.E3.83.88.E3.81.AE.E5.BD.B1.E9.9F.BF )」 ＞ビルダーも16になりもう少し使えるかと思いましたが、 これは良く誤解されているのですが、テンプレートなどお仕着せのデザインをそのまま流用するのなら問題ないのですが、ちょっとデザインを変更しようとするとオーサリングツールの知識だけでは難しいです。ちょっと手の混んだことをしようとすると、実際には、テキストエディタで作成できる人以上に、HTMLやCSSの知識が必要になります。 仕様書なんて高々数十ページですが、それに加えて数百ページのマニュアルを読破しないといけないのですから(^^) ★特にIEが標準モードで起動するようDOCTYPEを書くこと!! (注)margin:0 auto;でそのブロックは左右中央に配置されるはずです。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) ビルダーのデフォルトはそうではありません。 ⇒ホームページビルダーでのホームページ作成方法 [TempNate HP設置マニュアル]( http://tempnate.com/hp_making/hpbuilder.html ) ★ブロックを中央配置にするプロパティは、 margin:0 auto; 意味は、 margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto; 値が３以下しか書かれていない場合は、上→右→下→左の対辺が省略されている text-align:center; はブロック要素の中で行内要素を中央配置するものです。 IEの互換モードはブロックを並べてしまい。しかもmargin:autoが無効 ＞CSSやXHTMLの技術的な話は正直そこまでに至る基本から勉強しないとわからないです。 そのほうが、はるかに早道で簡単でしょう。そして、楽ですし、自由自在にデザインできるようになりますしね。将来のメンテナンスもとっても楽です。 No.1のサンプル参照 ★Webオーサリングツールを自在に使用するためには、テキストエディタで作成する人以上にHTMLやCSSの知識が必要です。決して逆じゃないですよ。 頑張ってください。 ^^^^^^^^^^^^^^^^^ [例] ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) はブラウザの[表示]メニュー→[スタイルシート]でスタイルシートを選択するとデザインが劇的に変化しますし、ウィンドウ幅が変化してもデザイン保たれます。さらに、印刷プレビューだとそれようのデザインになります。 しかし、HTMLはソースを見られたら分かるように、極めてシンプルです。HTMLは誰でも内容を追加したり変更できるくらい簡単です。もちろん、検索エンジンも内容を正確に理解できるでしょう。
その他の回答 (2)
- Z31
- ベストアンサー率37% (735/1957)
センター表示というのは、ディスプレイの中央ということでしょうか？ どのサイズのディスプレイでも中央表示にするには「表」を使います。 次のサイトを参考にしてください。 http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1037
補足
表は確かに便利ですが、レイヤーの様な重ね表示ができないのが問題です。 そのままでは味気のない短調なサイトになります。 ここがクリア出来ればいいのですが。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ビルダー使うとややこしくなるので・・ 最初の<doctype>は、必ず次のいずれかにします。ビルダーの初期設定で変更できます。 HTML4.01strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 本来は↑で書くべき!! 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 HTML4.01transitinal ビルダーはtransitinalだけど、こちらの宣言に書き換える。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTMLにすると、IE6は互換モードになってしまうので以下は使わないほうがよい。 XHTML1.0strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML1.0transitinal <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ★IEが互換モードで起動すると、他のブラウザとの表示の違いで悩まされます。IEを含めて標準モードで起動するように作成すること。 これが、中央配置の基本です。 ★HTMLは文書構造だけを記述します。デザインに関わるものは、id、class名を含めて一切書かないようにします。 <body> <div class="header"> <h1><img src="logo11.gif" width="86" height="37" alt="ページタイトル"></h1> </div> <div class="section"> <h2>本文</h2> <div id="contentTable"> <h3>目次</h3> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> スタイルシートは html,body{margin:0;padding:0;}/* ページの余白を消しておく */ div.header, div.section, div.footer{ width:90%;/* 幅を指定 */ min-width:480px;max-width:950px;/* スマホ用に480pxまで自在に伸縮 */ margin:0 auto;/* 上下は0,左右は自動で中央配置 */ } /* ここまでがheader,section,footerの中央配置 */ /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ div.header h1{ text-align:center;/* ヘッダの見出しは中央配置 */ }/* ページタイトルの中央配置 */ /* 調整 */ div.section{ min-height:400px;/* 本文の最小高さ */ position:relative; } #contentTable{ height:100%; width:180px; position:absolute; left:0;top:0; } h1,h2,h3,p{margin:0;line-height:1.6em;}/* ブロック要素の上下マージンを消す */ /* 分かりやすくするために色をつける */ body{background-color:gray;} div.section{background-color:white;} div.header{background-color:yellow;} div.footer{background-color:aqua;} #contentTable{background-color:fuchsia;} これだけ、スタイルシートを見るだけで、どのようにデザインしてあるか、わかると思います。class名はそのようにつけます。 ビルダーは、互換性のあるページを作るのは苦手です。テンプレートをそのまま使わない場合は、断然テキストエディタのほうが楽でしょう。HTMLやCSSを良く知らないと、ビルダーを使って自由にデザインするのは難しいですね。 サンプル全体です。 ★タブは＿に置換してあります。戻すこと ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATAタグで、検証済みです。 ★幅はリキッドにしてあるのでスマホでもワイドディスプレイでも中央に!! ★HTMLには文書構造しか書いてないのでメンテナンスもデザインも楽になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;}/* ページの余白を消しておく */ div.header, div.section, div.footer{ width:90%;/* 幅を指定 */ min-width:480px;max-width:950px;/* スマホ用に480pxまで自在に伸縮 */ margin:0 auto;/* 上下は0,左右は自動で中央配置 */ } /* ここまでがheader,section,footerの中央配置 */ div.header h1{ text-align:center;/* ヘッダの見出しは中央配置 */ }/* ページタイトルの中央配置 */ div.section{ min-height:400px;/* 本文の最小高さ */ position:relative; } #contentTable{ height:100%; width:180px; position:absolute; left:0;top:0; } /* 調整 */ h1,h2,h3,p{margin:0;line-height:1.6em;}/* ブロック要素の上下マージンを消す */ /* 分かりやすくするために色をつける */ body{background-color:gray;} div.section{background-color:white;} div.header{background-color:yellow;} div.footer{background-color:aqua;} #contentTable{background-color:fuchsia;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><img src="logo11.gif" width="86" height="37" alt="ページタイトル"></h1> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<div id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div></body> </html>
補足
回答ありがとうございます。 CSSやXHTMLの技術的な話は正直そこまでに至る基本から勉強しないとわからないです。 ビルダーも16になりもう少し使えるかと思いましたが、まだまだGUIの機能がダメダメですな。
関連するQ&A
- 下記のソースですが、画面一杯に表示されません、なぜでしょうか？
<HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE></TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#663300" link="#0000FF" vlink="#99CCFF"> <DIV style="top :0px;left : 0px; position : absolute; z-index : 1; width : 750px; height : 900px; visibility : visible; " id="Layer1"> <CENTER> <TABLE width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#68B921"> <TR ALIGN="CENTER" VALIGN="MIDDLE"> <TD><IMG src="" width="111" height="96" alt="アイコン"></TD> <TD WIDTH="100%" VALIGN="TOP"></TABLE> </CENTER> </DIV> </BODY> </HTML>
- ベストアンサー
- Windows 95・98
- タグについて 音楽箇所の削除
すみません。タグの初級レベルをご指導下さい。 以下のタグの中で音楽が出る箇所を削除をしたいのですが、 どこのタグ、どこからどこまでを削除すればよろしいでしょうか。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows"> <title>○○○ Top logo</title> <meta name="description" content="公式ホームページ"> <meta name="keywords" content="○○○"> <link rel="stylesheet" href="Stylesheet/Body_Stylec.css" type="text/css"> <link rel="stylesheet" href="Stylesheet/Table_TD_clear.css" type="text/css"> </head> <body style="margin-top : 0px;margin-left : 10px;margin-right : 0px;margin-bottom : 0px;"> <div style="width : 100px;height : 10px;top : 91px;left : 134px; position : absolute; z-index : 3; visibility : visible; " id="Layer3"><embed src="MIDI/Shout.mp3" height="19" width="99" autostart="true" loop="true" repeat="true" type="audio/mp3"></div> <div style="width : 411px;height : 56px;top : 1px;left : 285px; position : absolute; z-index : 2; visibility : visible; " id="Layer2"><img src="logo/kl_senior1.gif" width="372" height="59" border="0"></div> <div style="width : 434px;height : 18px;top : 73px;left : 272px; position : absolute; z-index : 1; visibility : visible; " id="Layer1">2009年度スローガン<font color="#ff0000" size="+1">『</font><font color="#ff0000" face="HG丸ゴシックM-PRO" size="+1" style="font-size : 14px;font-weight : bold;">スピーディー</font><font color="#ff0000" size="+1">』</font></div> <table border="1" width="855" cellspacing="0" cellpadding="2" style="margin-top : 5px;margin-left : 10px;margin-right : 0px;margin-bottom : 0px;"> <tbody> <tr> <td width="98" height="87"><img src="logo/logo_littleseniors_l.jpg" width="80" height="80" border="0"></td> <td width="153" height="87">更新のトッピング<br> <img src="logo/NEW-3.jpg" width="37" height="28" border="0" style="vertical-align : super;"><br> <font color="#000000">○○○○</font><font color="#ff0000"><br> </font></td> <td style="text-align : center;" align="center" width="419" height="87"><br> <br> <br> <br> <br> </td> <td align="center" style="text-align : center;" width="169" height="87">○○○ <a href="rirki.html" target="_blank">更新履歴</a><img src="logo/NEW-3.jpg" width="57" height="37" border="0"><br> </td> </tr> </tbody> </table> </body> _________ よろしくお願いします。
- ベストアンサー
- HTML
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー14のどこでも配置モードでホームページを作成してお
ホームページビルダー14のどこでも配置モードでホームページを作成しております。 ネットで調べると「どこでも」ではブラウザ中央表示が難しいらしいのがわかりました。 http://www.h7.dion.ne.jp/~nuru44/newpage2.htmlを参考に 自己流でやってみましたが、きれいに中央とまでいきませんでしたので教えてください。 宜しくお願いいたします。 以下にHTMLの一部を記述しております。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META name="copyright" content="ホームページ・ビルダー (C) Copyright IBM Corp. 1995, 2009"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.0.0 for Windows"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=1000; pageheight=1200"> <title></title> </head> <body> <div style="top : 8px;left : 46px; position : absolute; z-index : 4; " id="Layer1"><a href="http://www6.ocn.ne.jp/~irupa/" target="_self"><img src="irukapark_logo.png" width="76" height="104" border="0"></a></div> <div style="top : 9px;left : 156px; position : absolute; z-index : 12; " id="Layer5"> ・ ・ ・ ・ </body> </html>
- ベストアンサー
- HTML
- 複数の動画をホームページに貼りたいのですが。
演奏会風景の動画を一曲ごとにホームページに貼りたいのです。たくさんの曲名をページに載せておいてクリックするたびにその曲の演奏風景が流れるようにしたいのです。次のように Pegasys flv Player を使って一曲を貼ることまではできた（ホームページビルダーでつくりました）のですがその先に進めません。Javaとかhtmlはまったく経験がありませんが何とかならないでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.4.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <script src="AC_RunActiveContent.js" language="javascript"></script> <TITLE></TITLE> </HEAD> <BODY> <DIV style="top : 97px;left : 198px; position : absolute; z-index : 3; " id="Layer1"> <P></P> <script language="javascript"> AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'width','384','height', '238','pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'FlashVars','clipName=sakura.flv&thumbnailFile=sakura.jpg', 'align', 'middle','scale', 'showAll','allowFullScreen', 'true','allowScriptAccess','sameDomain','movie', 'pegasys_flvplayer_wide','salign', ''); </script> </DIV> <DIV style="width : 86px;height : 16px;top : 14px;left : 8px; position : absolute; z-index : 2; " id="Layer2"></DIV> <DIV style="width : 91px;height : 16px;top : 14px;left : 8px; position : absolute; z-index : 1; " id="Layer3"> </DIV> </BODY> </HTML>
- 締切済み
- 画像・動画・音楽編集
- google画像検索のように画像を表示させたい
http://oshiete1.goo.ne.jp/qa4869855.html で質問した者です。 「googleのように 画像」で検索したところ http://okwave.jp/qa4567914.html このページがHITしました。 そこでNo3の方のソースを元に画像を表示させてみました。 ---ここから--- <style type="text/css"> <!-- p{ text-indent: 1em;} body>h1,body>h2{ text-align:center;} p.abstract{ margin-left: 20%; margin-right: 20%;} div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;} div.ImageList ol{ display:block; margin:0px; padding:0px;} div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;} div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;} div.ImageList hr{ clear:both;visibility:hidden;} div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em} --> </style> ---ここまで--- このスタイルシートについてなのですが、 画像のまわりについている黒の薄い線と、大きな青い線を消すことは出来ないでしょうか？ この二つの枠線を消してもっと画像どうしをギュッと詰め込みたいのです。 どの部分を削れば削除することが出来ますか？
- ベストアンサー
- HTML
- センターに表示をしたいのですが
ホームページビルダーでサイトを作成しています。 最近スタイルシートを勉強しています。 以前ページをセンターにするときは <div align="center"> コンテンツ </div> このようにしていました。 できれば スタイルシーと使いたいのですがセンターに来てくれません。 いまは <head> #content{ width : 760px; margin-left : auto; margin-right : auto; </head> <body> <div id="content"> コンテンツ </div> このようなソースを試したのですが、どこか間違っているのでしょうか。 アドバイスをよろしくお願いします。
- ベストアンサー
- 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"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
- フッターを固定したい…
上の写真のようにDivを組んでいるのですが、 Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか? Div4はCSSでbackground-imageとして画像(jpg)が指定されています。 ●html <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="body"> <div id="main"> <div id="div1"> <p class="clip"> <img src="clip.jpg"alt="New clip!"> </p> <p class="b-design"> <a href="design.html"> <img src="b-design.jpg"> </a> </p> <p class="b-photo"> <a href="photo.html"> <img src="b-photo.jpg"> </a> </p> <p class="b-mail"> <a href="mailto:a@com"> <img src="b-mail.jpg"> </a> </p> </div> <div id="div2"> </div> <div id="div3"> </div> </div> <div id="div4"> </div> </div> </body> </html> ●CSS * {margin:0; padding:0} body {background-color:black; width:100%;} img {border-style:none} #body {position:relative; margin: 0 auto; width:800px} #main {} #div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")} #div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")} #div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")} #div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")} .clip {position:absolute; top:30px; left:20px} .b-design {position:absolute; top:290px; left:30px} .b-photo {position:absolute; top:320px; left:30px} .b-mail {position:absolute; top:350px; left:30px}
- ベストアンサー
- HTML
- text-alignの解除の方法
text-alignの解除の方法ってありませんか？ 例えばhtml内に以下のタグがあるとして、 <div style="text-align:center;"> <div style="width:100px; height:120px; background-image:url(○○○.jpg)"> <div style="width 50px; height: 60px; position:absolute; margin-top: 20px; margin-left:5px"> <p>あいうえおあいうえお</p> </div> </div> </div> このような場合に<div style="width:100px; height:120px; background-image:url(○○○.jpg)">から、対応している</div>のtext-alignを解除する方法ってありませんか？ IEの標準には対応するのですが、互換だとブロック要素までもがセンタリングされてしまうため困っています。 分かりづらくて申し訳ありません。
- 締切済み
- HTML
お礼
回答ありがとうございます。 取り敢えず表メインでデザインしました。 今後GUIでさらに機械的に最適化されるソフトが出ることを期待しておきます。