Page 1 of 1

Centering Entire Page, with iFrames

Posted: Thu Jun 29, 2006 1:52 pm
by nickman013
Hello,

I want to center my entire webpage, but I have iFrames so when people move the page, or extend it the iframes stay in the same spot, and the page moves. I built my website with photoshop and image ready, and then dreamweaver. I just want to center it out like http://www.myspace.com. They have iframes that if you extend the page, they move over too.

My code

Code: Select all

<html>
<head>
<title>.:.SICK-RAT.:.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (sickrat.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		sickrat_01_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_01-sickrat_entertai.gif");
		sickrat_02_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_02-sickrat_entertai.gif");
		sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_entertainment-fo-07.gif");
		sickrat_05_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_05-sickrat_entertai.gif");
		sickrat_news_over = newImage("images/sickrat_news-over.gif");
		sickrat_news_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_news-sickrat_entert.gif");
		sickrat_contact_over = newImage("images/sickrat_contact-over.gif");
		sickrat_contact_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_contact-sickrat_ent.gif");
		sickrat_links_over = newImage("images/sickrat_links-over.gif");
		sickrat_links_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_links-sickrat_enter.gif");
		sickrat_12_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_12-sickrat_entertai.gif");
		sickrat_muot_net_over = newImage("images/sickrat_muot.net-over.gif");
		sickrat_muot_net_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_muot.net-sickrat_en.gif");
		sickrat_20_sickrat_entertainment_for_the_rat_soci_over = newImage("images/sickrat_20-sickrat_entertai.gif");
		preloadFlag = true;
	}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<!-- ImageReady Slices (sickrat.psd) -->
<table id="Table_01" width="700" height="901" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="10">
			<img name="sickrat_01" src="images/sickrat_01.gif" width="700" height="83" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img name="sickrat_02" src="images/sickrat_02.gif" width="139" height="37" alt=""></td>
		<td colspan="4">
			<a href="#"
				onmouseover="changeImages('sickrat_01', 'images/sickrat_01-sickrat_entertai.gif', 'sickrat_02', 'images/sickrat_02-sickrat_entertai.gif', 'sickrat_entertainment_for_the_rat_soci', 'images/sickrat_entertainment-fo-07.gif', 'sickrat_05', 'images/sickrat_05-sickrat_entertai.gif', 'sickrat_news', 'images/sickrat_news-sickrat_entert.gif',
'sickrat_contact', 'images/sickrat_contact-sickrat_ent.gif', 'sickrat_links', 'images/sickrat_links-sickrat_enter.gif', 'sickrat_12', 'images/sickrat_12-sickrat_entertai.gif', 'sickrat_muot_net', 'images/sickrat_muot.net-sickrat_en.gif', 'sickrat_20', 'images/sickrat_20-sickrat_entertai.gif'); return true;"
				onmouseout="changeImages('sickrat_01', 'images/sickrat_01.gif', 'sickrat_02', 'images/sickrat_02.gif', 'sickrat_entertainment_for_the_rat_soci', 'images/sickrat_entertainment-for-t.gif', 'sickrat_05', 'images/sickrat_05.gif', 'sickrat_news', 'images/sickrat_news.gif', 'sickrat_contact', 'images/sickrat_contact.gif',
'sickrat_links', 'images/sickrat_links.gif', 'sickrat_12', 'images/sickrat_12.gif', 'sickrat_muot_net', 'images/sickrat_muot.net.gif', 'sickrat_20', 'images/sickrat_20.gif'); return true;"
				onmousedown="changeImages('sickrat_01', 'images/sickrat_01-sickrat_entertai.gif', 'sickrat_02', 'images/sickrat_02-sickrat_entertai.gif', 'sickrat_entertainment_for_the_rat_soci', 'images/sickrat_entertainment-fo-07.gif', 'sickrat_05', 'images/sickrat_05-sickrat_entertai.gif', 'sickrat_news', 'images/sickrat_news-sickrat_entert.gif',
'sickrat_contact', 'images/sickrat_contact-sickrat_ent.gif', 'sickrat_links', 'images/sickrat_links-sickrat_enter.gif', 'sickrat_12', 'images/sickrat_12-sickrat_entertai.gif', 'sickrat_muot_net', 'images/sickrat_muot.net-sickrat_en.gif', 'sickrat_20', 'images/sickrat_20-sickrat_entertai.gif'); return true;"
				onmouseup="changeImages('sickrat_01', 'images/sickrat_01-sickrat_entertai.gif', 'sickrat_02', 'images/sickrat_02-sickrat_entertai.gif', 'sickrat_entertainment_for_the_rat_soci', 'images/sickrat_entertainment-fo-07.gif', 'sickrat_05', 'images/sickrat_05-sickrat_entertai.gif', 'sickrat_news', 'images/sickrat_news-sickrat_entert.gif',
