Dreamweaverのメニューが乱れる

締切済

質問者：tyamag17
質問日時：2011/11/12 16:01
回答数：4件

Dreamweaver CS3を使ってウェブホスティングしています。　Spryを使ったナビゲーションメニューをテンプレートにして50ページほどのサイトになっています。　自分で悪さをした結果でしょうが、あるとき、左側に縦置きにしているナビゲーションメニュー（子・孫格納したもの）がずらーっと縦置き一覧表示になって全頁のタイトルが一列表示されるようになってしまいました。　全タイトルにはリンクがついているのでナビゲーションからページを選ぶことは可能ですが超縦長ページになってしまい、みっともないです。　テンプレートをDWで見る限りでは異常はありませんが、テンプレートから作成したページはオフラインでも狂っています。　過去にも何回かあったのですが、わけのわからないままにいじくっていたら治っていました。　　お知恵を拝借いたしたく、ご教示ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： ORUKA1951
回答日時：2011/11/13 23:57

了解です。

ただ、CSSやHTML自体に詳しくないとすると、崩れる原因は、
スタイルシートのセレクタを弄くった可能性は低いと思われますから、HTMLのIDがclass名を変えてしまったため、スタイルシートのセレクタがターゲットとする要素と、HTMLの要素が合わなくなったためでしょう。
　どのオーサリングツールも、カスケーディングをまったく理解できませんから、HTMLに個別にIDなり、class名を振ってしのいでいます。これは著者がカスケーディングを理解して指定しない限り、原理的に無理です。
　逆に、出来上がっているCSSを開いて、私が「コメントアウト」と示した部分を設定している部分を見つけるのがたやすいでしょう。
・display:block;
・position:absolute;
の部分です。

カスケーディングについては、
6.4 カスケード処理（The cascade） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
をお読みください。

- 0
- 件

通報する

この回答へのお礼

何とか解決したと思います、

ファイルの構成ツリーは標準のままで、以下のようになっています。
(root)
Templates/
.SpryAssets/
..SpryMenuBar.js
..SpryMenuBarVertical.css
.MyTemplate.dwt
.....
cssfile.css
page1.html
page2.html
page3.html

テンプレートファイル(MyTemplate.dwt)はルートディレクトリー上のフォルダー(Templates/)に格納され、自身と同レベルにあるフォルダー(SpryAssets/)に格納されたcssファイル(SpryMenuBarVerical.css)およびルートディレクトリー上にあるcssファイル（cssfile.css)を参照している。

不具合状況はテンプレートファイルをデザインビューで見て、Spryメニューバーのプロパティでスタイルをオフにした時と全く同じ状況。　ということから、テンプレートファイルを個々のファイルに反映した後にスタイル情報をつなぐリンクが切れていると推定し、良かった時と現在のページ(page1.html)のコードをプリントアウトして比較しました。

途中経過を飛ばして、、、、
分かったこと、不具合のあるpage1.htmlの<body>の前に、
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
これではルートディレクトリーにはないディレクトリーを指定している

まともに作動した時のpage1.htmlでは同一部分は、
<script src="Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="Templates/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
となっており、無事つながっています

一方では、テンプレートファイル（MyTemplate.dwt)のコードを見ると両方とも同じで、
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

以下は私の推定です。
テンプレートファイル自身から見ると、これら二つのコードファイルは甥っ子（同列のフォルダー,SpryAssetsの子）だが、テンプレート情報を上位にあるpage1.htmlに反映すると、そのページからは甥孫（同列フォルダー、Templatesの孫）になり、プログラムはそのパス情報を自動的に書き換えるはずですが、別のところからテンプレートファイルを持ってきて上書きしたり名前を書き換えたりと乱暴なことをしたために、そのリンク関係の情報が狂ってしまったのでしょう。

対策
テンプレートファイルを開いて該当部分のコードを絶対パス（../Templates/SpryAssets/,,,)に書き換えて強制的に再適用、これで治りました！テンプレートファイルはDreamWeaverの外でいじくってはいけないことを再認識しました。

通報する

