cant get div in right place...

SKY-ProToSs

09-21-2006, 04:55 AM

here is the css

html, body{
margin:0;
padding:0;
border:0;
background-color:#8ad2d2;
width;100%;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #2130BD;
font-weight:normal;
background-image: url(trigunbg.gif); }
a, a:link, a:visited, a:active {
color:#000;
background-color:inherit;
text-decoration:none;
}
a:hover {
color:#df0000;
background-color:inherit;
}
#container {
width:100%;
height:100%;
min-height:100%;
margin:0;
background:#000 url(trigunbg.gif) repeat-y;
background-position: left;
color:#df0000;
padding-right:0;
padding:0;
border-right:0px solid #000;
}
#container3 {
height:400px;
width:200px;
vertical-align: bottom;
align: left;
padding-right:20px;
background:#6c6c6c;
}

Heres the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Anime Website : Home</title>

<link rel="stylesheet" type="text/css" href="/style.css">

</head>
<body>
<div id="container">
<div id="container3">
</div>
</div>
<script type="text/javascript" src="/i.js"></script></body>
</html>

heres the link

http://www.legabyspoodles.twilightcity.net

Im trying to get the grey box right under the little banner that looks like a box with rounded corners. I am trying to get it about 40 pix from the left side and about 15 pix from the bottom. Can anyone help me? I cant figure out how :-/

_Aerospace_Eng_

09-21-2006, 05:06 AM

You really need to read up on some CSS tutorials as some of the CSS you had was invalid.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Anime Website : Home</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
border:0;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #2130BD;
background:#8AD2D2 url(trigunbg.gif);
}
a, a:link, a:visited, a:active {
color:#000;
background-color:inherit;
text-decoration:none;
}
a:hover {
color:#df0000;
background-color:inherit;
}
#container {
width:100%;
min-height:100%;
margin:0;
background:#000 url(trigunbg.gif) repeat-y;
color:#df0000;
position:relative;
}
* html #container {
height:100%;
}
#box {
height:400px;
width:200px;
padding-right:20px;
background:#6c6c6c;
position:absolute;
left:40px;
bottom:15px;
}
</style>
</head>
<body>
<div id="container">
<div id="box"> </div>
</div>
</body>
</html>

SKY-ProToSs

09-21-2006, 05:44 AM

When I make the explorer window smaller the box moves and when I add content the box gets bigger going up.. How do I fix this?

_Aerospace_Eng_

09-21-2006, 05:46 AM

So you don't want the box to move? You want it to stay in place as the user scrolls the content? You didn't say this in the beginning. It helps to explain yourself fully in your first post. It saves you and people help you time. You said you wanted the box 40px from the left and 15px from the bottom and it will be at all times. It should resize, it should actually have content spilling out of it. If you add overflow:auto; it will get a scrollbar so you can scroll the content in that box.

SKY-ProToSs

09-21-2006, 05:53 AM

Thank you.

But how do I get the box to stay in place even when the window is made smaller?

_Aerospace_Eng_

09-21-2006, 05:58 AM

Its not going to because is ALWAYS going to be 40px from the left and 15px from the bottom.

SKY-ProToSs

09-21-2006, 06:14 AM

so if I change the position from absolute to something else that wont happen?

SKY-ProToSs

09-21-2006, 06:19 AM

Look I really dont get what to do can someone please help me

_Aerospace_Eng_

09-21-2006, 06:43 AM

There is nothing you can do. Its going to move with the browser window.