11 Replies Latest reply on Jul 30, 2007 3:25 PM by Nicknickname

    css grid builder

    Nicknickname
      Hello. Grateful for any help. I am new to Dreamweaver and forums . I have found Yahoo's YUI:CSS resource which seems perfect for me. Simple problem. When I use the Grid Builder tool and copy and paste the code into my new blank css page in code view I am unable to then view it in design view so that I can work on it. I know I am missing something simple here. Thanks.
        • 1. Re: css grid builder
          Level 7
          You are pasting CSS rules into code view and then looking in design view?
          Can you show us what you are pasting in?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "Nicknickname" <webforumsuser@macromedia.com> wrote in message
          news:f8krjt$49l$1@forums.macromedia.com...
          > Hello. Grateful for any help. I am new to Dreamweaver and forums . I have
          > found
          > Yahoo's YUI:CSS resource which seems perfect for me. Simple problem. When
          > I
          > use the Grid Builder tool and copy and paste the code into my new blank
          > css
          > page in code view I am unable to then view it in design view so that I
          > can
          > work on it. I know I am missing something simple here. Thanks.
          >


          • 2. Re: css grid builder
            Nicknickname Level 1
            Hi, Thanks for your interest. Yes, this is what I am pasting:


            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            " http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <head>
            <title>YUI Base Page</title>
            <link rel="stylesheet" href=" http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
            </head>
            <body>
            <div id="doc3" class="yui-t2">
            <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
            <div id="bd">
            <div id="yui-main">
            <div class="yui-b"><div class="yui-g">
            <div class="yui-g first">
            <div class="yui-u first">
            <!-- YOUR DATA GOES HERE -->
            </div>
            <div class="yui-u">
            <!-- YOUR DATA GOES HERE -->
            </div>
            </div>
            <div class="yui-g">
            <div class="yui-u first">
            <!-- YOUR DATA GOES HERE -->
            </div>
            <div class="yui-u">
            <!-- YOUR DATA GOES HERE -->
            </div>
            </div>
            </div>
            <div class="yui-g">
            <div class="yui-u first">
            <!-- YOUR DATA GOES HERE -->
            </div>
            <div class="yui-u">
            <!-- YOUR DATA GOES HERE -->
            </div>
            </div>
            <div class="yui-g">
            <!-- YOUR DATA GOES HERE -->
            </div>
            <div class="yui-g">
            <!-- YOUR DATA GOES HERE -->
            </div>
            </div>
            </div>
            <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>

            </div>
            <div id="ft">Footer is here.</div>
            </div>
            </body>
            </html>
            • 3. Re: css grid builder
              Level 7
              If I understand correctly, you're pasting this into a blamk css doc (from
              your original post). This is html, so paste it into a new html document.
              There is no such thin as design view for a css document (at least, as far as
              I know).

              hth

              --
              steve.


              "Nicknickname" <webforumsuser@macromedia.com> wrote in message
              news:f8l1br$b96$1@forums.macromedia.com...
              > Hi, Thanks for your interest. Yes, this is what I am pasting:
              >
              >
              > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              > " http://www.w3.org/TR/html4/strict.dtd">
              > <html>
              > <head>
              > <title>YUI Base Page</title>
              > <link rel="stylesheet"
              > href=" http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts-grids.c
              > ss" type="text/css">
              > </head>
              > <body>
              > <div id="doc3" class="yui-t2">
              > <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
              > <div id="bd">
              > <div id="yui-main">
              > <div class="yui-b"><div class="yui-g">
              > <div class="yui-g first">
              > <div class="yui-u first">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > <div class="yui-u">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > </div>
              > <div class="yui-g">
              > <div class="yui-u first">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > <div class="yui-u">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > </div>
              > </div>
              > <div class="yui-g">
              > <div class="yui-u first">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > <div class="yui-u">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > </div>
              > <div class="yui-g">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > <div class="yui-g">
              > <!-- YOUR DATA GOES HERE -->
              > </div>
              > </div>
              > </div>
              > <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
              >
              > </div>
              > <div id="ft">Footer is here.</div>
              > </div>
              > </body>
              > </html>
              >
              >


              • 4. Re: css grid builder
                Level 7
                > at least, as far as I know

                I can confirm that there is no such thing as a Design view of a CSS file.
                There is no design there....


                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.dreamweavermx-templates.com - Template Triage!
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                ==================


                "molsonexpert" <imdrunk@work.ca> wrote in message
                news:f8l1h8$be7$1@forums.macromedia.com...
                > If I understand correctly, you're pasting this into a blamk css doc (from
                > your original post). This is html, so paste it into a new html document.
                > There is no such thin as design view for a css document (at least, as far
                > as I know).
                >
                > hth
                >
                > --
                > steve.
                >
                >
                > "Nicknickname" <webforumsuser@macromedia.com> wrote in message
                > news:f8l1br$b96$1@forums.macromedia.com...
                >> Hi, Thanks for your interest. Yes, this is what I am pasting:
                >>
                >>
                >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                >> " http://www.w3.org/TR/html4/strict.dtd">
                >> <html>
                >> <head>
                >> <title>YUI Base Page</title>
                >> <link rel="stylesheet"
                >> href=" http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts-grids.c
                >> ss" type="text/css">
                >> </head>
                >> <body>
                >> <div id="doc3" class="yui-t2">
                >> <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
                >> <div id="bd">
                >> <div id="yui-main">
                >> <div class="yui-b"><div class="yui-g">
                >> <div class="yui-g first">
                >> <div class="yui-u first">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> <div class="yui-u">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> </div>
                >> <div class="yui-g">
                >> <div class="yui-u first">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> <div class="yui-u">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> </div>
                >> </div>
                >> <div class="yui-g">
                >> <div class="yui-u first">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> <div class="yui-u">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> </div>
                >> <div class="yui-g">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> <div class="yui-g">
                >> <!-- YOUR DATA GOES HERE -->
                >> </div>
                >> </div>
                >> </div>
                >> <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
                >>
                >> </div>
                >> <div id="ft">Footer is here.</div>
                >> </div>
                >> </body>
                >> </html>
                >>
                >>
                >
                >


                • 5. Re: css grid builder
                  Nicknickname Level 1
                  Thanks for that. I have now pasted it into a new html document. Now design view is enabled but it just shows a blank screen even though the html is clearly present in code view. Any feedback welcome.
                  • 6. Re: css grid builder
                    Level 7
                    No doubt you pasted incorrectly. Show us the resulting page, please.

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.dreamweavermx-templates.com - Template Triage!
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                    ==================


                    "Nicknickname" <webforumsuser@macromedia.com> wrote in message
                    news:f8l71n$i67$1@forums.macromedia.com...
                    > Thanks for that. I have now pasted it into a new html document. Now design
                    > view is enabled but it just shows a blank screen even though the html is
                    > clearly present in code view. Any feedback welcome.


                    • 7. Re: css grid builder
                      Nicknickname Level 1
                      Thanks.

                      Here is the code I entered from line 1 - so this is the complete code that I have used. I removed the default opening lines of code that were from Dreamweaver. I experimented with including those default lines and also trying to insert the pasted code at different points but without success.

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      " http://www.w3.org/TR/html4/strict.dtd">
                      <html>
                      <head>
                      <title>YUI Base Page</title>
                      <link rel="stylesheet" href=" http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
                      </head>
                      <body>
                      <div id="doc3" class="yui-t2">
                      <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
                      <div id="bd">
                      <div id="yui-main">
                      <div class="yui-b"><div class="yui-g">
                      <div class="yui-g first">
                      <div class="yui-u first">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      <div class="yui-u">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      </div>
                      <div class="yui-g">
                      <div class="yui-u first">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      <div class="yui-u">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      </div>
                      </div>
                      <div class="yui-g">
                      <div class="yui-u first">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      <div class="yui-u">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      </div>
                      <div class="yui-g">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      <div class="yui-g">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      <div class="yui-g">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      <div class="yui-g">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      <div class="yui-g">
                      <!-- YOUR DATA GOES HERE -->
                      </div>
                      </div>
                      </div>
                      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>

                      </div>
                      <div id="ft">Footer is here.</div>
                      </div>
                      </body>
                      </html>
                      • 8. Re: css grid builder
                        Level 7
                        While this looks good, it's still not clear to me that this represents the
                        totality of the code on your page.

                        Try this -

                        FILE | New > Other > Text

                        Paste the code from Yahoo into this page, and then save it in your site with
                        an HTML extension. Do you see anything in Design view now?

                        --
                        Murray --- ICQ 71997575
                        Adobe Community Expert
                        (If you *MUST* email me, don't LAUGH when you do so!)
                        ==================
                        http://www.dreamweavermx-templates.com - Template Triage!
                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                        http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                        ==================


                        "Nicknickname" <webforumsuser@macromedia.com> wrote in message
                        news:f8lctc$p9h$1@forums.macromedia.com...
                        > Thanks.
                        >
                        > Here is the code I entered from line 1 - so this is the complete code that
                        > I
                        > have used. I removed the default opening lines of code that were from
                        > Dreamweaver. I experimented with including those default lines and also
                        > trying
                        > to insert the pasted code at different points but without success.
                        >
                        > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                        > " http://www.w3.org/TR/html4/strict.dtd">
                        > <html>
                        > <head>
                        > <title>YUI Base Page</title>
                        > <link rel="stylesheet"
                        > href=" http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts-grids.c
                        > ss" type="text/css">
                        > </head>
                        > <body>
                        > <div id="doc3" class="yui-t2">
                        > <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
                        > <div id="bd">
                        > <div id="yui-main">
                        > <div class="yui-b"><div class="yui-g">
                        > <div class="yui-g first">
                        > <div class="yui-u first">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > <div class="yui-u">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > </div>
                        > <div class="yui-g">
                        > <div class="yui-u first">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > <div class="yui-u">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > </div>
                        > </div>
                        > <div class="yui-g">
                        > <div class="yui-u first">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > <div class="yui-u">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > </div>
                        > <div class="yui-g">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > <div class="yui-g">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > <div class="yui-g">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > <div class="yui-g">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > <div class="yui-g">
                        > <!-- YOUR DATA GOES HERE -->
                        > </div>
                        > </div>
                        > </div>
                        > <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
                        >
                        > </div>
                        > <div id="ft">Footer is here.</div>
                        > </div>
                        > </body>
                        > </html>
                        >
                        >


                        • 9. Re: css grid builder
                          Nicknickname Level 1
                          Unfortunately all I get in design view when I try the suggestion is this


                          YUI: CSS Grid Builder









































                          Footer is here.
                          • 10. Re: css grid builder
                            Level 7
                            Replace all off these <!-- YOUR DATA GOES HERE --> with some text,
                            images etc like this...

                            <div class="yui-u first">
                            Here is my visible text and my great looking images. Can you see me?
                            </div>

                            --
                            Kim
                            ---------------------------
                            http://www.geekministry.com
                            • 11. Re: css grid builder
                              Nicknickname Level 1
                              Thanks Kim, Unfortunately that didn't work. Still left with blank page or at best the outcome I posted previously. I have been able to successfully cut and paste code from other sources and view in design mode - but it is this specific code that I want.

                              The source of the code is

                              http://developer.yahoo.com/yui/grids/builder/

                              Thanks to you and everyone who has helped or may yet be able to. Maybe somebody else may try it out and let me know how they get on.