Want to code my site for all resolutions

hey
guys
i created my site at photoshop now layered also in dreamweaver problem is occuring in past that my site unable to view on bigger resolutions such as 1024x768 http://jez.sitesled.com only 800x600 best viewable plz suggest any shortcut by which my site automotically get centers in 1024x768 resolutions.....

bye

 

you could write a script that loaded a differnt page template based on the viewers resolution, but then you would have to code the whole site so that you didnt have to change 3-4 versions of the site every time you added something to the site


why not just center it in the first place? set the main table to align="center"....

I can view it on big resolution? Maybe I don't understand the problem

 

1. Use a complete strict DTD, and be sure your markup is valid. Without that, IE renders in quirks mode where it understands even less css than it does in standards mode; that includes the proper method of centering your page.

2. Lose the absolute positioning. All of it. Absolute positioned pages require a hacky centering method. That method will cause smaller sized browsers to lose part of the content off the viewport. The lost portion cannot be scrolled onto the window.

3. Lose the absolute positioning. All of it. Absolute positioned pages are fragile, breaking easily. This page breaks badly at a single font size step up.

4. Use a sane font size. Yours is incredibly small. Any visitor trying to stay long on the page will be upping the font size. That breaks the page. Even well designed pages would have difficulty coping with the degree of size increases this page will foster. There is a reason browsers and word processors come with the default font size set where it is. It's because people can read it.

5. Scrap the markup. All of it. Thhere is no socially redeeming value. HTML should describe the meaning and structure of the content. This does neither.

cheers,

gary

 

What he means here is you need to rewrite your code again from scratch. Your HTML should only describe structure. From the pages background, to fonts, and table styles, they all need to be defined in CSS.

For example,

<div id="Layer9" style="position:absolute; width:136px; height:80px; z-index:12; left: 491px; top: 390px;"> 

Code (markup):

should be

<div id="Layer9" style="descriptivename"> 

Code (markup):

and in your external CSS document, or within your head tag you should have

<style type="text/css">
.descriptivename 
{
height: 80px;
width: 136px;
z-index: 12;
left: 491px;
top: 390px;
}
</style>

Code (markup):

and thing such as your font should be set as follows:

<font color="#FF6600" size="1" face="Verdana"> your text </font>

Code (markup):

should be changed to

<span class="textstylename">your text</span>

Code (markup):

and the texts attributes should be set in CSS.


Because of your use of absolute positioning, your site will never work in differnt browsers and resolutions

you should re-code it to use a main table with 3 rows. Put the sites logo in the first table, and the copyright/whatnot in the last table, in the middle table create another table with 2 columns. and then put navigation in left column, and insert another table in the right column. This table should have 6 rows and 2 columns.

set the main tables align to left or center, and everything should work right

 

Oh Yes i got it......making invisible tables......as webpage demands

 

You can use a table width=800 and center it in browser. It will work on all resolutions... for higher resolution it will look as centred in browser and for lower resolution it will spread full screen

 

Create a fluid layout with XHTML and CSS so it adjusts for resolutions. It can go wrong at exceedingly big resolutions but if you code it right it works perfectly.

 

Please don't use tables. They were necessary four or five years ago, but are now obsolete as layout tools. Write semantic and well structured html for your content, and be sure you have no syntax errors (it's well formed against a strict DTD).

