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. - <htm>
-
<body>
-
<div id="container">
-
<div style="width: 1100px;">
-
<span id="google">
-
<FORM method="GET" action="http://www.google.com/search">
-
<input type="hidden" name="ie" value="UTF-8">
-
<input type="hidden" name="oe" value="UTF-8">
-
<A HREF="http://www.google.com">
-
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" width="80" height="20">
-
</A>
-
<INPUT TYPE="text" name="q" size="25" maxlength="255" value="">
-
<INPUT type="submit" name="btnG" value="Search">
-
<font size=-1>
-
<input type="hidden" name="domains" value="www.xxx.com"><br><br>
-
<input type="radio" name="sitesearch" value=""> Web
-
<input type="radio" name="sitesearch" value="www.xxx.com" checked>xxx<br>
-
</font>
-
</FORM>
-
</span>
-
<span id="logo2_top">
-
<em>XXX</em>
-
</span>
-
<span id="logo">
-
XXXX
-
-
</span>
-
</div>
-
</div>
-
</body>
-
</html>
-
-
-
//======================================
-
// CSS
-
//======================================
-
BODY
-
{
-
color: black;
-
font-family: Verdana, Arial, Helvetica, sans-serif;
-
background-image: url('../images/background5.jpg');
-
}
-
#container
-
{
-
margin-left: auto;
-
margin-right: auto;
-
text-align: center;
-
top:0px;
-
left:0px;
-
width: 100%;
-
}
-
-
#google
-
{
-
width: 375px;
-
height: 80px;
-
text-align: left;
-
background-image: url('../images/background.jpg');
-
position: relative;
-
top:-4px;
-
left:0px;
-
}
-
-
#logo2_top
-
{
-
text-align: center;
-
width: 215px;
-
height: 80px;
-
background-image: url('../images/background.jpg');
-
position: relative;
-
top:-4px;
-
left:0px;
-
vertical-align: top;
-
font-family: script;
-
font-weight: bolder;
-
font-size: 30px;
-
color:#660000;
-
}
-
-
#logo
-
{
-
width: 375px;
-
height: 80px;
-
text-align: right;
-
background-image: url('../images/background.jpg');
-
position: relative;
-
top:-50px;
-
left:0px;
-
}
1  1270  
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. - var mini = 1024;
-
var big = 1280;
-
-
if (window.screen.availWidth == mini) {
-
-
document.write('<link rel="stylesheet" type="text/css" href="1024.css" />');
-
-
}
-
else {
-
-
document.write('<link rel="stylesheet" type="text/css" href="1280.css" />');
-
}
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,
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Tom Szabo |
last post by:
Hi,
Just wondering if there are any disadvantage in absolute positioning
controls on a page?
In example instead of putting the text fields into a table to align
properly, one would absolute position them.
I understand the issue with resize, that is not a problem.
|
by: Bryan R. Meyer |
last post by:
Hello Everyone,
The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. However, there are images that I
used absolute positioning in order to place them in the appropriate
location on my page. When I do a browser resize, these images do not
move (obviously). However, the rest of my content is auto centered as...
|
by: Jane Withnolastname |
last post by:
I am trying to re-work an old site by replacing the html with css.
On the main page, I have a logo image which I needed centred on the
initial screen. I found the solution here:
http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example)
The problem is, under the image is a large table. But using the above
positioning, now the table starts at the top of the page and runs
underneath the image.
|
by: Harlan Messinger |
last post by:
What am I not understanding about the definition of { position: absolute; }?
"The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify offsets
with respect to the box's containing block."
Please take a look at http://gavelcade.com/abspos.html and help me
understand why my nested, absolutely positioned divs are being positioned
with respect to the page rather...
|
by: rajek |
last post by:
I posted a similar question yesterday, but didn't get an answer that
resolved the issue. (Thanks to those who tried though.)
The background: I've read in books and online that if you have one
element with "relative" positioning, such as a <div>, it creates a
"positioning context" for element within it. E.g., if you have a <p>
inside your <div> you can give it absolute positioning and position it
(right, left, top, bottom) in terms of the...
| | |
by: Frances Del Rio |
last post by:
I have a pg with lots of divs, one of them is a gray bar about 150px
down from the top and 20px from the left... this bar (an image) is
767px wide and 1px high.. however, even though all divs are positioned
consistently in IE and Netscape, in Netscape (7.1) the bar div ONLY is
about 10px ABOVE where it should be.. code:
HTML:
<div id="bar">
<img src="images/bar.gif" width="768" height="1" border="0">
</div>
|
by: NS |
last post by:
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
|
by: TheCeej |
last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things...
|
by: nino9stars |
last post by:
Hello,
I have just started messing with absolute positioning on webpages, and
it definitely let's you do some creative things. Well, after much
searching and help, I got the images I was using to overlap correctly.
You can see it on this page:
www.creativekaysjewelry.com
The images overlap exactly how I wanted and in the right position
|
by: TheCruelPanda |
last post by:
Hey there.
My name is Rowan, and it's been three weeks since I last used tables
for an HTML design.
Okay, I'm rather new to CSS and I have a big positioning problem here.
It might not be a really huge problem, but I've been fighting it for
days, and have received no help so far. Have a look at this (try it
out in IE and Firefox please) http://www.discoverourmusic.com/rowan/css/home.html
- The problem's with the fairy at the top. On...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
| | |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
