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

positions are offset when resize the browser

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a

"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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.