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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post

    Question Postioning via Window Coords

    I am trying to place a div into my document, which, when resized stays at the location relative to another element.

    I have an iframe, which I am trying to have the div overlap. Though, when I resize the window, the content moves, and the div doesn't.

    (This happens, resizing left to right, and not top to bottom.)

    <div style="width: 597px; height: 64px; position: absolute; top: 243px; left: 153px; background-color: blue;"></div>

    I'm wondering if there's something I'm doing incorrect.

    Thank you in advance,
    SyntaxError

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    I instead added a margin so that it was a fixed location, though, now I want to move it so that it's in the right spot, encountering errors from having it "position relative", as it is already in the correct "area", though needs to be moved from the top, but as this happens, it becomes a fixed location and stays, while content moves

    <div style="margin: 0 auto; width: 600px; height: 64px; background-color: #0000ff"></div>


    oh, wondering if my stylesheet might also have done something...

    body {color: #000000; background-color: #ffffff; margin: 0 auto; width: 650px}
    Last edited by SyntaxError; 10-27-2007 at 05:46 PM.

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    I was able to resolve this by adding "position: relative" to the body, though now my only concern is there's a gap of spacing from positioning the div. To make this less unattractive I added the divs to the bottom and had them work their way up instead of down, making the space at the bottom, but there a way to remove this spacing?

    I think it may have to do with the margin, though, I'm not entirely sure.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by SyntaxError View Post
    […] the content moves, and the div doesn't.

    I'm wondering if there's something I'm doing incorrect.
    Well, that’s the problem with positioning if you don’t know exactly what you’re doing. First thing: we need you to help us to help you because we can’t read your mind and/or know the code of your website if you don’t show it. Most likely you are not aware of the interaction of absolutely and relatively positioned elements. And I/we really can only tell you for sure what’s wrong and what to to if we see your entire code.

    Edit: Just saw you’ve kinda managed to do it. But do you know why adding position: relative; works? Probably not because then you would know how to remove that space.
    My first action when I create a new site is:
    Code:
    body {
      margin: 0;
      padding: 0;
      background-color: white;
      color: black;
    }
    Last edited by VIPStephan; 10-27-2007 at 07:03 PM.

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    Here is my css:
    Code:
    body {color: #000000; background-color: #ffffff; margin: 0 auto; width: 650px}
    
    .para {text-indent: 1cm}
    .taskbar {text-align: center}
    
    h1, h2, h3, h4, h5, h6 {color: #ff8327; font-family: sans-serif}
    
    a:link {color: #ff7c00; font-weight: bold; text-decoration: none}
    a:visited {color: #ff7c00; font-weight: bold; text-decoration: none}
    a:hover {color: #ff7c00; font-weight: bold; text-decoration: underline} 
    a:active {color: #ff7c00; font-weight: bold; text-decoration: none}
    as well as my html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
     <title>Anime Boston :: The Fansite :: Chat</title>
     <meta name="robots" content="noindex,nofollow" />
     <link rel="stylesheet" type="text/css" href="style.css" />
    <head>
    
    <body style="position; relative">
     <p class="taskbar">
      <img src="http://hometown.aol.com/DarkIceShadows/ab08uobanner.png" />
      <br>
      <a href="index.htm">Home</a> | 
      <a href="#">Chat</a> | 
      <a href="links.htm">Links</a> |
      <a href="contact.htm">Contact</a> |
      <a href="about.htm">About</a>
     </p>
    
     <p style="margin:0 auto; width: 600px">
    Please read the <a href="chatterms.htm" target="_blank">Chatroom Terms of Service</a>
    before continuing
    <br />
      <iframe src="page2.htm" framespacing='0' frameborder='no' scrolling='no' width='600' height='400'>
      </iframe>
     </p>
     <div style="background-color: black; color: yellow; position: relative; bottom: 398px; width: 600px; margin: 0px auto; height: 64px; background-color: 
    
    #0000ff"></div>
     <div style="background-color: black; color: yellow; position: relative; bottom: 137px; width: 600px; margin: 0px auto; height: 70px; background-color: 
    
    #ff8327"></div>
    </body>
    
    </html>
    The problem results in white space at the bottom of the page.
    Last edited by SyntaxError; 10-27-2007 at 10:29 PM.


  •  

    Posting Permissions

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