DotNetNuke 対応ホスティングサービスに、「at link 専用サーバサービス」を追加
DotNetNuke.jp 掲示板は、すべての DotNetNuke ユーザーのための情報共有の場です。単に質問・回答の場ではありませんし、回答義務もございません。運営メンバーも含め、DotNetNuke を日々学んでいる状況です。質問をする場合は、まずインターネットなどで自分自身でお調べいただき、その情報を共有する事をこころがけてください。
連続投稿で申し訳ありませんが、情報共有の意味も含めて・・。
テーブルレイアウトだと問題ないのかもしれませんが、スタイルシートレイアウトでスキンを作った場合、Forumモジュールを配置してルートの下位のフォーラムを開くと、レイアウトが崩れる（フッター部分が上に詰めて表示される）という現象が発生します。
ただ、常に発生するというわけではないのでよくわからないのですが、どうやらスタイルシートでfloatを使用した箇所がからむと不具合が顕在化するように見えます。
例を挙げますと、
2Pane（ContentPane, RightPane）のスキンを作り、ContentPaneを float: left; 、RightPaneを float: right;で配置し、ForumモジュールをContentPaneに置いた場合だと不具合が発生しますが、ContentPaneにfloatを使わない方法を使用すると発生しません。この状態で試しにfloatを使っているRightPaneにモジュールを移動すると発生します。
このため複数カラムのスキンを作る場合、最初はfloatのleft,rightを使っていましたがこれを変更し、ContentPaneが入るところはfloatを使用しないようにしてレイアウト崩れを回避しています。とりあえずのところはこれでよいのですが、原因がわからないのでどうも気持ち悪いです。
少し前に開発フォーラムで報告したHelpモジュールのようにタグがきちんと閉じられていないのでは？とも思ったのですが、Helpモジュールと違ってかなり複雑なのでまだ解明できていません。
同じくスタイルシートレイアウトでスキンを作られている方は同じ症状が出ているのでしょうか？また、出ているとしたら回避策はどうされてますでしょうか？
すみません。Forumのバージョンを書いていませんでしたが、4.4.3です。
あと、floatを使わないPaneに置くと大丈夫と書きましたが、よくよく見てみると破綻しないだけであって、やはりおかしいようです（floatを使っているRightPaneがかぶってくる）。
やはりタグが閉じられていないような印象ですので、本格的にForumモジュールのソースを見てみる必要がありそうです。
Forumモジュールって使用頻度が高いと思うのですが、他の方は大丈夫なんでしょうか？それともテーブルレイアウトの人ばかり？
モジュールについては詳しくわからないので、あまり参考にならないかもしれませんが。 たしかにFloatだけでなくCSSでレイアウトを組んでいると、DNNに適用すると崩れる･･･ というパターンは多いです。 私の場合は、リキッドレイアウトの場合はやむを得ずテーブルで、 横幅固定の場合は、絶対配置にしてしまったりします。 1.親boxに対して、ReftPaneに当たるＤｉｖを左上固定、ContentPaneのDivを右上固定 または 2.ReftPaneに当たるＤｉｖを左上固定、ContentPaneのDivは、左上からReftPaneの幅分 右に座標をシフトさせて固定 Paneが増える場合は、上記を組み合わせていくような感じです。
他に何か解決方法があれば、私も教えていただきたいです。 できれば３カラムのリキッドレイアウト（ヘッダー、フッターもあり）のスキンも、 テーブルなしで組みたいのですが･･･。
kyo-koさん、どうもありがとうございます。
その後、何点か試してみたことがあります。
まず、Forumを入れるコンテナをテーブルで囲ってみましたが、これだと崩れませんでした。
また、自分のCSSの作り方がまずのかと思い、フリーのものですがCSS/XHTMLのスキンを入手してインストール＆適用してみたところ、やはり崩れてしまいました。従って、この件に関してはForumモジュール単体の不具合のように思われますので、ソースコードを調査して何か分かりましたら報告したいと思います。
なお、他におかしな動きをするものにMediaモジュールがあります。こちらはソースを見た限りではおかしいところはなさそうなのですが、なんでもないところに配置した場合でもレイアウトが崩れてしまう場合があったりします。
とりあえず、現時点で把握しているのはこれくらいで、後はほぼ純粋なCSSレイアウトでも問題なく配置できていると思いますが、なかなか細かな制御は難しいですね。ただ、モバイルでの閲覧を考えるとやはりテーブルではなくCSSで構成しておいた方がよいので、多少無理してもCSSで作るようにしています。
DotNetNukeのスキンでは、Webで見つけたCSSのテクニックなどを使ってみても効果がないことが結構あるようです。この前も3段組レイアウトで、各divの高さを揃える技というのも見つけて、これは凄い！と思ってスキンに入れてみましたが、細かなところで不具合が出たりして断念しました。サンプルのように単純ではないからか、それともDotNetNukeが特殊なのかどうかよくわかりませんが、なかなかすんなりとうまくいきません。
なお、DotNetNukeのDOCTYPE宣言は既定ではIE7互換モード用になりますが、IE7標準モード用などに変更するとまた変わってくるかもしれないと思っています。ただ、この変更の方法がわからずデフォルトのままでやるしかないかと思っていたのですが、今回入手したフリースキンの中身を見て初めて分かったことに、このDOCTYPE宣言の変更方法があります。これをいろいろといじってみてまた試してみたいと思います。
それから、CSSによる３カラムのリキッドレイアウト（用語を知らないのですが、幅100%で中央可変のこと？）ですが、Forumのようなこともあるので全てを確認しているわけではありませんが、一応こちらの手元では動いています。
長くなるので３カラムの部分だけを書いておきます。左右が200pxでセンターが可変です。
<div id="right"> <div id="RightPane" runat="server"></div> </div> <div id="left"> <div id="LeftPane" runat="server"></div> </div> <div id="center"> <div id="ContentPane" runat="server"></div> </div> <div class="clearboth"> </div>
-------------------------------------
#right { float:right; width:200px; } #left { float:left; width:200px; } #center { width:auto !important; width:100%; margin:0px 205px 0px !important; margin:0px; } .clearboth { clear:both; font-size:0px; line-height:0px; }
簡単ですが、centerのスタイルの!importantあたりがミソのようです。というのも、これもフリースキンを参考にしたものです。
デザイナーさん向けにCSSレイアウトによるスキンのリファレンスとなるサンプルがあるとよいのですが。私も最近CSSを勉強し始めたようなものなのでまだまだですが、そのうちそういったものが作れたらなぁと思っています。
丁寧な解説、ありがとうございます。 この方法で試してみます。
いろいろなコントロールが入れ子になっていく分、Widthの指定が要の部分がありますね。