By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

CSS positioning problem

P: 1
Hi,

I am using CSS to position objects (<SPAN> and <DIV> tags) on my webpage,
which is working great on regular computer monitors, when I view the same page on
a wide screen laptop monitor, one of my objects (<span id="logo">) changes
position and is placed about 5 pixels below where it suppose to be.
If I adjust the position to compensate for these five pixels,
then the object is correctly positioned on the widescreen monitor but is five pixels off on the regular monitors.
When I only use HTML TABLES with no CSS positioning, I do not grt this problem.

Below are the CSS and the HTML code.

Thank you for your help.

Expand|Select|Wrap|Line Numbers
  1. <htm>
  2.   <body>
  3.     <div id="container">
  4.       <div style="width: 1100px;">
  5.         <span id="google">
  6.           <FORM method="GET" action="http://www.google.com/search">
  7.             <input type="hidden" name="ie" value="UTF-8">
  8.             <input type="hidden" name="oe" value="UTF-8">
  9.             <A HREF="http://www.google.com">
  10.               <IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" width="80" height="20">
  11.             </A>
  12.             <INPUT TYPE="text" name="q" size="25" maxlength="255" value="">
  13.             <INPUT type="submit" name="btnG" value="Search">
  14.             <font size=-1>
  15.               <input type="hidden" name="domains" value="www.xxx.com"><br><br>
  16.               <input type="radio" name="sitesearch" value=""> Web 
  17.               <input type="radio" name="sitesearch" value="www.xxx.com" checked>xxx<br>
  18.             </font>            
  19.           </FORM>
  20.         </span>
  21.         <span id="logo2_top">
  22.           <em>XXX</em>
  23.         </span>
  24.         <span id="logo">
  25.           XXXX
  26.           &nbsp;
  27.         </span>
  28.       </div>      
  29.     </div>
  30.   </body>
  31. </html>
  32.  
  33.  
  34. //======================================
  35. // CSS
  36. //======================================
  37. BODY
  38.   color: black;
  39.   font-family: Verdana, Arial, Helvetica, sans-serif;
  40.   background-image: url('../images/background5.jpg');
  41. }
  42. #container
  43.   margin-left: auto;
  44.   margin-right: auto;
  45.   text-align: center;
  46.   top:0px; 
  47.   left:0px;
  48.   width: 100%;
  49. }
  50.  
  51. #google
  52. {
  53.   width: 375px; 
  54.   height: 80px; 
  55.   text-align: left;
  56.   background-image: url('../images/background.jpg');
  57.   position: relative; 
  58.   top:-4px; 
  59.   left:0px;      
  60. }
  61.  
  62. #logo2_top
  63. {
  64.  text-align: center;
  65.  width: 215px; 
  66.  height: 80px; 
  67.  background-image: url('../images/background.jpg');
  68.  position: relative; 
  69.  top:-4px; 
  70.  left:0px; 
  71.  vertical-align: top; 
  72.  font-family: script; 
  73.  font-weight: bolder; 
  74.  font-size: 30px; 
  75.  color:#660000;  
  76. }
  77.  
  78. #logo
  79. {
  80.   width: 375px; 
  81.   height: 80px; 
  82.   text-align: right;
  83.   background-image: url('../images/background.jpg');
  84.   position: relative; 
  85.   top:-50px; 
  86.   left:0px;
  87. }
Feb 27 '08 #1
Share this Question
Share on Google+
1 Reply


just a feeling
P: 87
Hi,
There are a number of options:

1- Make a fixed width design. Set the CSS width of your body tag to the width you want in pixels (so for 800x600, width: 780px) and set the CSS margins to auto, as this will put your fixed-width page in the centre of larger screens. This is the most popular solution to the resolution problem (just design as if everyone was using 800x600 ).

2- Use javascript detection.
Expand|Select|Wrap|Line Numbers
  1. var mini = 1024;
  2. var big = 1280;
  3.  
  4. if (window.screen.availWidth == mini) {
  5.  
  6. document.write('<link rel="stylesheet" type="text/css" href="1024.css" />'); 
  7.  
  8. }
  9. else    {
  10.  
  11. document.write('<link rel="stylesheet" type="text/css" href="1280.css" />');
  12. }
3- Use 'elastic' design. If your design has three columns, for example, make the left and right columns fixed-width and leave the middle column to take up all the remaining width.

4- Use percentage. Change the widths on all of the block level elements to %.

5- Rely on the majority of visitors having a suitable resolution and leave the 1024x768 "warning" in place.

I'd favour 1, but it's up to you.
HTH,
Feb 27 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.