15 Replies Latest reply on Oct 31, 2006 7:47 AM by Newsgroup_User

    Problems With Layout

    silvermoon*
      Why do I have to position elements,i.e. tables and banners, over each other in Visual Editor in order to reduce space between them when I preview them in browser?

      Is there any way to position elements in Visual editor in such a way that you don't have to make them overlap in order to reduce space between them?
        • 1. Re: Problems With Layout
          *mista* Level 1
          If you can upload a page and post a link, that would help. You shouldn't need to do what you're saying.
          Maybe you need to change some settings in dreamweaver. Hopefully someone more experienced can answer that for you. I am assuming that by visual editor you mean design view
          • 2. Re: Problems With Layout
            silvermoon* Level 1
            Hi Mista, thanks for your reply...I think it is OK now...I have the elements positioned apart and they look fine in IE6.0, but still too much space in Firefox...can't find any excess spacing in the Code so assume IE6 has it right this time...Here is the link to my page though, in case you see anything odd - it is in the last 1/4 of the page, below the horizonal rule in the code, where I have a couple of banners and a table of navigation that there has been a problem...thanks! http://beautifulcollectionsboutique.com/dtoscano.html

            Carol
            • 3. Re: Problems With Layout
              *mista* Level 1
              I looked at your page. The problem is that you are using absolutely positioned div's which is not a good idea here. Absolutely positioned div's are as the name suggests, absolutely positioned, and removed from the flow of the document. On your page for instance, if you preview in firefox and keep increasing the text size (ctrl++) you'll find that the whole layout falls apart. The reason is that the absolutely positioned div's stay where you've defined their position with the "top" and "left" properties, while the text increases in size and so expands its container, overflows over the absolutely positioned divs 15,16,17,18,19.

              The solution is to use CSS. If you search this forum, you'll find a lot of links to tutorials on this. You have to avoid using absolutely positioned div's.
              • 4. Problems With Layout
                *mista* Level 1
                If you still want to stay with the current layout use something like what you've used for the rest of the layout ie ... a div tag with a table within and the content of your divs (15,16,17,18,19) in the table cells. Something like the code below

                <div align="center">
                <table><tr><td colspan="2" align="center"><a href=" http://www.anrdoezrs.net/bk102efolfn24B338C9243747A75" target="_blank" onmouseover="window.status=' http://www.DesignToscano.com';return true;" onmouseout="window.status=' ';return true;">
                <img src="dtoscano_files/jb108c37w1-LNUMMRVSLNMQNQTQO.gif" alt="Historical Reproductions for Home and Garden at De" border="0"></a></td></tr><tr><td width="75%" align="center"><span class="style41">Unique <a href=" http://www.jdoqocy.com/fs105kjspjr698DBCDC687AECEGB" target="_blank" onmouseover="window.status=' http://www.novica.com';return true;" onmouseout="window.status=' ';return true;">Wall Hangings</a> and Exotic<a href=" http://www.jdoqocy.com/fs105kjspjr698DBCDC687AECEGB" target="_blank" onmouseover="window.status=' http://www.novica.com';return true;" onmouseout="window.status=' ';return true;">Tapestries</a>
                </span></td><td width="25%" align="left"><a href=" http://beautifulcollectionsboutique.com/dtoscano.html">Top of Page </a></td></tr><tr>
                <td colspan="2" align="center"><a href=" http://www.kqzyfj.com/bd111y1A719PSRWUVWVPRQURZRVU" target="_blank" onmouseover="window.status=' http://www.novica.com';return true;" onmouseout="window.status=' ';return true;"><img src=" http://www.ftjcfx.com/r470kpthnl698DBCDC687B8G8CB" alt="" border="0"/></a></td></tr><tr>

                <td colspan="2" align="center"><table align="center" border="1" cellpadding="0" cellspacing="0" width="651">
                <tbody><tr>
                <td width="100"><div class="style42" align="center"><a href=" http://beautifulcollectionsboutique.com/prestige.html">The Royal Doulton Prestige Figures </a></div></td>
                <td width="76"><div class="style38" align="center"><a href=" http://beautifulcollectionsboutique.com/burslem.html">The Royal Doulton Burslem Artwares </a></div></td>
                <td width="128"><div align="center"><strong><a href=" http://beautifulcollectionsboutique.com/dtfurn.html">Design Toscano Historical Furnishings </a></strong></div></td>
                <td width="85"><div class="style38" align="center"><a href=" http://beautifulcollectionsboutique.com/index.html">Boutique Guide </a></div></td>
                <td width="90"><div align="center"><a href=" http://beautifulcollectionsboutique.com/mysticalchess.html">Medieval &amp; Mystical Chess Sets </a></div></td></tr></tbody></table></td></tr></table></div>
                • 5. Re: Problems With Layout
                  silvermoon* Level 1
                  Hi Mista,

                  I sure appreciate your efforts on behalf of my fledgling Dreamweaver pages! You have really given me a lot to work with...my son is going to have to help me with the code, but I gather you prefer tables to layouts? I think I don't know the difference between an "absolutely" and non-absolutely-positioned div... I thought the whole point of the layer was the ability to move things around once they were placed in a layer? I realize Dreamweaver has a "convert layer to table" function - could I do that?

                  I used the same way of doing things for every page in my site, so obviously I have a lot of work to do to sort things out.. After I consult with my son he may have some more questions for you as Dreamweaver is new to him though he is comfortable with code....

                  Thanks again for your generous help,
                  Carol
                  • 6. Problems With Layout
                    *mista* Level 1
                    If you just copy paste the code I posted earlier, it'll work on your site. But when you do that, please delete all the divs 15,16,17,18,19.

                    I don't prefer tables over div tags. Tables are very efficient at some places and div tags at most places.

                    My suggestion would be not to use the "convert layer to table" function. If you do want to experiment, save a copy of your page and then play around with the page. With your page, I feel, the convert will be a complete disaster.

                    Absolutely positioned divs are whats also called layers. They stay fixed where you put them based on the position you give them. If the content of some other div expands, that content will overlap, because the absolutely positioned div is fixed, can't shift.
                    If you take off absolute positioning, now if the content of one div expands, it nudges the div below it and pushes it down, which is what you want here.

                    Two tables will not overlap with each other unless you have them nested (table within a table cell). In your case I put in a table layout for the bottom part of the page for convenience sake. it was easier to put the contents in the desired format. The same could also have been done with div tags. Infact the table is enclosed in div tags and this div gets pushed down when the content above it expands.

                    If you're using design-view in dreamweaver to draw layers, I think you'll end up with absolutely positioned divs. You have to start using code-view and input code directly. Its not too hard when you start doing that. Design-view is good if you know what code is being generated when you draw, move or do something in design view.

                    You have to learn CSS to realize what you're missing out on so far. I was using absolutely positioned div tags too till someone told me to learn CSS. Still learning ....
                    If you go to
                    http://w3schools.com - they have good beginner lever tutorials and html, css etc.

                    You can also read at the adobe site.
                    http://www.adobe.com/devnet/dreamweaver/css.html

                    Hope this helps
                    • 7. Re: Problems With Layout
                      *mista* Level 1
                      You can make a CSS stylesheet for your entire website, one single file with the layout defined in that and use that to control the appearance of everything on your site whatever be the number of pages. In that one file, if you change the text colour or size of a div or anything else that deals with layout, it'll make the change on all your pages. So once you've learnt this and you've made the changes to your site, it'll be very easy to modify the layout whenever you need to.
                      • 8. Re: Problems With Layout
                        Level 7
                        > http://beautifulcollectionsboutique.com/dtoscano.html

                        Carol,
                        just a suggestion if it's not too late ;-) You have a heck of a lot of
                        code for that one page... due to the overuse and misunderstanding of how
                        'layers' work. At this point of your learning curve, maybe a basic table
                        structure would work best with a lot less code bloat. Here's a great table
                        tutorial that would help:
                        http://www.dwfaq.com/Tutorials/Tables/flexible_tables.asp

                        You would have one table with 2 columns. Inside the first left column you'd
                        have your navbar and in the right column you would have your content area...
                        much simpler and cleaner than you have now.

                        Good Luck !


                        --
                        Nadia
                        Adobe® Community Expert : Dreamweaver
                        Skype: nadiaperre
                        -------------------------------------------------
                        Tutorials |SEO |Templates
                        http://www.DreamweaverResources.com
                        http://www.csstemplates.com.au
                        -------------------------------------------------
                        http://www.adobe.com/devnet/dreamweaver/css.html
                        CSS Tutorials for Dreamweaver
                        -------------------------------------------------


                        • 9. Re: Problems With Layout
                          silvermoon* Level 1
                          Thanks to both Mista and Nadia for your suggestions - my son has been suggesting I should use tables all along, so I think you are right Nadia to advise this as an option since I am indeed just starting out.

                          On the other hand, I do like the idea of learning the CSS and then making one set of changes that can be applied site-wide. Thank you Mista for the step-by-step and advice on the cleanup! I really appreciate the time you took to write the new code, and that will be good to learn from.

                          So I will wait till I have a good stretch of time to devote to this, and see what the best approach would be for me right now.

                          Meanwhile, I just can't thank you all enough for your interest and helpful replies!

                          Carol
                          • 10. Re: Problems With Layout
                            Level 7
                            Just a little something additional to think about: don't resize your
                            graphics with code in Dreamweaver. This causes distortion and poor image
                            rendering. Make the image the size you want it to be in an image application
                            such as Photoshop or Fireworks.


                            • 11. Re: Problems With Layout
                              Level 7

                              "silvermoon*" <webforumsuser@macromedia.com> wrote in message
                              news:ei68rs$jlb$1@forums.macromedia.com...

                              > On the other hand, I do like the idea of learning the CSS and then making
                              > one
                              > set of changes that can be applied site-wide.

                              You can still do that - use a table for layout, but use css for all your
                              styling, ie borders, text, menus, links etc.,


                              --
                              Nadia


                              • 12. Re: Problems With Layout
                                Tynos
                                So can you tell me how you use layers? Are they the same as "divs"?
                                It looks as though you should not try to construct an entire page out of them.

                                Mista said use the code editor to insert them. How is this any better than inserting them in the Design editor?
                                How do you insert them in the Code editor? Do you just type in "<div id="Layer1"></div>" What do you type in?

                                How do you avoid using "Absolutely positioned divs"?

                                How and when should you or can you add layers to your page(s) via the Insert menu?

                                Is this a good example of a CSS layout?

                                http://www.lissaexplains.com/css3.shtml

                                Thanks,
                                • 13. Re: Problems With Layout
                                  Level 7
                                  > How do you avoid using "Absolutely positioned divs"?

                                  These may help:

                                  http://apptools.com/examples/pagelayout101.php
                                  http://www.great-web-sights.com/g_layerlaws.asp

                                  "layers" or rather absolutely positioned divs are not the optimum way of
                                  creating a layout.

                                  I would go to the Adobe site and follow the CSS tutorials. From the
                                  beginner ones by Adrian to the more advanced - you should then get a better
                                  understanding on how to use css for styling .

                                  http://www.adobe.com/devnet/dreamweaver/css.html


                                  --
                                  Nadia
                                  Adobe® Community Expert : Dreamweaver
                                  Skype: nadiaperre
                                  -------------------------------------------------
                                  Tutorials |SEO |Templates
                                  http://www.DreamweaverResources.com
                                  http://www.csstemplates.com.au
                                  -------------------------------------------------
                                  http://www.adobe.com/devnet/dreamweaver/css.html
                                  CSS Tutorials for Dreamweaver
                                  -------------------------------------------------





                                  • 14. Re: Problems With Layout
                                    *mista* Level 1
                                    Hi Tynos
                                    Dreamweaver gives you three options "Design" "Split" and "Code". When we start with Dreamweaver, we follow the path of least resistance and the design view is most appealing.

                                    Your webpage is all about your code and its the code that decides everything - the layout, content layout, content itself. The design view is basically a crutch (for want of a better word) to give you a feel of how everything is looking. The heart of your page is in the code. If your code is right, your webpage will look right - something like, if you want to fix your car, you've got to open the hood. Similarly, if you want a decent webpage, you have to get into the code.

                                    To elaborate some more, if in design view you draw a table, dreamweaver cannot be intuitive as to what sort of table you want. So you maynot generate the code that actually meets your requirements. You may want to merge all cells in the first row, keep all cells the way they are in the second row and so on. Dreamweaver cannot read whats in your mind. If you were to do the same in code-view, you control the code. Dreamweaver has a wonderful coding interface "code hints" (edit>preferences>code hints) that gives you hints/options the moment you start typing in the code.

                                    A good way to learn is to simply view the source code of any webpage that you like - or better still download the page on your computer, look at the code, the css etc. Maybe use "split" view click on something in the window showing the webpage and see what gets highlighted in the code part of the split window.

                                    If you're just embarking on the basics, have a look at http://w3schools.com I am sure the more experienced people here will be able to recommend other good sites too.

                                    I won't comment on the site lissaexplains because I am myself on the learning curve, will let the more experienced folks give you their inputs.

                                    As someone here told me layers are simply absolutely positioned divs. I guess they are called layers because like layers, they can be superimposed on each other. Its a good idea It'll work pretty good if you use only images in your webpage (because images have a specific size). But when you have text on your webpage (which you have to have for the search engines to properly index your webpage), thats when problems start. I might like to view my webpages with very large text size, someone else might have different preferences. When I increase the text size, the container layer of that text expands, and ends up overlapping some other layer. Since they are absolutely positioned and can be superimposed on each other, the end result isn't what you wanted to show. At some places you can use absolute positioning very effectively. But where you want to avoid overlaps, its better to use tables or divs which are not absolutely positioned.
                                    I would suggest reading and learning html, css code, check what code you generate when you draw a layer or a table. If you understand what that code means and if thats what you wanted, its good, if not, change it. Chances are,by the time you're done reading and learning html, css code, you'll probably stop using the "insert" bar as you'll know exactly what code you want to write to achieve the desired results.

                                    Sorry for all this rambling. Just trying to help and provide whatever inputs I know of.
                                    • 15. Re: Problems With Layout
                                      Level 7
                                      > Is this a good example of a CSS layout?
                                      >
                                      > http://www.lissaexplains.com/css3.shtml

                                      No, I don't think so. There is no need to use absolute positioning on most
                                      of her examples.

                                      These are much better, I think -

                                      http://www.maxdesign.com.au


                                      --
                                      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
                                      ==================


                                      "Tynos" <webforumsuser@macromedia.com> wrote in message
                                      news:ei6dkt$oh6$1@forums.macromedia.com...
                                      > So can you tell me how you use layers? Are they the same as "divs"?
                                      > It looks as though you should not try to construct an entire page out of
                                      > them.
                                      >
                                      > Mista said use the code editor to insert them. How is this any better than
                                      > inserting them in the Design editor?
                                      > How do you insert them in the Code editor? Do you just type in "<div
                                      > id="Layer1"></div>" What do you type in?
                                      >
                                      > How do you avoid using "Absolutely positioned divs"?
                                      >
                                      > How and when should you or can you add layers to your page(s) via the
                                      > Insert
                                      > menu?
                                      >
                                      > Is this a good example of a CSS layout?
                                      >
                                      > http://www.lissaexplains.com/css3.shtml
                                      >
                                      > Thanks,
                                      >