This is a simple layout that requires nothing but a couple of hacks to compensate for IE's poor implentation of the rules. IE7 has the hack built in. They didn't fix the problem, just paved over it. Here's one way to do it. There are others.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=UTF8" />

  <title></title>
  <style type="text/css">
  /*<![CDATA[*/

  html, body {
    margin: 0;
    padding: 0;
    }
    
  body {
    font: 84%/1.4 verdana, arial, sans-serif;
    color: black;
    background-color: white;
    }
    
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
    
  p + p {
    text-indent: 1em;
    margin-top: 0;
    }
    
  h1 {
    color: #ff6500;
    text-transform: uppercase;
    }
    
  h2 {
    margin-top: 0;
    }
    
  #wrapper {
    width: 90%;
    margin: 15px auto;
    }
    
  #banner {
    padding: 1px;
    }
    
  #navcol {
    width: 12em;
    float: left;
    font-size: .8em;
    }
    
  #navcol ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    }
    
  #navcol li {
    margin: 3px 0;
    border: 1px solid #868181;
    background-color: #ff6500;
    color: white;
    }
    
  #navcol li a {
    text-decoration: none;
    color: #fff;
    line-height: 2em;
    display inline-block; /*part 1 of IE hasLayout hack*/
    }
    
  #navcol li a {
    display: block; /*part 2 of hack, sets display to final value*/
    }
    
  #content {
    margin-left: 13em;
    }
    
  #content .postblock {
    overflow: hidden;
    margin: 1em 0;
    display: inline-block; /*IE hasLayout fix, part 1*/
    }
    
  #content .postblock {
    display: block; /*part 2 of the hack*/
    }
    
  #content .firstpost {
    width: 49.5%;
    float: left;
    }
    
  #content .secondpost {
    margin-left: 50.5%;
    }
    
  #content p img {
    float: left;
    margin-right: .5em;
    }


  /*]]>*/
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
      <h1>Site Logo</h1>
    </div>

    <div id="navcol">
      <ul>
        <li><a href="#">|||| Home |||</a></li>

        <li><a href="#">|||| Profiles |||</a></li>

        <li><a href="#">|||| Hot News |||</a></li>

        <li><a href="#">|||| Movies |||</a></li>

        <li><a href="#">|||| Soaps |||</a></li>

        <li><a href="#">|||| Fan Clubs |||</a></li>

        <li><a href="#">|||| Forums |||</a></li>

        <li><a href="#">|||| Downloads |||</a></li>

        <li><a href="#">|||| The Team |||</a></li>
      </ul>
    </div><!-- end navcol -->

    <div id="content">
      <div class="postblock">
        <div class="firstpost">
          <h2><img src="http://jez.sitesled.com/images/ad1_05.gif"
               alt="Latest News" /></h2>

          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
          elit. Aliquam adipiscing, velit ut lacinia porta, leo
          tortor facilisis libero, in volutpat ipsum velit at
          mauris. Donec porta. Donec felis metus, sollicitudin
          vitae, pulvinar a, semper eu, magna. Suspendisse sit amet
          sem.</p>
        </div><!-- end firstpost" -->

        <div class="secondpost">
          <h2><img src="http://jez.sitesled.com/images/ad1_07.gif"
               alt="Updates" /></h2>

          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
          elit. Aliquam adipiscing, velit ut lacinia porta, leo
          tortor facilisis libero, in volutpat ipsum velit at
          mauris. Donec porta. Donec felis metus, sollicitudin
          vitae, pulvinar a, semper eu, magna. Suspendisse sit amet
          sem. Fusce libero. Nam hendrerit, ipsum vitae elementum
          ultricies, ante justo luctus libero, commodo dapibus
          velit magna in tellus.</p>
        </div><!-- end secondpost" -->
      </div><!-- end postblock -->

      <div class="postblock">
        <div class="firstpost">
          <h2><img src="http://jez.sitesled.com/images/ad1_26.gif"
               alt="Movies" /></h2>

          <p><img src="http://jez.sitesled.com/images/ad1_37.gif"
               alt="" /> Lorem ipsum dolor sit amet, consectetuer
               adipiscing elit. Aliquam adipiscing, velit ut
               lacinia porta, leo tortor facilisis libero, in
               volutpat ipsum velit at mauris. Donec porta. Donec
               felis metus, sollicitudin vitae,</p>
        </div><!-- end firstpost" -->

        <div class="secondpost">
          <h2><img src="http://jez.sitesled.com/images/ad1_29.gif"
               alt="Soaps" /></h2>

          <p><img src="http://jez.sitesled.com/images/ad1_37.gif"
               alt="" /> Lorem ipsum dolor sit amet, consectetuer
               adipiscing elit. Aliquam adipiscing, velit ut
               lacinia porta, leo tortor facilisis libero, in
               volutpat ipsum velit at mauris. Donec porta. Donec
               felis metus, sollicitudin vitae, pulvinar a, semper
               eu, magna. Suspendisse sit amet sem. Fusce
               libero.</p>
        </div><!-- end secondpost" -->
      </div><!-- end postblock -->
    </div><!-- end wrapper -->
  </div>
</body>
</html>

Code (markup):

cheers,

gary