- 締切済み
CSSによるレイアウトが崩れてしまう現象について
Adobe Dreamweaver CS4にて、ヘッダー、TOPメニュー、SIDEメニュー、コンテンツ、フッターというよくある構成でHPを作成しております。 レイアウトを組んでみたところ、Firefox4ではキチンと表示してくれるのですが、Internet Explorer6では、左メニューがやや右ズレをおこし、右のmainコンテンツが下に回りこんでしまうという現象となってレイアウトが崩れてしまいます。 もうひとつ、右mainの下の「株式会社●●」を右寄せに指定しているハズなんですが、どうしても左になってしまい、指定がきいてくれません。 この2つ原因がわからずに困っております。 お教えいただけませんでしょうか。よろしくお願い致します。 <body> <div id="page"> <!---ヘッダーここから-------------> <div id="header"> <div id="header_title"></div> <div id="header_info">TOPコメント…</div> </div> <!---ヘッダーここまで-------------> <!---TOPメニューここから----------> <div id="topmenu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="services.html">PRODUCTS</a></li> <li><a href="contact.html">CONTACTS</a></li> <li><a href="contact.html">help</a></li> </ul> </div> <!---TOPメニューここまで----------> <!---左メニューここから----------> <div id="left"> <div id="leftmenu"> <ul> <li><a href="index.html">Category1</a></li> <li><a href="company.html">Category2</a></li> <li><a href="company.html">Category3</a></li> <li><a href="company.html">Category4</a></li> </ul> </div> </div> <!---左メニューここまで----------> <!---メインここから--------------> <div id="main"> <div id="midashi"> <h2>CONTACTS</h2> </div> <div id="contents"> <p> </p> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 <br /> <br /> </p> <table width="500" bordercolor="#66CCCC" border="0" cellspacing="0" cellpadding="0"> <tr> <th bgcolor="#FFFFDF"> <p><span class="tx12pt_ore">サンプルテキスト。</span><br /> </p> <ul> <li>・サンプルテキスト</li> <li>・サンプルテキスト</li> <li>・サンプルテキスト<br /> </li> </ul></th> </tr> </table><br /> <br /> <span class="tx12pt_ore">【サンプルテキスト】</span><br /> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <br /> <span class="txtright">株式会社●●</span> </div> <!---ページトップここから------------> <div id="pagetop_back"> <a href="#top"> <img src="../all_img/mpage-top.gif" alt="ページトップへ" width="100" height="20" border="0" /> </a> </div> <!---ページトップここまで------------> </div> <!---フッターここから------------> <div id="footer"> <div id="copyright"> <h3>このページは、株式会社●● が運営しています。<br /> Copyright(c) ～～～～Ltd Institute. All Rights Reserved. </h3> </div> <ul> <li><a href="#">サンプルメニュー1</a></li> <li><a href="#">サンプルメニュー2</a></li> <li><a href="#">サンプルメニュー3</a></li> </ul> </div> </div> <!---フッターここまで------------> </div> </body> ≪CSS≫ #page { width: 780px; margin-right: auto; margin-left: auto; background-image: url(all_img/page.gif); } #header { width: 740px; height: 80px; margin-right: auto; margin-left: auto; background-image: url(all_img/header.gif); } #topmenu { width: 740px; height: 40px; margin-right: auto; margin-left: auto; background-image: url(all_img/topmenuber.gif); background-repeat: no-repeat; } #left { width: 178px; height: 1300px; float: left; margin-left: 20px; background-image: url(all_img/sideback.gif); background-repeat: repeat; } #main { float: right; height: auto; padding: 0; background-color: #FFF; width: 560px; margin-top: 20px; margin-right: 20px; } #contents { width: 500px; height: auto; margin-left: 30px; } #contents .txtright { color: #033; text-align: right; } #footer { width: 740px; height: 80px; clear: both; margin-left: auto; margin-top: 0px; margin-right: auto; }
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSS ★タブは全角スペースに置換してある。 html,body{margin:0;padding:0;} p{text-indent:1em;} div{border:solid 1px blue;} h1{margin-top:30px;padding-top:0px;text-align:center;} div.header,div.section,div.footer{ margin-left:180px;width:780px;margin-right:auto; } div.header div.summary{width:90%;margin-left:2em;} div.section div.section, div.section div.article, div.section div.aside{margin-top:2ex;padding:1ex 1em;} div.section div.section, div.section div.article{width:90%;margin-left:1em;} div.section div.aside{width:85%;margin-left:2em;border-style:dotted;} div.body div.nav{width:160px;position:absolute;top:140px;left:10px;font-size:0.8em;} div.section div.aside address{text-align:right;} div.footer,p.goTo{text-align:center;} div.footer div.nav{position:absolute;top:0;left:0;width:100%;} div.footer div.nav, div.footer div.nav ul, div.footer div.nav ul li{ display:block;height:18px;line-height:18px; margin:0;padding:0; } div.footer div.nav ul li{width:16%;float:left;border:solid 1px red;} div.footer div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;} div.footer div.nav ul li a:hover{background-color:yellow;}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML4.01strictでIE6の標準モード対応です。XHTMLへ変更するときはDTDと<html>の属性などをきちんと直してください。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。 HTMLのマークアップ、CSSの使い方がわかるように書きました。 たとえばaside(直訳=脇)は本文と関係ない文章、article(直訳=記事)は独立しうる記事とかが後でわかる。自分だけでなく将来のメンテナンス、読み上げブラウザ、そして検索エンジンに!!!。たとえ、デザインを左配置から右配置や下配置に変更したくなってもCSSだけ見ればよい。CSSも可能な限り同じ宣言が登場しないようにしてあります。 こんなにシンプルになってしかもわかりやすくなる。それであってもIE5ではナビゲーションがずれますが仕様には差し支えない。I6以降、他の標準ブラウザでもほぼ同じに見えるはず。 ★タブインデントが全角スペースに置き換えてあります。 <!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 name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- --> </style> </head> <body> <!-- ヘッダーここから --> <div class="header" id="TOP"> <h1>見出し</h1> <div class="section summary"> <p>TOPコメント…</p> <p>コメント</p> </div> </div> <!-- body section(本文)主題ここから --> <div class="section body"> <h2 id="main">CONTACTS</h2> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <p>このHTMLはDTDは4.01strictです。DTDにURLがあるのでIE6では標準モードで起動します。</p> <div class="section"> <h2 id="SAMP1">ポイント</h2> <p>文書構造でマークアップしてある。たとえば本文の目次は本文(body_section)ブロック内に、サイトナビはfooter内に、独立した記事で本文関連はarticle、本文に直接関係ないものはaside、</p> <p>section,article,aside,header,footer,figureなどのクラス名は、将来HTML5が普及したときは、そのまま要素名にできる。<div class="section">は<section>と・・</p> <p><strong>このように、文書構造にあわせてマークアップすることはオーサリングツールではできない</strong></p> <p>CSSも同様にグループ化やカスケーディングを活用するために手で書いたほうが良い。これらに対処したオーサリングツールは知らない!</p> </div> <div class="article" id="SAMP2"><!-- article(記事) --> <h2>サンプルテキスト。</h2> <ul> <li>サンプルテキスト</li> <li>サンプルテキスト</li> <li>サンプルテキスト</li> </ul> </div> <div class="section" id="SAMP3"> <ul> <li><a href="index.html">Category1</a></li> <li><a href="company.html">Category2</a></li> <li><a href="company.html">Category3</a></li> <li><a href="company.html">Category4</a></li> </ul> </div> <div class="aside"><!-- 本文から外れた記事 --> <h2>【サンプルテキスト】</h2> <p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト。 </p> <address>株式会社●●</address> </div> <p class="goTo"> <a href="#TOP"><img src="../all_img/mpage-top.gif" width="100" height="20" alt="Topへ"></a> </p> <div class="article head"><!-- article(独立記事/本文の一部なのでsection内 --> <div class="nav"><!-- ナビゲーションリスト --> <h2>サンプル</h2> <ul> <li><a href="#SAMP1">サンプルメニュー1</a></li> <li><a href="#SAMP2">サンプルメニュー2</a></li> <li><a href="#SAMP3">サンプルメニュー3</a></li> <li><a href="#COPYRIGHT">著作権者</a></li> </ul> </div> </div> </div> <!-- フッターここから --> <div class="footer"> <div id="COPYRIGHT"> <p>このページは、株式会社●● が運営しています。</p> <p>Copyright(c) ～～～～Ltd Institute. All Rights Reserved.</p> </div> <div class="nav"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="company.html">COMPANY</a></li> <li><a href="services.html">SERVICES</a></li> <li><a href="services.html">PRODUCTS</a></li> <li><a href="contact.html">CONTACTS</a></li> <li><a href="contact.html">help</a></li> </ul> </div> </div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
オーサリングツールってその程度のものです。酷いものですね。 HTMLやCSSを、手書きで自在に書ける人以上にHTMLやCSSを理解していないと使える代物ではありません、DreamWeaverに限らず、オーサリングツールはそういう人を対象にしているのですよ。(ここんとこ間違えている人が多いですね。DWにははっきりそのように説明があるので良心的です) ★IE5やIE6の互換モードは内容幅の解釈が異なります。 IE5は無視して、IE6の標準モード対応としましょう。 ★ブロック要素以外は、内容の量で幅が決まりますからtext-alignは意味がありません。 ブロック要素・インライン要素・置換要素・非置換要素と言う言葉と意味は覚えましょう。ひとつの段落ですから<p>でマークアップ ★デザインのためにIDを決めることは止めましょう。 セレクタのグループ化やせっかくのカスケーディングが機能しなくなります。 ★CSSはその名前のとおりカスケードを使いましょう。 これはオーサリングツールでは無理です。 ★そのまえに適切なHTMLが必要です。 これもオーサリングツールでは無理、作者が知っていなければならないこと <p> </p>は空白文字しか含まない段落はありえない。、<br/>も同様。 スタイルシートで配置のためのtableはだめ、表でないものにtableのマークアップはだめ! width="500" bordercolor="#66CCCC" border="0" cellspacing="0" cellpadding="0" はスタイルシートで・・ 極めて単純なHTMLとCSSで実現できます。 後で暇を見つけて
- doruti
- ベストアンサー率34% (9/26)
こんにちわ。 IE6環境ではないので確かではありませんが少しだけ調べてみましたので、試してみてください。 □問題(1)□ 左メニューがやや右ズレをおこし、右のmainコンテンツが下に回りこんでしまう ■原因■ #leftと#mainを足したwidthがページのwidthを超えているのが、原因かもしれません。 確かではありませんがFirefox4では表示できるのは、marginの扱い方が異なっているのが原因かと思います。 ■解決■ #leftなり#mainのwidthやmarginを調整する □問題(2)□ 右mainの下の「株式会社●●」を右寄せに指定しているハズなんですが、どうしても左になってしまい、指定がきいてくれません。 ■原因■ <span>要素にはtext-alignは効かない気がします。 ■解決(1)■ <span>要素を<p>,<div>などに変更する 例 <span class="txtright">株式会社●●</span> ↓ ↓ ↓ ↓ ↓ <p class="txtright">株式会社●●</p> ■解決(2)■ スタイルシートでfloatを追加する #contents .txtright { color: #033; text-align: right; } ↓ ↓ ↓ ↓ contents .txtright { float: right; color: #033; } 以上です。 最後に もしWEBページをお作りであれば、IE7以降が標準になりつつあるのでアップデートすることをお勧めいたします。
お礼
早々のご返答ありがとうございます。 widthを変えてやってみましたが、左メニューの右ズレは解消されませんでした。 #mainのwidthをかなり少なくすると回り込みはなくなりました。 文字の左寄りのほうは、ご教授いただいたとおりに<span>要素を<p>に変更しましたら、なおりました。 ありがとうございます。 最近の標準はIE7以降なんですね。まだIE6を使われてる方が多いかもしれないと思い、6にバージョンダウンして確認しておりました。できましたら、IE6でキチンと見えるようにつくっておきたいと思います。
お礼
丁重なご教授ありがとうございます。 一度ご教授いただいた内容でやってみたいと思います。 取り急ぎ、お礼まで。
補足
ご教授いただいた内容でやってみましたが、現在のところ上手くいきませんでした。 初心者ですので、ご教授いただいた内容がまだまだ理解できないところも多く、今後の勉強とさせて頂きます。 ありがとうございました。