お礼日時：2011/11/17 18:06

No.3

回答者： ORUKA1951
回答日時：2011/11/13 19:30

　画像、拝見しました。

原因はわかりましたが、それを修正するにはHMLとCSSの解析が必要です。
　HTMLは、必ずその樹構造を解析してください。(DOM)
　その上で、セレクタとその詳細度を計算して適用を確認してください。

[例]先の回答のHTMLにサブ・サブリストを追加したものを最後にあげておきます。
このHTMLで示してある部分をコメントアウトすると、再現されるはずです。
理由は、ここで指定してあるスタイルが適用されていないのですが、それがなぜ適用されないかは、HTMLかCSSのいずれかに原因があるのです。
　下記サンプルのように、HTMLとCSSは手で書いたほうがシンプルでわかりやすいのです。ここをツールに頼ると「ワケワカメ」になりますね。ツールが作成したややこしくて複雑なHTMLやCSSを読み解くのは、プロでも容易ではありません。勘弁して・・
　この様にしたいと言う希望で、ゼロから作るほうが楽です。下記ソースなら、あなたでも理解できるはずですし、直すのも簡単ですね。

★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )
で検証済み。ウェブ標準です!!

<!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:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<h1>サンプル</h1>
<div class="nav">
＿<h2>メニュー</h2>
＿<ul>
＿＿<li><a href="./1">メニュー１</a>
＿＿＿<ul>
＿＿＿＿<li><a href="./1/1">サブ１-1</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="./1/1/1">サブ1-1-1</a></li>
＿＿＿＿＿＿<li><a href="./1/1/2">サブ1-1-2</a></li>
＿＿＿＿＿＿<li><a href="./1/1/3">サブ1-1-3</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="./2">サブ１-2</a>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="./1/2/1">サブ1-2-1</a></li>
＿＿＿＿＿＿<li><a href="./1/2/2">サブ1-2-2</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li><a href="./1/3">サブ１-3</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="./2">メニュー２</a>
＿＿＿<ul>
＿＿＿＿<li><a href="./2/1">サブ2-1</a></li>
＿＿＿＿<li><a href="./2/2">サブ2-2</a></li>
＿＿＿＿<li><a href="./2/3">サブ2-3</a></li>
＿＿＿
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="./3">メニュー３</a>
＿＿＿<ul>
＿＿＿＿<li><a href="./3/1">サブ3-1</a></li>
＿＿＿＿<li><a href="./3/2">サブ3-2</a></li>
＿＿＿＿<li><a href="./3/3">サブ3-3</a></li>
＿＿＿</ul>
＿＿</li>
＿</ul>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん、
引き続きのフォローアップありがとうございます。　自分のお勉強を続けてサイトユーザーに不便をかけるわけにはいかないので、まともなメニュー表示をしていたころのデータに丸ごと入れ替え、ページごとに更新してとりあえず急場をしのぎました。　テンプレートをわずかでも変えて全ページに適用すると、メニューがぐちゃぐちゃになるのを経験したので、少々不便でも当面はページの修正だけでしのぎます。

ご指導いただいたこと、私には少々荷が重いのですが、オフラインで並行してスタディーしていきます。　英語版ソフトを苦労して使っています、マニュアルは日本語版をダウンロードできたので、さほど不便さはありません。　しばらく時間が必要かと思いますが、過去のようになんだかわからないが治ってしまった！とならないよう、教えていただいたサイトで勉強しつつ、理屈で考えながら進めます。
見通しがついたらこの場でご報告します。

通報する

お礼日時：2011/11/13 22:28

No.2

回答者： ORUKA1951
回答日時：2011/11/13 07:54

現象自体がわからないのですが、

最初の質問文では、縦に並んでしまうと読めた(横に並べたい？)ので、あのように回答したのですが、補足によると、本来は隠しておきたい２階層目のリスト項目が現れたままとも読み取れます。
　その場合のスタイルシートは
ul li ul{dispaly:none;}　詳細度[0 0 0 3]
ul li:hover ul{display:block;} 詳細度[0 0 1 0]
となるはずです。擬似クラス分、詳細度が高いから。
　仕組み自体は、下記サンプルのように極めてシンプルなもののはずです。

