Skip navigation
appchick21
appchick21 Calculating status...
Currently Being Moderated

Layout keeps changing depending on the computer setting

Apr 5, 2012 9:13 AM

I have created a very simple beginners webpage with a simple spry menu bar.  It works great, but when I open the page on a larger screen than the standard, it keeps changing my layout.  My Spry menu bar on my screen is 4 columns.  When my CFO opens it, it pushes the last column below the first one.  Is there a way to lock columns so this doesn't happen?

991 Views   14 Replies   Latest reply: Nancy O., May 7, 2012 1:56 PM
 
Replies
  • SnakEyez02
    Currently Being Moderated
    1. SnakEyez02,
    Apr 5, 2012 9:31 AM   in reply to appchick21
    Report

    Please post a link to the page in question.

     
    |
    Mark as:
  • appchick21
    Currently Being Moderated
    2. appchick21,
    Apr 5, 2012 10:00 AM   in reply to SnakEyez02
    Report

    www.loricaequity.com

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Apr 5, 2012 10:38 AM   in reply to appchick21
    Report

    This page  http://www.loricaequity.com/  has no HTML document type.  No valid doc type puts your page into Quirks Mode which is geek speak for browsers don't know how to render the page. Before you we can help you with layout issues, you need to fix your code errors.  See details below.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.loricaequ ity.com%2F

     

     


    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:
  • appchick21
    Currently Being Moderated
    4. appchick21,
    Apr 5, 2012 10:53 AM   in reply to Nancy O.
    Report

    I'm not sure I follow.  ???

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    5. martcol,
    Apr 5, 2012 11:06 AM   in reply to appchick21
    Report

    http://www.w3schools.com/tags/tag_doctype.asp

     

    Try that.  After you have added a doc type, go back to the validator and see what other problems your page might have.

     

    Martin

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    6. John Waller,
    Apr 5, 2012 1:45 PM   in reply to Nancy O.
    Report

    This page  http://www.loricaequity.com/  has no HTML document type.

     

    Perhaps the page has now been updated because I see a HTML5 doctype on line 1

     

    <!DOCTYPE HTML>

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Apr 5, 2012 2:11 PM   in reply to John Waller
    Report
    Perhaps the page has now been updated because I see a HTML5 doctype on line 1

     

    <!DOCTYPE HTML>

     

    Some progress is being made. However the <style> and <script> tags are incorrectly nested outside the </head> tag.

     

     

    Nancy O.

     
    |
    Mark as:
  • appchick21
    Currently Being Moderated
    8. appchick21,
    Apr 5, 2012 2:15 PM   in reply to Nancy O.
    Report

      You are fantastic for helping out.

     

    Yes, I'm actually working through all that right now.  Just reloaded everything again.  Was going to give it a few minutes.  I can't figure out exactly where I'm going wrong on that so right now it's be a little of trial and error.

     
    |
    Mark as:
  • appchick21
    Currently Being Moderated
    9. appchick21,
    Apr 5, 2012 2:21 PM   in reply to appchick21
    Report

    You have been very helpful though...yes, this is definitely looking a lot better.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    10. Nancy O.,
    Apr 5, 2012 2:22 PM   in reply to appchick21
    Report

    Ok. Change all this:

     

    </head>


<style type="text/css">
h1 {
 color: #FFF;
}
</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
 font-size: 14px;
 font-family: Verdana, Geneva, sans-serif;
}
a:link {
 color: #666;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
 color: #000;
}
a:active {
 text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
 font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
 font-size: 45px;
 color: #FFF;
 text-align: center;
}
h2 {
 font-size: 24px;
 color: #000;
}
h3 {
 font-size: 18px;
 color: #000;
}
h4 {
 font-size: 14px;
 color: #000;
}
</style>

     

     

    To this:

     

    
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">


<style type="text/css">
body,td,th {
 font-size: 14px;
 font-family: Verdana, Geneva, sans-serif;
}
a:link {
 color: #666;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
 color: #000;
}
a:active {
 text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
 font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
 font-size: 45px;
 color: #FFF;
 text-align: center;
}

h2 {
 font-size: 24px;
 color: #000;
}
h3 {
 font-size: 18px;
 color: #000;
}
h4 {
 font-size: 14px;
 color: #000;
}
</style>


</head>

     

    And you should be good to go.

     

    Nancy O.

     
    |
    Mark as:
  • appchick21
    Currently Being Moderated
    11. appchick21,
    Apr 5, 2012 2:38 PM   in reply to Nancy O.
    Report

    That did it!  Thank you so much...I'll have to figure out what you did.  I definitely appreciate it!

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    12. Nancy O.,
    Apr 5, 2012 2:48 PM   in reply to appchick21
    Report

    I'll have to figure out what you did.

    I simply helped you get everything into correct HTML sequence. 

     

    <html>

    <head>

         <title></title.

         <script></script>

         <style></style>

    </head>

     

    <body>

    your page content...

    </body>

     

    </html>

     

     

    I definitely appreciate it!

    You're welcome. Glad to be of help. 

     

     

    Nancy O.

     
    |
    Mark as:
  • appchick21
    Currently Being Moderated
    13. appchick21,
    May 7, 2012 8:28 AM   in reply to Nancy O.
    Report

    Having the same problem, but this time it's my photo and SWF file.  I am redoing the webiste to include some new features.  Lay out is similar, but having problems with middle table where the SWF and Photo keeps changing size and loading the way I want it to. 

     

    Is there something specific I need to do to prevent this?  I've ready several help questions, but it is not addressing the issue that I have.  i went to the validator and uploaded my document to check and here are the results. 

     

    http://validator.w3.org/check

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    14. Nancy O.,
    May 7, 2012 1:56 PM   in reply to appchick21
    Report

    For best help with layout issues, you'll need to post a link to the problem page on your remote server. 

     

     

    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:
Actions

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