Solved

Screen Resolution Compatiblity Issue

Posted on 2006-11-11
7
128 Views
Last Modified: 2010-04-09
My site (www.pindaal.com) is depended on style sheet template/theme and it is viewed best in 1024x768  resolution. When it is opened in 800x600 settings right side bar is not viewed. Kindly opne it in both resolution.

Now I want to ask that in which place I hav to edit, i.e. do I edit style sheet file or what? I want that my site is best viewed in both resolution or atleast in 800x600.

0
Comment
Question by:A1opus
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
7 Comments
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 200 total points
ID: 17922725
This is ultimately controlled by the stylesheet, yes.  Glancing at it briefly I see quite a few fixed widths given to elements (in px, even -- most of those should at least be given in em).  To fit in an 800x600 window the widths of elements across the screen will naturally have to sum to less than 800.

Alternatively you could remove the absolute widths and either use percentages (so a certain element is a percentage of the total available width) or give widths to only some elements so that others can be sized by the browser.
0
 
LVL 2

Author Comment

by:A1opus
ID: 17923099
I am pasting the following some tags of my sheet, kindly tell me that which shud be changed:


#environment
            {
            margin: 0 auto;
            min-width: 800px;
            width: 100%;
            }

#masthead
            { /* masthead position */
            border-top: 30px solid #ccc;
            margin: 0;
            padding: 25px 0 5px 0;
            width: 100%;
            }

#header
            {
            border-bottom: 1px solid #ccc;
            padding: 0 0 10px 0;
            }

#middlewrap
            {
            float: left;
            margin: 0 401px 0 0;
            min-width: 468px;
            }

#blogposts
            {/* positioning the blogposts (left) column */
            float: left;
            padding: 0 0 25px 0;
width: 100%;
            }

#sidebars
            {
            float:right;
            margin:0 0 0 -401px;
            width: 400px;
            }

#sidebar1
            {/* left sidebar position */
            float: left;
            padding: 15px 20px 15px 30px;
            width: 160px;
            }

#sidebar2
            {/* right sidebar position */
            float: right;
            padding: 15px 0;
            width: 180px;
            }


#footer
            { /* footer information */
            background-color: #cc9;
            clear: both;
            width: 100%;
            }

#masthead, #sidebars, #footer
            { /* clear every floats */
            overflow:hidden;
            _height:1%;                  /* MSIE specific */
             _overflow:none;            /* MSIE specific */
            }
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17923128
Well that's really up to you.  I'd suggest playing with any of the values that look like...

width: 400px;


... until you've got something you like.

If you're using Firefox you may find it helpful to have the WebDev toolbar installed, as it has a feature to easily edit stylesheets while looking at the page.


I can't tell you what design you'll think looks good.  (-:
0
 
LVL 2

Author Comment

by:A1opus
ID: 17923163
i want that the width of my site should be contained in 800px, so kindly tell which tag shud be edited. If you see my website in 800x600 resolution, u will notice that right sidebar is not contained in the screen.
0
 
LVL 11

Assisted Solution

by:ethoths
ethoths earned 200 total points
ID: 17956209
If you're using ccs layout then you'll need a div immediately inside the body tag that contains all of your content...

<body>
  <div id="layout">
    Content here
  </div>
</body>


Then create a new style rule..

#layout
{
  width:771px;
}


If your're using tables to layouyt the site then replace the <div mentioned above with>

<body>
  <table cellpadding="0" cellspacing="0" border="0" width="771" height="100%">
    <tr>
        <td valign="top">
            Content goes here...
        </td>
    </tr>
  </table>
<body>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Obtaining data on ASP 8 35
links not working 2 25
Session on Html 8 38
HTML editor custom button 3 55
This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

761 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question