★きちんと消してあり、かつ擬似クラスで上書きされているか確認。HTML,CSS文法ミスのために適用されていない可能性もあるので下記サイトなどでチェックしてみること。

Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input )

例)タブは＿に置換してある
<div class="nav">
＿<ul>
＿＿<li><a href="./">トップ</a>
＿＿＿<ul>
＿＿＿＿<li><a href="">サブ１-1</a></li>
＿＿＿＿<li><a href="">サブ１-2</a></li>
＿＿＿＿<li><a href="">サブ１-3</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="./">トップ</a>
＿＿＿<ul>
＿＿＿＿<li><a href="">サブ2-1</a></li>
＿＿＿＿<li><a href="">サブ2-2</a></li>
＿＿＿＿<li><a href="">サブ2-3</a></li>
＿＿＿
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="./">トップ</a>
＿＿＿<ul>
＿＿＿＿<li><a href="">サブ2-1</a></li>
＿＿＿＿<li><a href="">サブ2-2</a></li>
＿＿＿＿<li><a href="">サブ2-3</a></li>
＿＿＿</ul>
＿＿</li>
＿</ul>
</div>
の場合
div.nav ul,div.nav ul li{
＿display:block;
＿list-style:none;
＿margin:0;padding:0;
}
div.nav ul li{
＿width:100px;
＿border:solid 1px blue;
＿line-height:1.6em;
}
/* a要素の指定 */
div.nav ul li a{
＿display:block;
＿width:100%;height:100%;
＿text-decoration:none;text-align:center;
}
/* ここまで定番 */

div.nav ul li:hover ul{
＿display:block;
}/* ここで現れる */

/*以下の宣言ブロックを消すとすべて表示される
div.nav ul li ul{
＿display:none;
}/* ここでいったん隠してある。この二つの宣言ブロックが肝 */

- 0
- 件

通報する

この回答へのお礼

ORUKA1951さん、　ご親切に例文を作っていただき、深く感謝いたします。　

まず私が不具合現象を正確にお伝えできていなかったようで申し訳ありませんでした。　言葉よりは絵の方がよいかと思ってスクリーンショットの一部をリンクします。
テンプレートだけでブラウザー表示するとこのようにまともに見えます
http://tygucci.sakura.ne.jp/open/menu.jpg
このテンプレートを適用すると、リンク付きのテキストのツリーに代わってしまいます。
http://tygucci.sakura.ne.jp/open/menu_jammed.jpg
これをもとに戻す(undo)のはできないみたいですね

テンプレートを開いてメニューの一つをクリックしたときのプロパティーのショットがこちらです
http://tygucci.sakura.ne.jp/open/css.jpg

おんぶにだっこのように頼ってしまってお恥ずかしいですがご指摘されたことがこのプロパティー情報で判明するのでしょうか？

通報する

お礼日時：2011/11/13 11:51

No.1

回答者： ORUKA1951
回答日時：2011/11/12 16:26

単純に

floatされるブロックが、それを収納するブロックよりも幅が狭いため・・
floatが解除されている

いずれかでしょう。

この回答への補足

回答ありがとうございます、私が正しく理解できたかどうか怪しいですが、テンプレートを開いてｃｓｓスタイルのプロパティを眺めました。まともに動いていたころの古いデータがあったので比較しましたが（ul-li, ul-ul, ul-ul li)違いもなく、floatにはどちらも何も値が入っていません。　ためしにテンプレートだけの状態で4種類のブラウザーでプレビューしてみると、意図通りのメニューが現れ、マウスカーソルを当てると子メニュー、孫メニューが現れます。　なので、テンプレートはまともだと思います。

このテンプレートの一部を変えて保存するとそれから派生したページすべてがアップデートされますが、そちらは依然として文字だけのツリー表示です。　理解不足のまま悪あがきをしている気がしますが、さらにご助言をいただけましたら幸いです。

補足日時：2011/11/12 21:13

通報する