Skip navigation
Currently Being Moderated

Text drifting to left on large screen (on my Dreamweaver website)

May 4, 2012 4:38 PM

Tags: #on #adobe #dreamweaver #layers #page #placement #drift

I used Dreamweaver and wrote a website with tabbed panels.  It looked great in regular size screens, and I checked it across all kinds of browsers.  But today I met with someone who has a wide screen.  Some layers with text in them (in the logo) floated to the left, and on some pages the text also floated to the left so much that it covered the menu and the menu doesn't work anymore.

 

It looks terrible.  Does anyone have an idea for fixing it?  Here is the web address:   www.mnsupportedliving.org

 
Replies
  • Currently Being Moderated
    May 5, 2012 3:03 AM   in reply to lizpete

    You ought to have a look at your page in the validator both for CSS and HTML

     

    You have some coding problems.  One thing the validator reports on your HTML is that you have and extra closing </div>.   It points to your closing tag for the #contatiner but I suspect that you have a closing element somewhere in the page that tricks the validator into thinking that it is not open, if you see what I mean.  Anyway, you need to scrutinise your opening and closing tags to find the one that's off.

     

    Another obvious fault is that you have expressed id="mainContent" several times and you are only allowed one id per page.  It's a unique element.  Change the id to class="mainContent" and adjust your CSS accordingly.

     

    There are a few problems in your CSS in the page.  For instance, I think that you have an extra } in the middle somewhere and you also have a couple of lengths declared without a unit i.e. top: 300; should be top: 300px;

     

    You should be cautious about using position: absolute.  It's always best to try and do without it if you can.  For instance, an element inside another might be positioned with margin to push it away from other elements.  If you need to put elements side by side then turnt to float and add margin or padding to move the elements around a little.  If those won't do, you can turn to position.  It looks like you have used a template that uses position absolute so, you must have thought about that.  If you add an element with position: absolute you need to give its container position: relative.  Otherwise the position dimensions you give to the absolute positioned element will position to an higher element which could be the view port.  That will cause elements to move when they are viewed on different screen sizes.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2012 2:36 PM   in reply to lizpete

    Absolute positioning (AP) is not your friend.  You don't need it and shouldn't be using it for primary layouts. 

     

    Why? AP elements are removed from the normal document flow and positioned relative to the top left corner of the browser window.  The problem is they don't move in relation to the page. This is why your AP elements look out of place when browser viewport is resized or page is zoomed out.

     

    For best results, use default CSS positioning (static or none) along with margins, padding or floats for alignment.  Your problems with drifting text will disappear.

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 1:36 PM   in reply to lizpete
    The answer turned out to be very simple:  I just added     position:relative;    to the CSS for the container.  I didn’t need to do anything else.

    You better check your site with increased text sizes.  Looks to me like your header text gets chopped off.

     

    As for your errors, don't worry about "tabindex."  It's not a major issue.

     

    <form> tags cannot be inside a <table> tag.   Move your <form> to a table cell.

     

    <table>

         <tr>

              <td><form>....  </form>

              </td>

         </tr>

    </table>

     

    ID names can be used only one time per page.  You have used #mainContent multiple times.  Change #mainContent (ID) to .mainContent (class) which can be used as often as you wish. 

     

    XHTML documents require all lowercase tags.  Change POST to post.

     

    Your input fields require an XHTML closure.  Change this:

     

    <input type="text" name="realname" size=40>

     

    to this:

     

    <input type="text" name="realname" size=40 />

     

    HTML & CSS Tutorials - http://w3schools.com/

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points