Screen Res problem with website

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • tharden3
    Contributor
    • Jul 2008
    • 916

    Screen Res problem with website

    Well guys, my first web site is coming along pretty good. I've been reading up on HTML & XHTML books, and learning CSS as I go. I got it up and running on a free web host. It's just a very skeleton-basic layout with little text right now. I went to school to try it out on a small CRT monitor, and some of the boxes were slightly out of place. They weren't so far off that it looks absolutely terrible, but I'd like a uniform design throughout browsers and different screen resolutions. I guess part of the problem is that I'm designing it on a 22" flat screen monitor, and get few chances to ever see it on anything smaller than 1024x740 resolution.
    a.) what do you suggest I do?
    b.) is there a virtual tester I can download that will show me what it looks like in certain resolutions? You know, sort of like the software that enables you to auto check you're site in several browsers?
    Any tips would be appreciated.
    Thanks,
    Timothy Harden
  • David Laakso
    Recognized Expert Contributor
    • Aug 2008
    • 397

    #2
    Originally posted by tharden3
    a.) what do you suggest I do?
    Timothy Harden
    With mouse, right click on the desktop>propert ies>settings>mo ve the slder to pick a screen resolutions>app ly>ok>wait & it will reset to the resolution you picked.

    Alternately, when you are at 1024, there is a triangle grab in the lower right corner of the window when viewing a page in a browser. Left click and hold that "grab" down, while simultaneously dragging the window to the left to make the window narrower.

    Hang on, I am sure others will provide valuable suggestions...

    Comment

    • tharden3
      Contributor
      • Jul 2008
      • 916

      #3
      Originally posted by David Laakso
      With mouse, right click on the desktop>propert ies>settings>mo ve the slder to pick a screen resolutions>app ly>ok>wait & it will reset to the resolution you picked.

      Alternately, when you are at 1024, there is a triangle grab in the lower right corner of the window when viewing a page in a browser. Left click and hold that "grab" down, while simultaneously dragging the window to the left to make the window narrower.

      Hang on, I am sure others will provide valuable suggestions...
      yes, good plan, but I've already tried that and it doesn't give me the same results as a smaller monitor. It's weird.

      Comment

      • David Laakso
        Recognized Expert Contributor
        • Aug 2008
        • 397

        #4
        Originally posted by tharden3
        It's weird.
        Then provide a clickable link tom the page in question in your post to the forum. I can't fix what I can't see. And for that matter, I can't necessarily fix what I can see. It's weird.

        Comment

        • tharden3
          Contributor
          • Jul 2008
          • 916

          #5
          link
          lol, yes very strange indeed. See, the weird thing is, I actually unplugged my 22" flat screen and plugged in one of my old CRT 16" monitors (and yes, a 16" CRT monitor is the size of a boat anchor, although I believe the monitor is heavier...) It works fine on my CRT monitor, but the ones at school, which I believe to be the same size and resolution, change the look very slightly. Like I said, it's not a huge deal, but why shouldn't my web site look right everywhere? I've worked very hard to make it usable in all browsers and on every resolution, I don't want to stop paying attention to detail this late in the game. Again, any help would be nice.
          Thanks
          Timothy Harden

          Comment

          • tharden3
            Contributor
            • Jul 2008
            • 916

            #6
            P.S. Give me your opinion of the rough outline. Is the color scheme good? Do you like the choice of navigation?

            Comment

            • David Laakso
              Recognized Expert Contributor
              • Aug 2008
              • 397

              #7
              It's is a given that no two monitors on the face of the earth, regardless of their screen resolution or dpi, are likely to render any Website the same in terms of "how it looks." The best we can do is to try an ensure that the site is readable, easy to use, and accessible.

              Following are some suggestions for correcting the page for IE/6 and IE/7:
              Putting IE/6 in "quirksmode ," rather than attempting to correct it in its "less than standards mode" is the easiest and most efficient way with your current layout. To do so add an xml declaration above the doctype.
              Code:
              <?xml version="1.0" encoding="utf-8"?>
              and
              Code:
              html {font-size:100%;}<----- :: defeat all versions of IE em font-scaling bug
              body{font-size:1em;text-align: center;margin:0; padding:0;}<------------:: add all to center IE/6, and provide default margin/padding for all browsers
              .all{ 
              margin-top: /*-25px*/25px; <---- :: amend to keep page from hitting chrome in IE/7
              text-align:left;} <------ :: add to change text-align center to left for the page proper
              I hope I did not forget anything as this was done quickly.
              Validate the markup and CSS.
              I don't want to "rain on your parade" but constructing a layout entirely using absolute positioning may prove to be the bane of your existence further down the road...

              Comment

              • David Laakso
                Recognized Expert Contributor
                • Aug 2008
                • 397

                #8
                I have the feeling you have a sense of humor, so remember not to forget to ever take my comments too seriously (if at all).

                Give me your opinion of the rough outline.
                See above thread regarding the use of absolute positioning. Making the primary content (middle panel) first in the source order of the 3 columns might be a nice touch. As would making the vertical navigation column third in the source order of the 3 columns. The narrow widths of both sidebars may be problematic. The splash page, is not necessary, and some think of them as a kind of a throwback to the 90s-- do you really want your site to be indexed by search engines as "enter?"
                Is the color scheme good?
                Compared with what? The tile background image is a little overwhelming on my 1680 MBP, and may cause some to have difficulty concentrating on whatever it is that will be your actual page content?
                Do you like the choice of navigation?
                See this page for ways to set horizontal and vertical navigation lists with CSS [1] (be sure to check the browser support chart, as not all of those menus work cross-browser):
                listamatic

                Comment

                • tharden3
                  Contributor
                  • Jul 2008
                  • 916

                  #9
                  Originally posted by David Laakso
                  The splash page, is not necessary, and some think of them as a kind of a throwback to the 90s-- do you really want your site to be indexed by search engines as "enter?"
                  If I don't have the splash page, should I change the main page name/extension to index.html instead of PN.html? I was told somewhere else on bytes that a server will always direct the user to the index page first. Is that true?

                  Comment

                  • David Laakso
                    Recognized Expert Contributor
                    • Aug 2008
                    • 397

                    #10
                    Yes, to both questions.

                    Comment

                    • tharden3
                      Contributor
                      • Jul 2008
                      • 916

                      #11
                      so when you go to a plain ole' http://www.NewbQuestion.com that's actually considered the index page, even though it doesn't have the extension index.html right? What tells google and other search engines "Hey! This one is really an index page, even though it end with .com/ instead of .com/index.html"

                      P.S. Don't crucify me for this, because it was a very stupid newbie mistake, but I figured out the problem. I have IE7 (as well as 4 or 5 other browsers) on my home PC to figure out what my site looks like across different browsers. The ones at school have IE6. DUH!!!! It had nothing to do with the monitors... it was an old version of IE, just being its way-behind-standards self. Forgive me for wasting 10 minutes of your life that you will never get back. I'm going to go sit quietly in the corner of my room with the lights of, and not do anything for 10 minutes. We're even.

                      Comment

                      • David Laakso
                        Recognized Expert Contributor
                        • Aug 2008
                        • 397

                        #12
                        Yes.
                        http://www.whateveryou rurlis.com seeks the default file on the server. You must upload the default file to the server. The default is named index.html.
                        Please knock-off the "newbie" stuff, already. Everyone of us are "newbies" (some of us just have different issues to cope with than yours).
                        I'm glad you resolved the monitor question.
                        The correction for IE/6 is above (providing I did not make an error very early this morning before coffee).

                        Comment

                        • tharden3
                          Contributor
                          • Jul 2008
                          • 916

                          #13
                          Originally posted by David Laakso
                          Yes.
                          http://www.whateveryou rurlis.com seeks the default file on the server. You must upload the default file to the server. The default is named index.html.
                          Please knock-off the "newbie" stuff, already. Everyone of us are "newbies" (some of us just have different issues to cope with than yours).
                          I'm glad you resolved the monitor question.
                          The correction for IE/6 is above (providing I did not make an error very early this morning before coffee).
                          Thank you very much. You've been a lot of help.

                          Comment

                          • tharden3
                            Contributor
                            • Jul 2008
                            • 916

                            #14
                            Originally posted by David Laakso
                            I don't want to "rain on your parade" but constructing a layout entirely using absolute positioning may prove to be the bane of your existence further down the road...
                            I know this was one of the older posts we discussed, but I forgot to ask you.... why? Why should I not use Absolute positioning? How else to websites achieve proper column positioning? If not absolute, then what? Are web standards changing in favor of something else?
                            See above thread regarding the use of absolute positioning. Making the primary content (middle panel) first in the source order of the 3 columns might be a nice touch. As would making the vertical navigation column third in the source order of the 3 columns.
                            Another question... why? Just better HTML? I guess a screen reader might have a tough time reading it huh.

                            Comment

                            • David Laakso
                              Recognized Expert Contributor
                              • Aug 2008
                              • 397

                              #15
                              Originally posted by tharden3
                              I know this was one of the older posts we discussed, but I forgot to ask you.... why? Why should I not use Absolute positioning? How else to websites achieve proper column positioning? If not absolute, then what? Are web standards changing in favor of something else?
                              Web Standards sites:
                              1/ consist of valid HTML or XHTML
                              2/ use CSS instead of tables for layout
                              3/ are properly structured and semantically marked up
                              4/ work in any web browser
                              There is nothing in "Web Standards" that says thou shalt structure thy layout using position:absolu te or any other "specific" positioning method that are available with css.

                              Float structured layouts, particularly negative-margin layouts, tend to survive cross-browser with more flexibility, robustness, and stability. Absolute positioning (AP), if even necessary at all, within such float structures, is usually limited to positioning small elements.

                              Granted your entirely AP construct layout appears to be functional, such layouts tend to be brittle and are easily broken with user discretion. This may be more apparent once you get around to putting "real" content in them.

                              I am merely expressing that a better learning experience, and more user friendly method of constructing the layout may be advantageous.

                              Either way, it is your site and your call-- not mine.

                              Comment

                              Working...