-----
ご利用のサーバ：エックスサーバー
MODXのバージョン：1.0.6J-r6
PHPのバージョン：5.3
MySQLのバージョン：5.0.95
ブラウザ：FF,IE
-----
いつもお世話になっています。今回もよろしくお願い致します。
[[TopicPath]]にCSSで、position: absoluteを適用させても反映されずに、
記入箇所にそのまま表示されてしまいます。
（HTML内では、最下部に記入して、最上部に表示するようにしていますが、最下部に表示されます）
もちろん親には、position: relativeを適用させています。
些細な事でかなり嵌ってしまい、CSSの見直しや、記入箇所を変えてみたりしましたが直りません。
そこで、フット思いついて[[Breadcrumbs]]をインストールして、[[TopicPath]]から変えてみました。
結果、成功しました！
最終的には出来たから良いといえばそれまでですが、[[TopicPath]]では、一部のCSSは反映されないのでしょうか？
もしそうであるなら、今後も[[Breadcrumbs]]を使い続けないといけませんがどうなんでしょう。
もっとも、[[Breadcrumbs]]でも一部のCSSには対応できないようです。
例えば、このページのhttp://coliss.com/articles/build-websites/operation/css/css-tutorial-breadcrumbs-with-css-triangle.html
「Apple風のパンくず」などは、反映されませんでした。
[[Breadcrumbs]]を使用して、やりたい事は出来ていますので急ぎませんが、今後のバージョンアップの事も考えて
[[TopicPath]]だと何故反映できないのか、どうすれば反映し表示されるようになるのか教えて頂ければと思います。
よろしくお願い致します。
TopicPathにCSSのposition: absoluteが反映されない 【解決済み】
Re: TopicPathにCSSのposition: absoluteが反映されない
Breadcrumbsだと出力のカスタマイズがあまりできないので、TopicPathに問題点があれば修正して使えたらと思います
http://mng.demo.modx.jp/
http://mng.demo.modx.jp/pack_list/Evolu ... 6j-r5.html
実際のコードを確認する必要があります。上記環境で再現できますでしょうか？
http://mng.demo.modx.jp/
http://mng.demo.modx.jp/pack_list/Evolu ... 6j-r5.html
実際のコードを確認する必要があります。上記環境で再現できますでしょうか？
Re: TopicPathにCSSのposition: absoluteが反映されない
早々のご返信有難うございます。
ご指示のあったデモサイトですが、30分以上経過しても接続中のままで、どのようにして良いのか分かりません、すみません。
で、一応HTMLで説明させて頂きます。（不完全でしょうが・・・）
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="contents">
<div id="honbun">
[*content*]
</div>
<p id="topnavi">[[Breadcrumbs]]</p><!-- パンくずリスト -->
</div><!-- #contents-->
</div><!-- #container-->
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
上記のようなテンプレート（ヘッダー部分省略）にCSSを適用しています。
contentsのCSSは
#contents {
position: relative;
margin: 0 0 0 310px;
padding: 30px 10px;
overflow: hidden;
zoom: 1;
}
topnaviのCSSは
#topnavi {
font-size: 80%;
color: #355e36;
padding: 10px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
}
これで、パンくずリストがごく普通の場所に表示されますが、[[TopicPath]]を使用すると、
そのまま最下部（文末）に表示され、フォントも適用されません。
記述する場所を変えて、<p id="topnavi">[[TopicPath]]</p>を記述すると、
そのままの記述した場所（文頭とか文中）にフォントも適用されず表示されます。
HOMEへのリンクは出来ています。
これでは分からないかもしれませんが、次はどのようにすれば良いか指示して頂ければ
そのように致します。
お手数をおかけ致しますが宜しくお願い致します。
ご指示のあったデモサイトですが、30分以上経過しても接続中のままで、どのようにして良いのか分かりません、すみません。
で、一応HTMLで説明させて頂きます。（不完全でしょうが・・・）
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="contents">
<div id="honbun">
[*content*]
</div>
<p id="topnavi">[[Breadcrumbs]]</p><!-- パンくずリスト -->
</div><!-- #contents-->
</div><!-- #container-->
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
上記のようなテンプレート（ヘッダー部分省略）にCSSを適用しています。
contentsのCSSは
#contents {
position: relative;
margin: 0 0 0 310px;
padding: 30px 10px;
overflow: hidden;
zoom: 1;
}
topnaviのCSSは
#topnavi {
font-size: 80%;
color: #355e36;
padding: 10px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
}
これで、パンくずリストがごく普通の場所に表示されますが、[[TopicPath]]を使用すると、
そのまま最下部（文末）に表示され、フォントも適用されません。
記述する場所を変えて、<p id="topnavi">[[TopicPath]]</p>を記述すると、
そのままの記述した場所（文頭とか文中）にフォントも適用されず表示されます。
HOMEへのリンクは出来ています。
これでは分からないかもしれませんが、次はどのようにすれば良いか指示して頂ければ
そのように致します。
お手数をおかけ致しますが宜しくお願い致します。
Re: TopicPathにCSSのposition: absoluteが反映されない
コードを貼り付けてfirebugで確認してみたところ、dom構造が変ですね。
http://www.0yen-coding.com/2009/08/html-pdiv.html
これではないでしょうか？
Breadcrumbsはインラインでデザインコードを持っていたと思うので、たまたま意図どおりに表示されているのかもしれません
(TopicPathはデザインを含まないシンプルなコードを出力するようになってます)
http://www.0yen-coding.com/2009/08/html-pdiv.html
これではないでしょうか？
Breadcrumbsはインラインでデザインコードを持っていたと思うので、たまたま意図どおりに表示されているのかもしれません
(TopicPathはデザインを含まないシンプルなコードを出力するようになってます)
Re: TopicPathにCSSのposition: absoluteが反映されない
横槍すみません。
TopicPathが、デフォルトで<div>を出力することに関して、以前から気になっていたので…
これはあくまで私の個人的な利用シーン限定の感想なので、他の方がどうかわかりませんが、
パンくずリストの左横や右横に何らかの文字やタグを付加したい等はよくあります。
たとえば、DittoのdateFilter（Reflect）を使った場合に、
パンくずリストの右横に年月を表示する等もよくありますし、
逆に、左横に、トップページのリンクを修飾するようなものを入れたり、…
「TopicPath」自体はありがたく使わせていただいていますが、
私も、以前は「Breadcrumbs」を使っていたので、
この点がちょっと残念です。
TopicPathに限らず、このあたりの話を広げると
スニペット側で一番外側のブロック要素は出力しないでもらえると嬉しい。
と感じることはけっこうあります。
Wayfinderの場合も、前とか後とかに固定で<li>を入れたい時などあります。
ただ、Wayfinderはパンくずリストと違って、
機能として、<ul>と<li>がセットになっているということは理解できないこともないです。
ちょっと話がそれるかもしれませんが、
Dittoでリストを出力する場合は、Dittoを<ul>等で囲みますので、
そういう使い方の統一感的な点からも、
一番外側のブロック要素はスニペット側では出力しないメリットもあるような気はします。
MODXを使われている多くの方がどのように思われているかわかりませんので、
あくまで、こういう感想を持っている人間もいるということで、
参考にしていただければ幸甚です。
TopicPathが、デフォルトで<div>を出力することに関して、以前から気になっていたので…
これはあくまで私の個人的な利用シーン限定の感想なので、他の方がどうかわかりませんが、
パンくずリストの左横や右横に何らかの文字やタグを付加したい等はよくあります。
たとえば、DittoのdateFilter（Reflect）を使った場合に、
パンくずリストの右横に年月を表示する等もよくありますし、
逆に、左横に、トップページのリンクを修飾するようなものを入れたり、…
「TopicPath」自体はありがたく使わせていただいていますが、
私も、以前は「Breadcrumbs」を使っていたので、
この点がちょっと残念です。
TopicPathに限らず、このあたりの話を広げると
スニペット側で一番外側のブロック要素は出力しないでもらえると嬉しい。
と感じることはけっこうあります。
Wayfinderの場合も、前とか後とかに固定で<li>を入れたい時などあります。
ただ、Wayfinderはパンくずリストと違って、
機能として、<ul>と<li>がセットになっているということは理解できないこともないです。
ちょっと話がそれるかもしれませんが、
Dittoでリストを出力する場合は、Dittoを<ul>等で囲みますので、
そういう使い方の統一感的な点からも、
一番外側のブロック要素はスニペット側では出力しないメリットもあるような気はします。
MODXを使われている多くの方がどのように思われているかわかりませんので、
あくまで、こういう感想を持っている人間もいるということで、
参考にしていただければ幸甚です。
▼ウェブ屋のCMS→modxヒキダス流（備忘録）
http://d.hatena.ne.jp/hikidas_ikeda/
http://d.hatena.ne.jp/hikidas_ikeda/
Re: TopicPathにCSSのposition: absoluteが反映されない
変更してみました。こちらでどうでしょう？
（パン屑リストを出力しないトップページで戸惑う人が出てきそうな気もしますが）
（パン屑リストを出力しないトップページで戸惑う人が出てきそうな気もしますが）
- 添付ファイル
-
topicpath.class.inc.zip- (2.85 KiB) ダウンロード数: 486 回
Re: TopicPathにCSSのposition: absoluteが反映されない
色々調べて頂き有難うございます。
pタグの中にdivを書いているのではなく、<div id="contents"></div>の中に
pタグで[[Breadcrumbs]]を記述し、そのpタグにidを指定して、
<p id="topnavi">[[Breadcrumbs]]</p>としています。
また、
<p id="topnavi"><a href="http://sample.com/">HOME</a></p>
のように、スニペットを使用せずに記述しても思い通り最上部に表示されるので、
CSSも構文もおかしくないのでは？と思っていますが、もう一度じっくりと眺めながら
再検証します。
pタグの中にdivを書いているのではなく、<div id="contents"></div>の中に
pタグで[[Breadcrumbs]]を記述し、そのpタグにidを指定して、
<p id="topnavi">[[Breadcrumbs]]</p>としています。
また、
<p id="topnavi"><a href="http://sample.com/">HOME</a></p>
のように、スニペットを使用せずに記述しても思い通り最上部に表示されるので、
CSSも構文もおかしくないのでは？と思っていますが、もう一度じっくりと眺めながら
再検証します。
Re: TopicPathにCSSのposition: absoluteが反映されない
kazuikeさん、yamaさん、有難うございます。
投稿記事作成中に投稿していただいたようで、前回の投稿記事とチグハグになっているようですが
申し訳ありません。
もう一度読ませて頂きやってみます。
投稿記事作成中に投稿していただいたようで、前回の投稿記事とチグハグになっているようですが
申し訳ありません。
もう一度読ませて頂きやってみます。
Re: TopicPathにCSSのposition: absoluteが反映されない
kazuikeさん有難うございます。kazuike さんが書きました:横槍すみません。
TopicPathが、デフォルトで<div>を出力することに関して、以前から気になっていたので…
これを読んで納得しました！
yamaさんが調べていただいた記事の中にある「pタグの中にdivを書く」が分かりました。
自分ではおかしくないと思っていましたが、TopicPathが<div>を出力することで
pタグの中にdivが記述されおかしくなっているようです。
更にじっくりと検証してみます。
Re: TopicPathにCSSのposition: absoluteが反映されない
今TopicPathのページ
http://modx.jp/docs/extras/snippets/topicpath.html
を確認しましたら、
私は個人的には歓迎です。
（デフォルト値が「<span>」となっているのは間違い？）
今後、MODXをアップデートする際、戸惑う人はいるかもしれませんね。
http://modx.jp/docs/extras/snippets/topicpath.html
を確認しましたら、
となっていますが、既に更新されましたか？&tplOuter
デフォルト値 <span class="topicpath">[+topics+]</span> ※次バージョンでは[+topics+]のみになります
私は個人的には歓迎です。
（デフォルト値が「<span>」となっているのは間違い？）
すみません。ちょっと理解できませんでした。yama さんが書きました:（パン屑リストを出力しないトップページで戸惑う人が出てきそうな気もしますが）
今後、MODXをアップデートする際、戸惑う人はいるかもしれませんね。
▼ウェブ屋のCMS→modxヒキダス流（備忘録）
http://d.hatena.ne.jp/hikidas_ikeda/
http://d.hatena.ne.jp/hikidas_ikeda/
Re: TopicPathにCSSのposition: absoluteが反映されない
yamaさん、有難うございました。
添付ファイルを上書きしたところ、無事反映されabsoluteの位置に表示されました。
結果良ければ全て良し！のモットーですが、いつもお世話になりまして本当に有難うございました。
次バージョンの情報を見ても、TopicPathも部分には下手にCSSを適用させない方が良いみたいです。
kazuikeも貴重な情報を教えて頂きまして有難うございました。
添付ファイルを上書きしたところ、無事反映されabsoluteの位置に表示されました。
結果良ければ全て良し！のモットーですが、いつもお世話になりまして本当に有難うございました。
次バージョンの情報を見ても、TopicPathも部分には下手にCSSを適用させない方が良いみたいです。
kazuikeも貴重な情報を教えて頂きまして有難うございました。