13 Replies Latest reply on Apr 27, 2006 3:16 PM by Barefax

    How to create framesets?

    Barefax
      Not animation/rollover frames, but actual frame sets...
      As per my previous topic in this forum, I made a graphic to show my situation:

      http://img270.imageshack.us/img270/8130/samplesite46732248at.jpg

      The canvas is 800x600. Everything GREEN cannot be moved (meaning I do not want to change the layout). I would like a frameset (might be another way to do it, but it must function like a frameset) within this area with a scroll bar in it (BLUE)

      I tryed adding a "layer" on top of it in dreamweaver, but the layer did not allow me to keep the size a certain amount. I pasted some sample text and the result was something like this:

      http://img270.imageshack.us/img270/7898/samplesite445787547pn.jpg

      Any possible solutions (keeping in mind I am a total newbie at web design)?

      Thanks again
        • 1. How to create framesets?
          llamaparsnip
          I've put up a sample page here. If that's roughly what you need, you can tweak the properties in the css to your liking (e.g. positioning, dimensions etc).

          P.S. I'd stay away from framesets if you can.
          • 2. Re: How to create framesets?
            Level 7
            Barefax wrote:
            > Not animation/rollover frames, but actual frame sets...
            > As per my previous topic in this forum, I made a graphic to show my situation:
            >
            > http://img270.imageshack.us/img270/8130/samplesite46732248at.jpg


            It cannot be done in Fireworks. You need to do that in Dreamweaver.
            There's a vertical scroller extension for Dreamweaver you can download here:

            http://www.projectseven.com/extensions/info/vscroller/index.htm


            --
            Linda Rathgeber ACE ::: PVII
            http://www.projectseven.com
            Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
            CSS Newsgroup: news://forums.projectseven.com/css/
            -----------------------------------------------------------------------
            Adobe Community Expert - Fireworks
            -----------------------------------------------------------------------
            Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
            • 3. Re: How to create framesets?
              Barefax Level 1
              Thanks for the tips. I'll try the first suggestions first since its a little overwhelming since I dont know what I'm doing

              quote:

              Originally posted by: llamaparsnip
              I've put up a sample page here. If that's roughly what you need, you can tweak the properties in the css to your liking (e.g. positioning, dimensions etc).

              P.S. I'd stay away from framesets if you can.


              That looks like the type of thing I'm going for. Two questions - can I include html code for images etc in there, or is that type of thing limited to text only?

              And, how do I apply it to my page in dreamweaver?

              Thanks

              • 4. Re: How to create framesets?
                Barefax Level 1
                Ok I got it to work but am still having a major issue.

                Because of the code that states the postition (left, top), it changes the placement of my "frame" when viewed with different screen resolutions (understandably, because it takes it's position from the screen. Screen changes so it does too).

                So the problem is, it looks okay in 1024*768, but when I set my screen to 800x600 to test it out, it was halfway off the page. Is there any way to get it to remain in the same spot no matter what the screen res of the viewer? Maybe to make it be a certain position relative to the canvas, not the page itself?

                I was so excited that it worked, until I ran into this issue. Help is much appreciated again, thanks
                • 5. Re: How to create framesets?
                  llamaparsnip Level 1
                  Glad it helped Barefax!

                  We're getting into the realms of css positioning here, and everything depends on where you want the box placed. One option is to specify something like this in the css:

                  top: 10%;
                  right: 5%;
                  • 6. How to create framesets?
                    Barefax Level 1
                    sigh....

                    I've tried 2 new solutions and still getting the same problem. I will post my 2 attempts here and maybe someone could see where I went wrong.

                    # 1: I installed this dreamweaver extenstion ( http://www.projectseven.com/extensions/info/snaplayers/ ) which in theory is exactly what I want it to do. Following the directions on that page exactly, the layer still moved itself when the browser window size was changed.

                    # 2: Tried using the left and top % instead of pixel values... the layer still moved itself when the browser window size was changed.

                    Here is the code associated with the layer:

                    <span id="Layer1" style="position:absolute; left:494px; top:74px; width:434px; height:328px; z-index:1; overflow: scroll;">

                    Can anyone see anything wrong there that might be messing this up? I tried deleting/changing several of those attributes my self, but without knowing much about this, my efforts were useless. With the extension mentioned in #1, the page did not say what values to put in the already existing code (the code in the editor, not the behavior settings), so I tried various things (such as setting the left and top to 0), but nothing worked either.

                    Thanks again.
                    • 7. Re: How to create framesets?
                      llamaparsnip Level 1
                      Not sure what the problem is Barefax. Using the code I posted, when you resize your window, the box should still be the specified % away from the top and right edges. The actual pixel distances change with the height and width of your browser because they are percentages. If this isn't what you want, you could use absolute values like:

                      top: 100px;
                      right: 20px;
                      • 8. How to create framesets?
                        Barefax Level 1
                        Perhaps I am understanding something wrong, or perhaps I am explaining my situation wrong.

                        Everything you have said so far works the way you explained it, but here is why it does not work in my situation:

                        If I set the right value to 20% (for example), than the layer will be 20% from the right side - which is fine in theory, but as soon as I grab the right edge of my browser window and resize it (to simulate different viewing conditions/screen res's) the layer moves as well (because it is remaining 20% away from the edge). The result is that the layer moves "on top" of other elements of my page. The same for the top value - if I set it a certain %, and move window size smaller/bigger vertically, that layer moves into my header and even off my canvas if the window is resized enough.

                        The same thing happens when I set it to use px instead of %. The pixel value (from the left edge for example) will be 300 px (example). If I resize my window by dragging the left side into the center, than the layer still stays the standard 300 px from the left side - which means my layer starts to move off of the right side of my canvas.

                        I hope that gives a clearer image of my situation.

                        Oh, and thanks again for all the help

                        EDIT Here is a little animation I made that shows the problem by simulating different browsing sizes. Color Red is my menus/headers etc. Blue Gradient is my background (behind my canvas). The little text block in center is my Layer. Black is outside of the window area.

                        http://img270.imageshack.us/img270/3725/sampleanimation5781ei.gif

                        This is with my right value set to an X number of pixels. But the situation would be similar if I set it to have a left px value, or a left/right % value (only it would move the other way).
                        • 9. Re: How to create framesets?
                          llamaparsnip Level 1
                          So you want a variable width for your container? Specifying

                          width: 50%;

                          for the container will give it a width of 50% of its parent container.
                          • 10. Re: How to create framesets?
                            Barefax Level 1
                            No variable width, I want a fixed width
                            • 11. Re: How to create framesets?
                              llamaparsnip Level 1
                              So you want a fixed width box that doesn't overlap other elements on the page when the window is resized? Given that "Everything GREEN cannot be moved" (from your first post), isn't that impossible?
                              • 12. Re: How to create framesets?
                                llamaparsnip Level 1
                                quote:

                                Originally posted by: Barefaxwhen I set my screen to 800x600 to test it out, it was halfway off the page.


                                ....or is it simply that the number of pixels for the 'left' property in the original example need reducing?

                                • 13. How to create framesets?
                                  Barefax Level 1
                                  quote:

                                  Originally posted by: llamaparsnip
                                  So you want a fixed width box that doesn't overlap other elements on the page when the window is resized? Given that "Everything GREEN cannot be moved" (from your first post), isn't that impossible?


                                  Perhaps my novice understanding of this stuff made me make an error. I assumed that "fixed width" means that the layer does not get bigger if more text/images are added inside of it, but instead uses a scroll bar if and when it needs it (this part is okay and working fine for me).

                                  Well I finally got it to work - but only with a compromise. I made everything left jestified (the canvas on the page), and now the layer stays in the exact spot that I place it, regardless of the window size. I would have prefered to have it centered, but I can live with this too.

                                  I dont know why this is happening (obviously cause im a begginer), but can you do me a favor llamaparsnip? Try this out in dreamweaver and see if you can get it to work? Make a page in fireworks and import it into dreamweaver. Make a layer right in dreamweaver (not a seperate CSS) and put some text in. Select All > Center Justify. Preview in your browser and drag around the window size and take note of what happens to the layer. Now left justify and preview again. Does the layer act differently?

                                  I didnt think this would be the solution (I got it by accident really), because it doesnt make sense to me. If everything on the page is center justified, than shouldnt the layer also stay center justified in relation to the window? Cause mine didnt.

                                  The problem is still there for anyone that ever comes across this, or when one day, someone's client says "I want what Barefax wanted" ( ), and no one will be able to solve this dilema???