absolute positioning on my div... [Archive]

tanuki

01-03-2008, 09:30 PM

OK my website is here (http://www.fuzziepaws.com). just so you know I'm not very good at coding and stuff. Anyways I made a div (the scrolling box thing) and that's where all my text is. And i used the absolute positioning thing too so i could put it anywhere i wanted on the page. So i positioned it so that it would go where the blue box thing is on my pig layout.

<div style="overflow: auto; position: absolute; left: 290px; top: 420px; height:148px; width: 260px; border: none;">

Text here

</div>

but when you resize the page, the whole box moves around so it's not where i wanted it to be anymore..

On this website (http://www.wishable.net) I think she used the absolute position thing too. but when you resize the page it stays where it is.

im really confused, if anyone could help... it would be great

coothead

01-04-2008, 05:16 PM

Hi there tanuki,

try it like this...

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="/favicon.ico">

<style type="text/css">
html,body {
scrollbar-arrow-color:#7e5949;
scrollbar-track-color:#a4d4e8;
scrollbar-face-color:#a4d4e8;
scrollbar-highlight-color:#a4d4e8;
scrollbar-3dlight-color:#a4d4e8;
scrollbar-darkshadow-color:#a4d4e8;
scrollbar-shadow-color:#a4d4e8;
}
body {
background-image:url(http://www.fuzziepaws.com/images/polkadot2.jpg);
letter-spacing:2px;
text-align:justify;
font-family: tahoma,sans-serif;
font-size:12px;
line-height:10px;
}
#container {
position:relative;
width:963px;
margin:40px auto;
}
#container img {
border:0 solid;
}
#box {
position:absolute;
top:380px;
left:280px;
width:250px;
height:148px;
padding:5px;
overflow:auto;
}
</style>

</head>
<body>

<div id="container">

<img src="http://www.fuzziepaws.com/images/piggielayout.gif" usemap="#nav" alt="">
<map name="nav" id="nav">
<area shape="rect" coords="143,418,171,578" href="you.htm" alt="you">
<area shape="rect" coords="173,447,199,578" href="me.htm" alt="me">
<area shape="rect" coords="203,463,235,578" href="site.htm" alt="site">
<area shape="rect" coords="234,536,278,577" href="index.htm" alt="home">
</map>

<div id="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</div>

</div>

</body>
</html>

coothead