Ｐａｇｅ 873 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼なぜがテキストが・・・ くーまん 04/12/16(木) 4:21 ┣Re:なぜがテキストが・・・ くーまん 04/12/16(木) 4:27 ┣Re:テキストが重なって見える 105 04/12/16(木) 22:55 ┗Re:なぜがテキストが・・・ むむりく 04/12/17(金) 1:54 ┗Re:なぜがテキストが・・・ くーまん 04/12/17(金) 13:14 ┗Re:なぜがテキストが・・・ Pid 04/12/17(金) 23:35 ┗Re:なぜがテキストが・・・ くーまん 04/12/18(土) 1:54 ─────────────────────────────────────── ■題名 ： なぜがテキストが・・・ ■名前 ： くーまん <goten@extra-shots.orz.ne.jp> ■日付 ： 04/12/16(木) 4:21 ■Ｗｅｂ ： http://chata.axisz.jp/test/ -------------------------------------------------------------------------
| なぜかテキストが重複されて表示されます。 「いらっしゃいませ。茶太屋へようこそ。」 の部分です。 環境によって違うのでしょうか・・・。 検証お願いします。 |
| 追記です。 アドレスを表記してませんでした。 ホームページには書いていたのですが・・・orz http://chata.axisz.jp/test/ です。宜しくおねがいします。 |
| ▼くーまんさん： >環境によって違うのでしょうか・・・。 >検証お願いします。 こんばんは。 重なって見えてしまったのは、どのブラウザで見た時でしょうか？ IE６だと普通に見えています。 |
| ▼くーまんさん： >なぜかテキストが重複されて表示されます。 >「いらっしゃいませ。茶太屋へようこそ。」 >の部分です。 > >環境によって違うのでしょうか・・・。 >検証お願いします。 float したブロック要素同士は重なることがありませんが、 float したものと、普通のブロック要素は重なり合います。 ですから、どちらかといえば、 Internet Explorer でそれらしく表示される方が間違いなのです。 今回の場合は、 #bottom に clear: both; とすることでいけるでしょう。 そして、div#bottom に、 background-position: left; background-attachment:fixed; とありますが、これは #bottom のボックスでなく、 画面の一番左に固定されます。 background-attachment:fixed; は不要だと思います。 それと、CSS の書き方にかなり無駄があります。 例えば、.menu の場合、 <ul id="navi"> の中でしか登場していないので、 ul#navi li { … } と書くことができます。 CSS Validator や HTML-lint では評価できない部分も多々ありますので、 引き続き頑張ってください。 |
| ▼105さん ▼むむりくさん レスありがとうございます。 当方が使用しているブラウザもＩＥ6.0です。 #bottomにclear: both; を記述しましたが、やはり当方の環境では重複されて見えます。 「いらっしゃいませ、茶太屋へようこそ。」 の「そ。」だけが下に重複して表示されるのです。 やはりブラウザによってＣＳＳの解釈が違うからでしょうか・・・・ http://chata.axisz.jp/test/ |
| おお，ストリクター (^^)。 >やはりブラウザによってＣＳＳの解釈が違うからでしょうか・・・・ うんにゃ。float の使い方の問題です。float を使うときは，要素を左右に動かしただけで安心しているとドツボにはまります。むしろ「後続する要素がどう流し込まれるか」が重要なポイントになるわけですが…詳しい解説はしかるべき所でお読み下さい (^^;)。おいらにゃ自信がない。 id/class 名の付け方や JavaScript 部分も微妙な部分があったので，私好みにいじってみました。もっとも，かなり不安もありますので，どなたかもっと良い案を。 ※以下，インデントに全角空白を使用しています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd[ONW]"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="shortcut icon" href="./img/chata.ico"> <script type="text/javascript"> function win_opn(url, w_width, w_left) { w_left = window.screen.width - w_width -20; status = "scrollbars=no, resizable=no, width=" + w_width + ", height=" + w_height + ", left=" + w_left + ", top=10"; window.open(url, "", status); } </script> <style type="text/css"> body { margin: 0; padding: 0; color: #000; background: #fff; font-family: "Osaka-等幅", sans-serif; font-size: small; } a:link, a:visited { color: #096; text-decoration: none; } a:hover, a:active { color: #096; text-decoration: underline; } .navi { background: #fff; } .navi li { border: 1px solid #ccc; background: #fff; list-style: none; text-align: center; } #navi-global { /* 幅固定は個人的に嫌いなのでしません。 */ margin: 0 0 15px 0; padding: 120px 0 0 10px; border: 1px solid #ccc; background: url('img/top.jpg') fixed no-repeat center top; } #navi-global li { margin: 2px; position: relative; top: -10px; float: left; /* display: table-cell が一番楽だが，IE は対応せず */ width: 90px; } #navi-local { margin: 5px 20px; padding: 0; float: left; clear: left; width: 160px; } #navi-local li { margin: 10px 0; padding: 10px 0; } .main { margin: 0 0 0 200px; color: #999; } h1 { display: none; } hr { visibility: hidden; } address { margin: 5px 0 0 0; padding: 0 0 0 205px; border: 1px solid #ccc; clear: left; height: 40px; overflow: auto; color: #363; background: url("/img/chata1.jpg") no-repeat left center; font-size: x-small; font-style: normal; line-height: 120%; } </style> <title>茶太屋サンプルページ</title> </head> <body> <h1>茶太屋サンプルページ</h1> <hr title="ここからサイト内の主な内容へのリンクです。"><!-- 非 CSS 環境用の区切り --> <ul class="navi" id="navi-global"> <li><a href="info.html">お知らせ</a></li> <li><a href="chata.html">茶太</a></li> <li><a href="usagi.html">ウサギキノコ</a></li> <li><a href="order.html">依頼について</a></li> <li><a href="history.html">参加履歴</a></li> <li><a href="./cgi-bin/bbs/">掲示板</a></li> <li><a href="./cgi-bin/mail/mail.cgi" onclick="win_opn(this.href, 300, 400); return false;">メール</a></li> <li><a href="link.html">リンク</a></li> </ul> <hr title="ここから関連ページへのリンクです。"><!-- 非 CSS 環境用の区切り --> <ul class="navi" id="navi-local"> <li><a href="index.html">はじめに</a></li> <li><a href="show.html">参加作品紹介</a></li> <li><a href="schedule.html">参加予定</a></li> <li><a href="faight.html">応援しているもの</a></li> </ul> <hr title="ここから本文です。"><!-- 非 CSS 環境用の区切り --> <div class="main"> <p>いらっしゃいませ。茶太屋へようこそ。</p> </div> <hr title="ここから著作権などについての情報です。"><!-- 非 CSS 環境用の区切り --> <address> このサイトはリンクフリー（link free 「リンク無し」）ではありませんので，リンクはご自由にどうぞ（feel free to link）。もしデザインが著しく崩れる場合，お手数ですが CSS 機能をオフにするか，もしくはユーザースタイルシートにてご利用下さい。 </address> </body> </html> |
| ▼Pidさん： レスありがとうございます。 参考にさせていただきながら自分なりに文章構成を見直して なんとか直せました。 みなさんありがとうございました。 |