高さの異なるカラムを揃えるスタイルシート、に絡む諸々の問題またリニューアル中のページについてですが、テーブルデザインだ、ということは既に書きました。それをMODxに取り込んだのですが、やはりそのままでは我慢できず、テーブルを取り外してXHTMLにする作業を始めてしまいました。すると問題になったのが、テーブルデザインでよくある左右の隣り合うブロックとの間のボーダー(ではなくて幅1pxのtd)です。単純にdivなどのボーダーを設定しても、隣同士の高さが合わないとラインが下まで伸びません。思っていたら、こんなやり方を見つけました。リニューアルサイトに取り入れました。ところが、ページ内にジャンプするリンクをクリックすると、ページの上の方がちょん切れたような変な表示になってしまいます。悪さをしているようです。包容要素にoverflow:hidden;を使う際の注意点メモいろいろ試しましたが、スタイルシートやHTMLで逃げるうまい方法はなさそうでした。スクロールさせる方法ならどうだろう、と試してみました。スムーズにスクロールさせる方法は調べるとたくさんあります。その中で、こちらの方が最近「決定版!」とされている方法を試してみることにしました。WINGHEART「jQuery」を使うスクリプトです。MODxのassets/js/にjquery.jsとjquery.page-scroller.jsを入れ、テンプレートに記述するだけで動作します。リンクタグやアンカー用idに手を加えなくていいところが素晴らしい。href="#abc">と書くとトップページに飛んでいってしまいます。なってしまうんですね。仕方がないので、「外部ページのページ内リンクへスクロール」する方法を試してみました。ジャンプ後に表示がおかしくなる件は修正することができました。JavaScriptを切ってしまうと元のおかしな動作になってしまうのですが、それは目をつぶることにしましょう。あと、細かい問題で、外部ページへのスクロールとしているためか、動きがスムーズではないんですね。スムーズ・スクロールを導入したんだからきれいに動いて欲しいところですが、これも現在のMODxの仕様ということで仕方がないかな。ジャンプ後、ブラウザのリンク欄に外部ページへのリンクのために付けた「?pScabc」というのが残ってしまうのも気になるけど、まあいいでしょう。ver.3」ですが、ライセンス条件を見ると「非商用に限り無料」なんですね。残念ながら今回使おうとしたお客様のページは歯医者さんのページなので、非商用とは言えません。あきらめて別の方法を探すことにします。[必須入力]※画像の中の文字を半角で入力してください。※ブログオーナーが承認したコメントのみ表示されます。まるくねばつ(05/23)ここでつぶやいていますSeesaaブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。