...

View Full Version : Postioning via Window Coords



SyntaxError
10-27-2007, 05:01 PM
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

SyntaxError
10-27-2007, 06:41 PM
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}

SyntaxError
10-27-2007, 07:59 PM
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.

VIPStephan
10-27-2007, 08:00 PM
[Ö] 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.

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:


body {
margin: 0;
padding: 0;
background-color: white;
color: black;
}

SyntaxError
10-27-2007, 08:31 PM
Here is my css:


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:

<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum