...
PDA

Misaligned Div - Please Help!

TheHaloEffect
10-02-2006, 12:20 PM
Hey!!

The design for my site is just using one image, with image mapping over the top for the links, then for the content, i'm using iframes to display the pages.

A problem i have is, with different resolution, or if you make your web browser smaller, the text/iframe gets misaligned. I'm not actually sure where i'm going wrong, i asked my web development tutor but he just drew me a diagram, which was completely useless.
Below is the actual index page, everything is ran off that.
Is there anything i can do to make the div or the iframe stay aligned regardless the resolution and/or browser size?

My site's temporary URL, to help you understand what i'm on about is: http://random.the3rdhero.com/

The index file is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>The Randomizer</title>

<style type="text/css">

<!--

body {

background-color: #cccccc;

}

-->

</style>

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

</head>

<body>

<div align="center"><img name="bg" src="layout.jpg" width="716" height="515" border="0" usemap="#bg" />

<map name="bg">

<area shape="rect" coords="492,132,618,152" href="mailto: the3rdhero@msn.com" target="center" alt="Contact Us" />

<area shape="rect" coords="358,131,484,152" href="forum.html" target="center" alt="Forums" />

<area shape="rect" coords="226,130,353,151" href="gen.html" target="center" alt="Random Generators" />

<area shape="rect" coords="94,129,220,150" href="home.html" target="center" alt="Home" />

</map>

<div style="position: absolute; overflow: visible; top:171px; left:86px; width: 809px; height: 340px;">

<iframe src="home.html" name="center" width="630" height="340" scrolling="no" frameborder="0" allowtransparency="true"></iframe></div>

</div>

</body>

</html>
TheHaloEffect
10-03-2006, 01:03 PM
bump


Please
Arbitrator
10-03-2006, 03:04 PM
Use a valid DTD; “XHTML 1.1 Transitional” does not exist. While XHTML 1.1 (without the appended “Strict”/“Transitional”/“Frameset”) is a valid DTD, unless you understand the significance and use of application/xhtml+xml, you shouldn't be using XHTML 1.1; stick with one of the HTML 4.01 or XHTML 1.0 DTDs. A list of document type declarations can be found at the W3C's website (http://www.w3.org/QA/2002/04/valid-dtd-list.html).
Once you have a valid DTD, make sure that it doesn't trigger quirks mode (http://hsivonen.iki.fi/doctype/) and then validate your code against it (http://validator.w3.org/). Validation should catch most of the remaining errors in your code.
Don't comment out your CSS with comment tags (<!-- -->) in XHTML. If your page were to be displayed as real XHTML, your CSS would actually be commented out and meaningless.
Don't use inline CSS.
If you want to center a block-level element, use a margin: 0 auto declaration, not absolute positioning. Note that to make that work in Internet Explorer, IE must not be in quirks mode.
Remove the space in mailto: the3rdhero@msn.com. Consider mailto: to be a URI scheme like http:. Would you type http://random.the3rdhero.com/ with a space?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum