Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts

    cant get div in right place...

    here is the css

    Code:
    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:
    Code:
    <!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 :-/

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You really need to read up on some CSS tutorials as some of the CSS you had was invalid.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thank you.

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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its not going to because is ALWAYS going to be 40px from the left and 15px from the bottom.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    so if I change the position from absolute to something else that wont happen?

  • #8
    Regular Coder
    Join Date
    Apr 2006
    Posts
    111
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Look I really dont get what to do can someone please help me

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    There is nothing you can do. Its going to move with the browser window.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •