473,414 Members | 1,740 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,414 software developers and data experts.

positions are offset when resize the browser

I use CSS for positionings in my html page, the problem is when i
resize the browser, the positions are offset. Here's the code, any
ideas??

<html>
<head>

<style type="text/css">
H2
{
FONT: bold 17px Georgia
}
H2.SECOND {
COLOR: red;
position: absolute;
top: 80px;
left: 700px
}
H5 {
FONT: bold 12px Georgia;
position: absolute;
top: 105px;
left: 700px
}
</style>

</head>

<body>

<H2 class="SECOND">Frequently Used Links</H2>

<H5>
<a href="#">Link 1</a> |

<a href="#">Link 2</a> |

<a href="#">Link 3</a> |

<a href="#">Link 4</a> |

<a href="#">Link 5</a>
</H5>
</body>
</html>
Jul 20 '05 #1
2 2647

"Matt" <jr********@hotmail.com> wrote in message
news:ba**************************@posting.google.c om...
| I use CSS for positionings in my html page, the problem is when
i
| resize the browser, the positions are offset. Here's the code,
any
| ideas??
|
|
|
| <html>
| <head>
|
| <style type="text/css">
| H2
| {
| FONT: bold 17px Georgia
| }
| H2.SECOND {
| COLOR: red;
| position: absolute;
| top: 80px;
| left: 700px
| }
| H5 {
| FONT: bold 12px Georgia;
| position: absolute;
| top: 105px;
| left: 700px
| }
| </style>
|
| </head>
|
| <body>
|
| <H2 class="SECOND">Frequently Used Links</H2>
|
| <H5>
| <a href="#">Link 1</a> |
|
| <a href="#">Link 2</a> |
|
| <a href="#">Link 3</a> |
|
| <a href="#">Link 4</a> |
|
| <a href="#">Link 5</a>
| </H5>
| </body>
| </html>

What happens to your H2.SECOND and H5 with their absolute
position of left: 700px when a person views with a 640x460
resolution or resizes their browser window smaller than 700px??

I'm no expert, but without seeing the rest of the page I'd say to
float a small div to the right with these elements so they stay
in the window.

Also, just as a suggestion, your font size is in px which does
not allow the text to be resized in IE, I'd set these sizes in
percentages or em's.

hth
--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)
Jul 20 '05 #2
On 11 Feb 2004 15:38:00 -0800, Matt <jr********@hotmail.com> wrote:
I use CSS for positionings in my html page, the problem is when i
resize the browser, the positions are offset. Here's the code, any
ideas??
Are you using a doctype? Can't say for sure on this, but using the doctype
can spare you troubles along the way. See
http://www.w3.org/TR/html401/struct/...l#version-info
H2
{
FONT: bold 17px Georgia
}
Use ems and % for screen only. Pixels are problematic. Of course, if
you're placing items in the pixel-perfect way you are, the use of pixels
or points for font-size benefits your end - however, that end makes the
page unreadable to a number of users.

Additionally, I recommend ending the values for font-face with a generic
like serif or sans-serif. There are those who disagree, of course, so do
what you think is right on this one.
H2.SECOND {
COLOR: red;
position: absolute;
top: 80px;
left: 700px
}
Assumes user will have am 800px wide viewport, which is not a safe
assumption. Sounds like you want it near the right, why not position with
right instead?
H5 {
FONT: bold 12px Georgia;
position: absolute;
top: 105px;
left: 700px
}
Ditto and ditto.
<H2 class="SECOND">Frequently Used Links</H2>

<H5>
<a href="#">Link 1</a> |

<a href="#">Link 2</a> |

<a href="#">Link 3</a> |

<a href="#">Link 4</a> |

<a href="#">Link 5</a>
</H5>


h? should be reserved for actual headings, these aren't really headings. p
would be acceptable, but maybe even better to use a styled list.

As this is all really out of context, and I'm not sure what your desired
rendering is and is not, it would be great if you could provide a URL to a
test page.
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Matt | last post by:
I posted a question before regarding the offset positions when I used CSS. Some people suggested I should use percentage instead of pixels? I tried many different ways, but the position still...
0
by: Matt | last post by:
I am new to CSS. My task is to add a table and frequently used link on the right hand side. Here's the html code and css, I really appreciate if u can copy and paste and take a look. It looks fine...
0
by: Matt | last post by:
I posted this message before but no response. Now I repost it. I really hope when we resize the browser, the text Frequently Used Link and the links table 1 and table 2 will still line up with...
2
by: rams.kakara | last post by:
hi, My page have background image,on that image have more images and text. My problem is whenever resize browser that images are not resized and also not moved correct place .(i.e look not like...
4
by: Deniz Bahar | last post by:
Hello all, Often times programs in C have arrays used as buffers and shared among different sections of code. The need arises to have position indicators to point to different parts of an array...
69
by: RC | last post by:
I know how to do this in JavaScript by window.open("newFile.html", "newTarget", "scrollbars=no,resizable=0,width=200,height=200"); The browser will open a new window size 200x200, not allow...
5
by: deekay | last post by:
I want to allow users to resize and reposition columns of a datasheet but for a prompt to be brought up and only the layout only to be saved if they select "save changes". This is the way it works...
2
by: =?Utf-8?B?Sm9ubnk=?= | last post by:
I have an ASP.NET 2.0 C# web application that is contacting an Exchange server using WEBDAV. It allows the users to look up appointments for a future date. The problem I have is determining the...
5
by: Doug Gunnoe | last post by:
I'm considering resizing a div onload to better match the screen width of the user. Easy enough, however it seems that I have read in this group that there are potential problems with this,...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
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...
0
jinu1996
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...
0
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...
0
agi2029
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,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
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...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.