- 締切済み
W-ZERO3（WS003）でセンタリングされない
私はMK-BOARDという掲示板レンタルサービスを利用しているのですが、 その掲示板を閲覧するときにW-ZERO3から見ると[.block]がセンタリングされないのです。PCではIE6，Fire Fox，Chromeなどで表示確認しました。他にもWindows Mobileで動くOpera Mobileで確認したところ[.block]はセンタリングされていました。 これはIE MobileのCSSレンダリングに問題があるのか、若しくはDoctype宣言をしていないことによる後方互換の影響なのか 原因が全くわかりません。 ここにサイトのソースを記述いたします。 ちなみに[.block]などのクラスは掲示板に初めから <div class="block">などと記述されていました(CSS内には元々存在していなかった)のでそれを装飾しました。 ご指南を頂ければ幸いです。 <html lang="ja"> <head> <meta http-equiv="cache-control" content="no-cache"> <title>Guest Book</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ font-size:82%; background-color:#ffffff; color:#000000; margin-left:auto; margin-right:auto; text-align:center; width:470; } h1{ color:#000000; font-size:82%; } a{ text-decoration: none; } a:hover{ background-color: #CCCCFF; color: #0000FF; } /* ------------------------------ No、返信数 TOPテーブル ------------------------------ */ /* margin= 上、右、下、左 */ .block{ margin:10px 0px 10px 0px; border: dotted 1px #000000; width:300; margin-left:auto; margin-right:auto; text-align:left; } .block hr{display:none;} /* ------------------------------ 最下段ナビゲーション ------------------------------ */ .top{border: dotted 1px #000000;margin-top:10px;} /* ------------------------------ フォーム ------------------------------ */ .topmj{text-align:left;} /* ------------------------------ テーブル第一階層（レス番号、名前、時刻） ------------------------------ */ .p{ background-color: #000000; color:#ff0000; margin-bottom: 8px; margin-top: 8px; } /* ------------------------------ テーブル第二階層(コメント内部） ---------------------------------*/ .bbs{background-color: #FFFFFF;color:#000000;} .bbs a{} .bbs a:hover{background-color:#FFCC33;color:#ff0000;} --></style> </head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000" alink="#00ff00"> <h1 align="center">Page Title</h1><hr> <div class="bgcolor"> <div align="left"> <a href="AAA" accesskey="2">TEXT</a>/<a href="<div class="thread"><a href="TEXT">TEXT</a></div> ">TEXT</a>/<a href="#footer" name="head">▼</a><br> </div> <hr> <div align="left"><div><a href="http://tool-1.net/">フリーページ</a>☆<a href="http://tool-1.net/top30.html">人気サイト30</a>☆<a href="http://tool-1.net/navi/">FPサイトナビ</a></div></div> <hr> <div class="block"> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> <div class="thread"><a href="TEXT">TEXT</a></div> </div> <hr> <div align="left"> <a href="AAA" accesskey="3">次へ</a>/<a href="#head" name="footer">▲</a><br>【<a href="AAA">TOP</a>】<br> <a href="AAA">選択</a>/<a href="AAA">説明</a>/<a href="login.cgi?id=marbo">編集</a>/<a href="regist.cgi">新規</a><br> </div> <div class="top"><div class="topmj" align="left"> 500 件中 1～10<br>[<a href="http://mk-board.net/">MK-BOARD</a>] </div></div> </div> </body> </html>
- remiel
- お礼率92% (24/26)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
<div class="block">自体をセンタリングなのか、中身のTEXTをセンタリングなのか？ <div class="block">自体なら、コレを別途のブロック要素でセンタリングすれば良いのでは？ 実機が無いので確認出来ませんが。
関連するQ&A
- 背景色を入れたいのですがよろしくお願いいたします。
<!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="xxxxxxxx" /> <meta name="keywords" content="xxxxxxxx" /> <title>xxxxxxxx </title> <link ref="stylesheet" type="text/css" href="cut.css" /> <style type="text/css"> body {margin: 0px 5em; } #container { width:800px; margin-left:auto; margin-right:auto; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; border-color:#000000; } #header {background-color:#ffffff;}←ここの色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ h1 { margin-left:20px; color:#ffffff; font-size:1.25em; padding-top:30px;} ul {list-style-type:none; margin-left:100px; padding-left:0px;} li {display:inline; padding-right:20px; font-size:1.0em;} li a {text-decoration:none; line-height:2.2 } a { color:#000000} a:hover {color:#990000; } address a:hover {color:#990000;} p { font-size:1.25em; margin-left:50px; color:#ffffff;} .isu {text-align:right; margin-right:2px; } .moji {font-size:2em; line-height:200%; } .name { color:#ffff99; text-align:right; margin-right:50px; margin-bottom:50px; text-align:bottom;} .champ {text-indent:1em; font-size:2em;} .midasi { color:#ffff99; text-align:bottom; margin-left:100px; } .coment { color:#000000; text-align:left; margin-left:150px; line-height:2em; width:600px;} .http {font-size:0.9em; color:#000000; text-align:right; margin-right:0px; line-height:2em; padding-right:30px;} .denwa {color:#000000; text-align:right; line-height:2em; padding-right:30px;} hr {background-color:#000000; height:2px; width:250px; align-right;} .addless {text-align:right; color:#000000; padding-right:30px;} </style> </herd> <body> <div id="container"> <div id="header">←ここから <h1>xxxxxxxx </h1> <p class="isu"><img src="isuA.jpg" alt="xxxxxxxx" align="right" width="400px" height="250px" /> <br /> <p class="moji" >xxxxxxxx</p> <p class="champ">xxxxxxxx</p> <p class="midasi">xxxxxxxx</p> <p class="name">xxxxxxxx</p> <br /clear="all"></p> <br /> </div>←ここまでの背景色を黒に変えたいのですが変わりません。 どうすればいいのでしょうか？ <br /> <br /> <p class="http">xxxxxxxx</p> <p class="addless">xxxxxxxx</p> <hr width="250" size="10" align="right"> <p class="denwa"> (黒電話) xxxxxxxx</p> <ul> <li><a href="top.html">トップページ</a></li> <li><a href="profile.html">プロフィール</a></li> <li><a href="staff.html">スタッフ</a></li> <li><a href="ryoukin.html">メニュー・マップ</a></li> <li><a href="mail.html">お客様メール</a></li> </ul> <br /> <br /> <p class="coment">xxxxxxxxxxxxxxxxxxxxxxxx</p> <br /> <br /> <br /> <address>Copyright(C)<a href="mailto:saitou@gmail.com">Hair Salon Saitou</address> </div> </body> </html>
- ベストアンサー
- Windows XP
- リンクの色について
スタイルシート部分を .navi1 a:link, .navi1 a:visited{ display:block; background-image:url(images/1.gif); text-decoration:none; line-height:30px; font-size:12px; text-align:left; height: 30px; padding-left:11px; font-weight: bold; color: #00FF00; } .navi1 a:hover, {text-decoration:none; color:#FFFF00;} .top a:link, .rank a:visited{ color:#379E02; } .top a:hover{ color: #FF0066;} HTML部分を <div class="navi1"><a href="#">テキスト１</a></div> <div class="top"><a href="#">テキスト２</a></div> とした時に、IEでは思ったように表示されるのですが FirefoxやChromeではテキスト１は#00FF00のままマウスを乗せても色が変わらず テキスト２は色が紫になっています。 これをIEと同じ様に表示させるにはどうすればいいのでしょうか？
- ベストアンサー
- HTML
- ４枚の画像を均等間隔で一列に並べる
４枚の画像を一列に並べようと思います。 ４枚に与えられたスペースは550pxです。画像の下のコンテンツも550pxを基準に配置するので、４枚のうちの両側の２枚は550pxの両端に配置しようと思います。 この趣旨でコーディングしたのが下記URLです。 http://makoji.web.fc2.com/test/test_18/test.html 他の画像を margin-right: 14px; とすると綺麗に並びました。ただ確認をとったのは最近のブラウザだけで、古いブラウザでどうなっているのか分かりません。過去の例でうまく並んだと思ったらIE6.0で４枚目が２列目に改行されてしまっていたことがあります。 そこでmarginをブラウザに自動割り振りさせることが出来ないものかと思案するのですが・・・ とりあえず右端の画像を右端に寄せるために margin-right: 0px; margin-left: auto; としてみましたがダメでした。でも width: 125px; もしくは float: right; を挿入すれば解決できます。 しかしながら真ん中の２枚をどうすれば均等に配置できるかが分かりません。 この場合、古いブラウザを試せる環境を全部揃えて片っ端からチェックを入れるしかないのでしょうか。 -------------------------------------------------------------------------------- <!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"> <!-- * { font-size: 14px; font-wight: 100; color: #000000; } .wrap { margin: 0px auto; width: 700px; } .logo { border: solid 1px #FF0099; } .main { padding-top: 15px; padding-bottom: 15px; border: solid 1px #FF0099; } .main img { margin-right: 2px; float:left; display: block; } .menu { float: left; margin-top: 0px; margin-left: 10px; padding-left: 0px; } .menu li { margin-bottom: 2px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; width: 100px; list-style-type: none; background-color: #FFCCFF; } .list span { color: #FF0099; } .menu a:link { color: #FF0099; } .menu a:visited { color: #FF0099; } .menu a:active { color: #FF0099; } .menu a:hover { color: #FF0099; } .clear { clear: both; } /* インデックス */ .index_body { margin-top: 15px; padding-left: 133px; } .sample { margin-bottom: 10px; width: 550px; text-align:center; background-color: yellow; } .sample a { text-decoration: none; } .sample img { border: solid 1px #FF0099; float: none; } .sample .left { float: left; margin: auto auto auto 0px; text-align: center; } .sample .middle { float: left; margin: auto; text-align: center; } .sample .right { margin-right: 0px; margin-left: auto; text-align: center; } --> </style> </head> <body> <div class="wrap"> <div class="logo"> <img src="dot_999999.gif" width="698" height="120"> </div><!-- end of "logo"--> <div class="main"> <ul class="menu"> <li>ああ</li> </ul><!-- end of menu --> <div class="index_body"> <div class="sample"> <div class="left"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of "left" --> <div class="middle"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of 1of"middle" --> <div class="middle"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of 2of"middle" --> <div class="right"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of "right" --> </div><!-- end of "sample" --> <div><img src="dot_999999.gif" width="550" height="450" alt="" /></div> <div class="clear"></div> </div><!-- end of "index_body" --> </div><!-- end of "main" --> </div><!-- end of "wrap" --> </body> </html>
- 締切済み
- HTML
- テーブル内の文字が揃わない
検索したのですが、見当たらないので質問させてください。 私は、ほとんど無知でコピペやテンプレを利用させてもらってホームページを作っている初心者です。 テーブルの中の文字が下のテーブルの文字の位置と合わなくて困っております。 cssは外部から呼び出しで、 ------- .t{ font-size:15px; color:#666; margin:1px 8px; text-align:right; } .t:first-letter{color:#e68080;} .text2{ line-height:18px; margin:2px 0px 20px 0px; border:1pt dotted; padding:8px 2px 8px 2px; color:#e69999; } ------ htmlは ------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="left.css"> <title>diary</title> <base target="main"> </head> <body> <div class="t">blog1</div> <div class="text2"><a href="http://■.jp">日記1</a></div> <div class="t">blog2</div> <div class="text2"><a href="http://●/">日記2</a></div> <div class="t">diary</div> <div class="text2"><a href="http://▲">日記3</a></div> </body> </html> ----- と記述しています。 この日記2と日記3の文字の開始位置はマージンで指定した左で揃っているのですが、 日記1が下の２つよりもっと左に表示されてしまいます。 別のページではテーブル内をテキストではなく、画像で使用しているのですが、 同じく１つ目のテーブルの中の画像だけが左に寄り過ぎており、 加えて別のテーブルではスペースが余計に空いていて、最初のオンマウスで位置が詰まります。（画像が動きます） テーブルを消してみたりしたのですが、文字位置は変わらないので原因はテーブルではないと思うのですが… どこをいじったら解消されるのかがわかりません。 説明が下手でわかりにくいかと思いますが、どなたかご回答宜しくお願いいたします。 記述しているソースがお門違いでしたら、貼り付けなおします。
- ベストアンサー
- HTML
- Javascriptでツリーメニュー（Aタグ使用） 画像を右揃えにするには？
Aタグを使ってJavascriptのツリーメニューを作っているのですが、右揃えにならず、困っています。 下記ソース内で、テキスト「1.ツリーメニュー」は左揃えで、画像（main_a.gif）は右揃えにしたいのです。DIVやSPANで試しましたが、私の力不足でうまくいきません。 どなたか教えていただけませんか？ <HEAD> <STYLE> .no_border { vertical-align: middle; text-align: right; border-style:none; } A.main { display: block; width: 100%; color: #000000; background-color: #0000FF; margin: 3px; padding: 6px 6px 6px 1px; font-size: 14px; line-height: 14px; text-align: left; text-decoration: none; padding-left: 5px; } A.main:hover { color: #000000; background-color: #FF0000; margin: 3px; padding: 6px 6px 6px 1px; padding-left: 5px; } A.main:active { color: #333333; } A.main:visited { color: #333333; } A.main:focus { color: #333333; } A.sub_chan { display: block; width: 100%; color: #000000; background-color: #0000FF; margin: 3px; padding: 3px 3px 3px 3px; padding-left: 10px; font-size: 12px; line-height: 12px; text-align: left; text-decoration: none; } A.sub_chan:hover { color: #333333; background-color: #FF0000; margin: 3px; padding: 3px 3px 3px 3px; padding-left: 10px; } A.sub_chan:active { color: #333333; } A.sub_chan:visited { color: #333333; } </STYLE> <SCRIPT language="JavaScript"> flag = false; function treemain(tName) { tmain = document.all[tName].style; if(tmain.display == 'none') tmain.display = "block"; else tmain.display = "none"; </SCRIPT> </HEAD> <BODY> <A href="javaScript:treemain('treemain1')" class="main">1.ツリーメニュー<img src="../img/main_a.gif" class="no_border" alt="メニューA" width="20" height="20"></A> <DIV id="treemain1" style="display:none"> <A href="http://yahoo.co.jp" class="sub_chan">⇒1-1.</A> </DIV> </BODY>
- ベストアンサー
- HTML
- CSSでテーブルを使わずにレイアウト
以下のソースでなんとかレイアウトできたのですが 左よせではなくセンターよせにしたいのですがどのように記述すればよいでしょうか？CSSの対応していないブラウザの場合にメニューを下部メニューにしたいため p.menu は下部に記述しています。 -- css -- body { width:700px; margin:0px; font-size:12px; color:#ffffff; } p.head { height:15px; margin:0px auto; background-color:#0000ff; } .text { width:500px; text-align:left; margin:0px 0px 0px auto; background-color:#aa0000; } p.menu { width:200px; background-color:#dddddd; position:absolute; left:0px; top:15px; } -- html -- <body> <p class="head"> タイトル </p> <div class="text"> あいうえおかきくけこ </div> <p class="menu"> <a href="">menu1</a> </p> </body>
- ベストアンサー
- HTML
- IEとFireFoxでCSSの見た目をそろえたい
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p> </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }
- ベストアンサー
- CSS
- css 各divの内容を上に揃えたいです。
こんにちは、初心者です。宜しくお願いします。 <main>の右は<side2>ですが、mainの画像BBBの真横に、side2の内容が表示されず、真横ではなくて、BBBのやや斜め右下に表示されるんです。 全体を中央揃えにしてから、このような問題にぶつかりました。 mainとside2の内容を上先頭で揃え、ブラウザの大きさを変えても中央を基準に内容も動くようにしたいです。 ご教授のほど、よろしくお願い致します。 ---------------------------------------------- <html> <head> <title>○○</title> <link href="design/shop_index02.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <div class="top"> <h1>○○</h1> <h2> ○○</h2> </div> <div class="middle"> <a href="○○"> <img src="../img/logo.gif"></a> </div> <div class="main"> <a href="●●"> <img src="BBB"></a> </div> <div class="side2"> <a href="●●"> <img src="●●.gif"></a> <h3>●●</h3> <p>●●</p> </div> </div> </body> </html> ---------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#BDB76B; text-align:center; } body a img{ border: none; } .contents{ width:900px; height : 2700px; background-image:url(○○); margin:auto; text-align:left; clear:both; } h1{ color:#c0c0c0; font-size:12px; text-align:center; font-family:"ＭＳ 明朝"; } h2{ font-size:10px; font-family:"MS P明朝","細明朝",serif; color:#c0c0c0; margin-left:8px; } h2 a{ font-family:"MS ゴシック","osaka,sans-serif"; font-size:10px; color:#CC6600; } h3{ font-size:13px; font-family:"MS P明朝","細明朝",serif; color:#669900; } h3 img{ margin-left:720px; } .top{ width:900px; height:170px; margin-left:80px; } .middle{ width:900px; height:170px; margin-left:100px; color:#999999; margin-top:40px; } .main { width:700px; margin-top:60px; margin-left:80px; float:left; } .side2{ width:200px; margin-top:60px; margin-left:700px; } .side2 p{ color: #999999; font-family:"MS P明朝","細明朝",serif; font-size:10px; width:160px; text-align:left; } .side2 a{ color:#CC6600; text-decoration:none; }
- ベストアンサー
- HTML
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜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"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
お礼
これ以上の回答は期待できないため。 これにて質問を締め切らせて頂きます。 貴重なお時間の中からのご回答誠に感謝致しております。
補足
中身のテキストではなく<div class="block">自体をセンタリングしたいのです。この問題のクラスの上に[.bgcolor]というクラスがあり そこに[.block]がネストされています。 この[.bgcolor]にもセンタリングを試みましたが WS003の画面では[.block]が左に寄ったまま... このズレはW-ZERO3の縦表示モード、横表示モードどちらでも発生することを確認しています。