10 Replies Latest reply on Sep 19, 2008 4:38 PM by jon@cmiwebstudio

    Urgent Help Needed with CSS positioning

    Fun Leprechaun
      Hi there,

      Can you tell me how I set the header to 100% of any browser window without effective the flash that's in the boxes? I don't want the boxes to stretch. Also, when I view this website on a larger screen, the left sidebar moves to the right of the header boxes - why is this happening?

      Another problem - the maincontent div text keeps wrapping to the size of the browser window - I don't want it to do that. I've had no luck with whitespace: no wrap.

      So basically, I want the entire website to be 100% of the viewers browser window but I don't want the text to wrap at all. I have gone around in circles with CSS positioning - I guess I just don't understand the basics.

      I need to complete this project by tomorrow so I'm sweating here!

      Here's the url:

      http://www.saponelawfirm.com/

      Many, many thanks!

      Help please!
        • 1. Re: Urgent Help Needed with CSS positioning
          JoeDaSilva Level 4
          You could tile a background image in the header area to carry the green and purple all the way over. Your code is such a mess though I'm afraid I don't have the time to tell you where to start with that process.

          Good luck.
          • 2. Re: Urgent Help Needed with CSS positioning
            Fun Leprechaun Level 1
            Can anyone else help me please?
            • 3. Re: Urgent Help Needed with CSS positioning
              jon@cmiwebstudio Level 3
              The Dreamweaver cs3 pre designed css templates provide a lot of commented notes to aid you through what you need, and why you need it. Be sure to go over your page in code view and read the notes.

              There are certainly different schools of thought and personal preferences, but in my opinion a website that fits every browser size will be compromised the majority of the time. It's a give and take situation... for the flexibility you gain, the design takes the brunt of it. Sure, you can repeat backgrounds to extend headers, and fix divs so the text doesn't move all over the place, but no matter what you do, the look will change as the browser expands/contracts. Sometimes it's worth the compromise, many times it's not. Unless you have a client that insists on this, I would suggest choosing a target size, 800 or 1024.

              Side note, took a quick look at your code. I'd suggest using an include file for your css and javascript. Helps improve load times once cached.
              • 4. Re: Urgent Help Needed with CSS positioning
                Fun Leprechaun Level 1
                I also need to align the sidebar div and the footer div correctly.
                • 5. Re: Urgent Help Needed with CSS positioning
                  Level 7
                  The two Flash objects on your page account for 195K of the total page weight
                  of 251K. That's too much by at least a factor of 3. This makes your page a
                  sluggish load, even on broadband. While externalizing CSS and javascript is
                  always a good idea, I'd say it won't make a bit of difference in the case of
                  this page, where the bulk of the weight cannot be externalized.

                  Using a mixed case nomenclature as you have is sure to get you into hot
                  water -

                  preloadImages('Images/FIRMOVERVIEW2.GIF','Images/PROFILES2.GIF',
                  'Images/AREAS2.GIF','Images/CLIENTS2.GIF','Images/LINKS2.GIF','Images/contactblog2.gif')"

                  Note that sometimes the "gif" extension is capitalized, and sometimes not.
                  And sometimes the name is capitalized, and sometimes not. This is
                  definitely a problem waiting to happen on a *nix server as you are, since
                  that OS is case sensitive, meaning that "Index" and "index" would be two
                  different folder names.

                  To make your header flex to better fit the container's width, try changing
                  this -

                  <td width="933" align="left" class="box2"><img
                  src="Images/NAMEBACKGROUND2.GIF" alt="Benjamin Sapone Law Firm" width="784"
                  height="130" /></td>

                  to this -

                  <td align="left" class="box2"><img src="Images/NAMEBACKGROUND2.GIF"
                  alt="Benjamin Sapone Law Firm" width="784" height="130" /></td>

                  And since the div#header is set at 1200px width in your CSS, if you want the
                  inner table to be flexible and fill the viewport, you would have to change
                  that width to either 100% or just remove it altogether. Unfortunately you
                  are still not done, since the div#header is sitting in the div#container,
                  also set to 1200px width. What you could do would be to just move
                  div#header completely out of div#container, and have them stacked one on top
                  of the other. Would that work?

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "Fun Leprechaun" <webforumsuser@macromedia.com> wrote in message
                  news:gasfm1$hv6$1@forums.macromedia.com...
                  > Hi there,
                  >
                  > Can you tell me how I set the header to 100% of any browser window without
                  > effective the flash that's in the boxes? I don't want the boxes to
                  > stretch.
                  > Also, when I view this website on a larger screen, the left sidebar moves
                  > to
                  > the right of the header boxes - why is this happening?
                  >
                  > Another problem - the maincontent div text keeps wrapping to the size of
                  > the
                  > browser window - I don't want it to do that. I've had no luck with
                  > whitespace:
                  > no wrap.
                  >
                  > So basically, I want the entire website to be 100% of the viewers browser
                  > window but I don't want the text to wrap at all. I have gone around in
                  > circles
                  > with CSS positioning - I guess I just don't understand the basics.
                  >
                  > I need to complete this project by tomorrow so I'm sweating here!
                  >
                  > Here's the url:
                  >
                  > http://www.saponelawfirm.com/
                  >
                  > Many, many thanks!
                  >
                  > Help please!
                  >

                  • 6. Re: Urgent Help Needed with CSS positioning
                    Fun Leprechaun Level 1
                    thanks a mill folks - I'll try this tonight and let you know how it works.

                    Tell me this, are there any great CSS classes in San Francisco that you could recommend?

                    Also, is there a way to reduce my Flash size?

                    I am now thinking I would be better off with a fixed browser size of 800px?
                    • 7. Re: Urgent Help Needed with CSS positioning
                      Fun Leprechaun Level 1
                      what's an include file and how do I 'include' it (pardon the pun) into my css and javascript file to increase load time?
                      • 8. Re: Urgent Help Needed with CSS positioning
                        Level 7
                        You want to DECREASE load time, not increase it. And in the case of your
                        page, not only was the suggestion a bit off target, but you wouldn't do it
                        that way, anyhow.

                        What the poster most likely meant was to externalize the CSS and javascript
                        by moving them respectively from being embedded in each page to a linked
                        file. You can find out more about this, and about server-side includes in
                        DW's F1 Help.

                        --
                        Murray --- ICQ 71997575
                        Adobe Community Expert
                        (If you *MUST* email me, don't LAUGH when you do so!)
                        ==================
                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                        ==================


                        "Fun Leprechaun" <webforumsuser@macromedia.com> wrote in message
                        news:gatv31$eef$1@forums.macromedia.com...
                        > what's an include file and how do I 'include' it (pardon the pun) into my
                        > css and javascript file to increase load time?

                        • 9. Re: Urgent Help Needed with CSS positioning
                          Fun Leprechaun Level 1
                          Hi there,

                          I have moved the header div out of the contain div but my sidebar div still keeps jumping to the top-right of the header when the browser window is expanded. I have the sidebar set to float: left but also I have the position set to inherit - should it be set to something else? Can you review my code again and let me know? Also, I want the width of the footer div to match that of the header div but when I enter the same fixed pixel value it doesn't work. What am I doing wrong here? This whole CSS crap is driving me to drink!

                          Here's the url again: http://www.saponelawfirm.com/

                          Thank you so much for your help!
                          • 10. Re: Urgent Help Needed with CSS positioning
                            jon@cmiwebstudio Level 3
                            I wasn't making an assessment of the entire design, or all the changes that need to be made. As mentioned, It's a good practice to use external files for all css and javascript code. I suggest picking up some great resource books on design. Amazon is very inexpensive place to get them.