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

offset positions using CSS when resize browser

P: n/a
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 offset when I
resize the browser. Here's the modified code. I just don't want the
link and frequently used link text are mixed when i resize the
browser. Any workarounds to this problem? Please help!!
<html>
<head>

<style type="text/css">
H2
{
FONT: bold 17px Georgia
}
H2.SECOND
{
COLOR: red;
position: absolute;
top: 10%;
left: 70%
}
P
{
FONT: bold 12px Georgia;
position: absolute;
top: 15%;
left: 70%
}
</style>

</head>

<body>

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

<P>
<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>
</P>
</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 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 offset when
I
| resize the browser. Here's the modified code. I just don't want
the
| link and frequently used link text are mixed when i resize the
| browser. Any workarounds to this problem? Please help!!
|
|
| <html>
| <head>
|
| <style type="text/css">
| H2
| {
| FONT: bold 17px Georgia
| }
| H2.SECOND
| {
| COLOR: red;
| position: absolute;
| top: 10%;
| left: 70%
| }
| P
| {
| FONT: bold 12px Georgia;
| position: absolute;
| top: 15%;
| left: 70%
| }
| </style>
|
| </head>
|
| <body>
|
| <H2 class="SECOND">Frequently Used Links</H2>
|
| <P>
| <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>
| </P>
| </body>
| </html>

Matt,

When I viewed your markup above at 800x600 the links wrapped, at
640x480 the text and links really bunched up. Take a look here

http://webpages.charter.net/rwtest/s...tt_640x480.gif
http://webpages.charter.net/rwtest/s...tt_800x600.gif
(sorry if the links wrapped)

I'm not sure what you have in mind for the rest of the page but I
marked up a small sample here with some filler text. I placed the
Frequently Used Links text and the links in a small div floated
to the right within another div. I'm not sure about the top
margin you wanted, I decreased it to 10% but it's still a ways
down. Take a look here

http://webpages.charter.net/rwtest/stuff/matt.htm

hth
--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)
Jul 20 '05 #2

P: n/a
On 12 Feb 2004 17:10:03 -0800, Matt <jr********@hotmail.com> wrote:
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 offset when I
resize the browser. Here's the modified code. I just don't want the
link and frequently used link text are mixed when i resize the
browser. Any workarounds to this problem? Please help!!


Your problem is that you're expecting sizes to scale when they don't. With
the title at 10% down and the links at 15%, if the title is more than 5%
of the height of the viewport of COURSE you're going to get them to cross.

If you want to keep them from crossing, absolute positioning is NOT your
tool here.

One common way to solve this problem is to take all the elements which
need to be arranged respective of themselves and put them in a div.

<div id="linkbox">
<!-- If you want to use this more than once on a page, use class instead
of id. -->
<p>blah blah here's yer text</p>
<p>another line of text that goes with the above</p>
<p>ok, one more</p>
</div>

Now style the id (if you use a class, use .linkbox instead.)

#linkbox {
move this where you want it
}

Whatever you do with this div, the contents will remain associated with
each other.

That said, I'd do something like this instead...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">

h2 {
font: bold 1.2em Georgia, serif;
}

/* note font size is in ems */

#linkbox {
position: absolute;
top: 10%;
right: 1em;
}

/* positioned to the right, where you wanted it, 1 em away from right
margin */

h2.second {
color: red;
}

/* And finally I make the links a list, it looks nicer in a no-css page,
check this out... */

ul {
padding: 0;
margin: 0;
}

li {
margin: 0;
font: bold 1em Georgia, serif;
display: inline;
border-left: 1px black solid;
padding-left: 0.2em;
}

#first {
border: 0;
padding: 0;
}

</style>

</head>

<body>
<div id="linkbox">
<h2 class="second">Frequently Used Links</h2>

<ul>
<li id="first"><a href="#">Link 1</a></li>

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

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

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

<li><a href="#">Link 5</a></li>
</ul>

</div>

</body>
</html>
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.