PDA

View Full Version : DIV's move around the page when browser is resized


katrinkamille
29 Jan 2010, 04:37 PM
Hey guys! I'm new at this whole web design thing.. but I'm trying to work on this website but the DIV i made with text in it moves around anytime i resize the window. Help?

here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>KILL THE DESIGN</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

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

<style type="text/css">
/*<![CDATA[*/
body

#one
{

position:absolute;
top:90px;
right:205px;




}
object
{
width:460px;
height:540px;
border:solid 0px #000000;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}

//]]>
</script>




</head>
<body>

<div id="one">
<object id="foo" name="foo" type="text/html" data="home.html"></object>
</div>
<div>

</div>



<div id="container">
<div id="banner"></div>


<div id="sidebar">


<a href="home.html" class="nav" onclick="updateObjectIframe(this); return false;">Home</a>
<a href="about.html" class="nav" onclick="updateObjectIframe(this); return false;">About</a>
<a href="gallery.html" class="nav" onclick="updateObjectIframe(this); return false;">Gallery</a>


</div>

<div id="sidebar2">


<a href="contact.html" class="nav" onclick="updateObjectIframe(this); return false;">Contact Us</a>
<a href="links.html" class="nav" onclick="updateObjectIframe(this); return false;">Links</a>
<a href="order.html" class="nav" onclick="updateObjectIframe(this); return false;">Order</a>




</div>




<div id="copyright">
<br />
© Kill The Design 2009
<br />
<a href="#">Credit</a>

<br /><br />
</div>

</div>

</body>
</html>
dmcleary
01 Feb 2010, 07:26 AM
Hi katrinkamille,

Welcome to the world of web design ... and you've run straight into the problem that most new people meet!

Publishing to web browsers is quite simply not the same as publishing to paper. Browser types, sizes, resolutions and local stylesheets make the designers attempts to make the page display "how they want" a really hard task. Therefore, understanding and getting the flow of the elements within a page correct is the first tutorial.

To be honest I think you need to start with a much simpler example that the one above. Try generating the code yourself rather than borrowing other peoples; it will ensure you understand it more fully.

http://www.w3schools.com is a great place to start.

As far as I can tell from your coding above the absolute positioned element is anchored to the right of the browser window (right: 205px) so I would expect it to move with the browser frame.

Try working on the element flow and steering clear (for now, if not for ever!) the idea of absolute positioned elements.

I hope that helps; it is a steep learning curve at first but trust me it soon starts to flatten out.

Good luck.

Regards,


David