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>
