5 Replies Latest reply on Jul 1, 2012 8:58 AM by hans-g.

    DIV のレイアウトの問題


      DIV のレイアウトの問題で困っています。何方かお力をお貸し下されば幸いです。


      Dreamweaver CS5を使っています。 OSはWindows7です。


      container_DIVの中にHead_DIVとcontents_DIV及び foot_DIVをレイアウトしようとしています。


      問題は、デザイン・モードでmain_side_DIV left_side_DIVの下に表示されてしまいます。

      ブラウザー(EI9,Google Chrome, FireFox)で表示させると入れ子のDIVは問題なく期待通りに横に並んで表示されます。最終結果は満足ですが、これでは保守作業の折に大変不便です。



      DWHelpの例にならってmain_side_DIVLeft Marginにleft_side_DIVの横幅のピクセル数を指定してみましたが、main_side_DIVがその分右にずれるだけで、2つのDIVが横並びになりません。

      Helpの説明の中にカストマイズしたレイアウトのCSSはそのページのHeadの中に入れなければいけないようなことが書かれていましたが、この所為でしょうか? 現在、CSSは外部ファイルに書き出して、Linkして使っています。 外部ファイルのLinkを外して、Head中にのコピーしましたが結果は同じでした。





      http://longhat.fan-site.net/folder_hosomichi/tr_09/page_tr09_01.html です。

      長兵衛  chobe@hotmail.co.jp

        • 1. Re: DIV のレイアウトの問題
          hans-g. Adobe Community Professional & MVP

          Text is readable?





          このような理由から、私がお勧め: スライドショーを使用してください。

          概要を持ってするには、使用 小さい写真を使用することができます。










          Here a screenshot:



          • 2. Re: DIV のレイアウトの問題
            長兵衛 Level 1

            Mr. hans-g


            Thanks for your suggestion.


            But the question asked  here is different from what you talk about.

            The issue is the fact that design mode of Dreamweaver CS5 does not display DIVs as expected although most of browsers do display the layout as expected.


            Some friends of mine experienced the same problem and I wonder if my understanding on CSS rules of Dreamweaver is something wrong or it might be something to do with a bug of Dreamweaver CS5.


            I would appreciate it if someone could point out the cause of my problem.




            • 3. Re: DIV のレイアウトの問題
              hans-g. Adobe Community Professional & MVP

              Hello Mr. Chobe,


              first of all: please check your source code in a validator like http://validator.w3.org/unicorn/ or http://jigsaw.w3.org/css-validator/. I did and so you could just use this links:


              http://validator.w3.org/unicorn/check?ucn_uri=longhat.fan-site.net%2Ffolder_hosomichi%2Ftr _09%2Fpage_tr09_01.html&ucn_task=conformance#


              http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Flonghat.fan-site.net%2Ffolde r_hosomichi%2Ftr_09%2Fpage_tr09_01.html&profile=css3&usermedium=all&warning=1&vextwarning= &lang=en


              where you can get some initial indications for the used html and css. For a basic test you could use http://www.my-debugbar.com/wiki/IETester/HomePage.


              Despite of this, I'm afraid that I didn't understand your wish in the right way. Please send me a screenshot, where your problem is shown. Because in my IE8 your website works like a charm.



              • 4. Re: DIV のレイアウトの問題
                長兵衛 Level 1

                Hello Mr. Hans-g;


                Thank you very much for your quick and helpful reply.


                I have tried w3c css vaidation service and recognised several css errors indications.

                Those indications were reviewed carefully and realized that they happened be nothing to do with the problem I have been troubled in the past few weeks.


                Most of the errors are about missing the unit of text-indent figure, which are assumed as pixel by most of browsers and are handled as I expected.

                That is why my css codings are working as expected regardless of the coding errors. By the way, as for the problem of missing text-indent unit,

                I am afraid to say that might be a bug of Dreamweaver CS5 Japanese version. I am sure that I did specifiied the unit of text-indent when I coded.

                After having saved these coding, they seemed gone away for some reasons and others. I tried the same thing and proved it.


                Any way,  your suggestion to use html-css validation service should be very helpful for my future developement work and I appreciate it very much.


                Now speakig of the problem I was trying to solve, I have just found out the cause of the problem today. That is something to do with a width calculation of

                DIV.  I did not subtract the padding figure in calculating the DIV width, which caused the shortage of space for neighouring DIV.

                That is why two DIVs were not placed side by side in Dreamweaver's design ( edit ) mode. But I still do not understand why browsers (IE, Google Chrome.

                and also Firefox ) displyed two DIVs as I expected inspite of shotage of space in the parent DIV.


                Thank you again for your help.




                • 5. Re: DIV のレイアウトの問題
                  hans-g. Adobe Community Professional & MVP



                  you are welcome and gratulation again to your interesting website, which I can read without any problems thanks Google. All the best for the future.