6 Replies Latest reply: Jan 10, 2011 5:22 PM by John Waller RSS

    Text overlay

    broomeGirl Community Member

      Hi Is there any way I can achieve the same sort of layout but without running into issues of text and heading running over the logo/card.  If I make the screen smaller .. the text over runs the logo/card.  The page looks great on my IMac and my windows laptop but apparently on the older monitors the h1 and the p tags run over the top of the logo/card.

       

      Appreciate any comments.

       

      Site is http://kimberleywebdesign.com/index.html

        • 1. Re: Text overlay
          Ben Pleysier CommunityMVP

          Yes, by stop using relative and absolute positioning. Have a look here http://apptools.com/examples/pagelayout101.php

           

          Gramps

          • 2. Re: Text overlay
            pziecina CommunityMVP

            Hi

            The page looks great on my IMac and my windows laptop but apparently on the older monitors the h1 and the p tags run over the top of the logo/card.

            My monitor is only 6 months old, (led/1080p hd) and this still happens, this shows it is a problem with the design/code not the monitors.

             

            As someone who is offering their services as a web designer/developer you should know this.

             

            PZ

            • 3. Re: Text overlay
              John Waller CommunityMVP

              The page looks great on my IMac and my windows laptop but apparently on the older monitors the h1 and the p tags run over the top of the logo/card.

               

               

              It's all monitors, not just older ones.

               

              Avoid using position:absolute to position everything on the page precisely where you want it.

               

              Since it removes the element from the natural flow of the page, position:absolute often has unintended consequences such as those you're experiencing now.

               

              Since older monitors are smaller and lower res, this issue appears first. But it also appears in smaller browser windows on hi res monitors. Not everyone views the web with fullscreen browsers.

               

              Since you're designing on a hi res monitor, always test your pages in various browser sizes. I regularly test mine by grabbing the lower RHS of the browser window and dragging it through a series of different sizes to see the effect on page layout.

               

              Remove all positioning (relative and absolute) from your CSS and re-layout the page using margins and floats.

               

              e.g.

               

              #card {
              width:475px;
              position:absolute;
              top:122px;
              padding: 0;
              margin:0;
              left:0px;
              }

               

              can be replaced with

               

              #card {
              float:left;
              margin-top:122px

              }

               

              which leaves it in the natural flow of the page so that text wraps around as expected in smaller browser windows.

               

              You can then float the other page elements around it.

               

              See http://www.barelyfitz.com/screencast/html-training/css/positioning/ for more.

              • 4. Re: Text overlay
                broomeGirl Community Member

                Dear PZ, I would love to be in your position, where you never need help.  But myself I am constantly learning things and not knowing javascript I was having problems with the layout because of the dock menu.  I do know positioning techniques as you can see from the rest of my site.

                 

                Sometimes we all get a little frustrated/tired and dont think so clearly and need a little help.

                • 5. Re: Text overlay
                  broomeGirl Community Member

                  Thanks very much for your reply, hopefully I have it sorted.  I hardly ever use relative and absolute positioning but the menu dock does and it was throwing out my normal layout techniques.  Think I just got a bit tired and stupid.  Thanks anyway.

                  • 6. Re: Text overlay
                    John Waller CommunityMVP

                    Looks good now.

                     

                    I think we all have those moments when silly things stump us and a fresh pair of eyes points out the obvious.