'sickrat_contact', 'images/sickrat_contact-sickrat_ent.gif', 'sickrat_links', 'images/sickrat_links-sickrat_enter.gif', 'sickrat_12', 'images/sickrat_12-sickrat_entertai.gif', 'sickrat_muot_net', 'images/sickrat_muot.net-sickrat_en.gif', 'sickrat_20', 'images/sickrat_20-sickrat_entertai.gif'); return true;">
				<img name="sickrat_entertainment_for_the_rat_soci" src="images/sickrat_entertainment-for-t.gif" width="428" height="17" border="0" alt=""></a></td>
		<td colspan="2" rowspan="4">
			<img src="images/sickrat_04.gif" width="133" height="433" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img name="sickrat_05" src="images/sickrat_05.gif" width="428" height="20" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/sickrat_06.gif" width="44" height="780" alt=""></td>
		<td>
			<a href="news.php" target="bottomframe"
				onmouseover="changeImages('sickrat_news', 'images/sickrat_news-over.gif'); return true;"
				onmouseout="changeImages('sickrat_news', 'images/sickrat_news.gif'); return true;"
				onmousedown="changeImages('sickrat_news', 'images/sickrat_news-over.gif'); return true;"
				onmouseup="changeImages('sickrat_news', 'images/sickrat_news-over.gif'); return true;">
				<img name="sickrat_news" src="images/sickrat_news.gif" width="65" height="16" border="0" alt=""></a></td>
		<td rowspan="4">
			<img src="images/sickrat_08.gif" width="20" height="780" alt=""></td>
		<td colspan="2">
			<a href="contact.php" target="bottomframe"
				onmouseover="changeImages('sickrat_contact', 'images/sickrat_contact-over.gif'); return true;"
				onmouseout="changeImages('sickrat_contact', 'images/sickrat_contact.gif'); return true;"
				onmousedown="changeImages('sickrat_contact', 'images/sickrat_contact-over.gif'); return true;"
				onmouseup="changeImages('sickrat_contact', 'images/sickrat_contact-over.gif'); return true;">
				<img name="sickrat_contact" src="images/sickrat_contact.gif" width="100" height="16" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/sickrat_10.gif" width="17" height="396" alt=""></td>
		<td>
			<a href="links.php" target="bottomframe"
				onmouseover="changeImages('sickrat_links', 'images/sickrat_links-over.gif'); return true;"
				onmouseout="changeImages('sickrat_links', 'images/sickrat_links.gif'); return true;"
				onmousedown="changeImages('sickrat_links', 'images/sickrat_links-over.gif'); return true;"
				onmouseup="changeImages('sickrat_links', 'images/sickrat_links-over.gif'); return true;">
				<img name="sickrat_links" src="images/sickrat_links.gif" width="67" height="16" border="0" alt=""></a></td>
		<td rowspan="2">
			<img name="sickrat_12" src="images/sickrat_12.gif" width="254" height="396" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/sickrat_13.gif" width="65" height="764" alt=""></td>
		<td rowspan="3">
			<img src="images/sickrat_14.gif" width="10" height="764" alt=""></td>
		<td>
			<img src="images/sickrat_15.gif" width="90" height="380" alt=""></td>
		<td>
			<img src="images/sickrat_16.gif" width="67" height="380" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="images/sickrat_17.gif" width="174" height="384" alt=""></td>
		<td colspan="2">
			<a href="http://www.muot.net" target="_blank"
				onmouseover="changeImages('sickrat_muot_net', 'images/sickrat_muot.net-over.gif'); return true;"
				onmouseout="changeImages('sickrat_muot_net', 'images/sickrat_muot.net.gif'); return true;"
				onmousedown="changeImages('sickrat_muot_net', 'images/sickrat_muot.net-over.gif'); return true;"
				onmouseup="changeImages('sickrat_muot_net', 'images/sickrat_muot.net-over.gif'); return true;">
				<img name="sickrat_muot_net" src="images/sickrat_muot.net.gif" width="333" height="102" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/sickrat_19.gif" width="54" height="384" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img name="sickrat_20" src="images/sickrat_20.gif" width="333" height="282" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="44" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="65" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="90" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="67" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="254" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="79" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="54" height="1" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
<div id="videoframeDIV" style="position:absolute;width:316px;top:199px;height:263px;left:315px">
  <iframe src="pickvideo.php" name="videoframe" width="325" height="260" align="center" scrolling="no" frameborder="0" allowtransparency="true" background-color="transparent"></iframe>
</div>
<div id="bottomframeDIV" style="position:absolute;width:563px;top:693px;height:173px;left:69px">
  <iframe src="blank" name="bottomframe" width="559" height="170" align="center" scrolling="auto" frameborder="0" allowtransparency="true" background-color="transparent"></iframe>
</div>
<div id="listframeDIV" style="position:absolute;width:203px;top:196px;height:191px;left:55px">
  <iframe src="http://www.sickrat.com/videolist.php" name="listframe" width="200" height="400" align="center" scrolling="auto" frameborder="0" allowtransparency="true" background-color="transparent"></iframe>
</div>
</body>
</html>

Posted: Sat Jul 01, 2006 4:10 am
by nickman013
anyone understand what i mean?..

i dont know if this is possible.. but i have to do it this way because the site is made up of images.. i have the iframe in a div.. i just need it to stay in its place even if the page is resized or somthing.

thanks!

Posted: Sat Jul 01, 2006 4:24 am
by Benjamin
One method to center content...

Code: Select all

<style type="text/css">
body {
  text-align: center;
}
</style>

<div style="margin: 0px auto 0px auto; width: 768px; text-align: left;">
<!-- all your code here -->
</div>

Posted: Sat Jul 01, 2006 2:48 pm
by nickman013
my website is made up of images.. i need the frame over the images, using a div i did it but the iframe doesnt move with the page if it is extended.

Posted: Thu Jul 06, 2006 1:34 am
by nickman013
anyone, please help me ive researched all over lol
thanks