PDA

View Full Version : centering page


Corey
01-17-2006, 01:06 AM
ok, ive made a page in dreamweaver with tables and iFrames, and now i want to center it all. ive searched google, and asked the people at macromedia forums, but nothing has worked. ive tried centering using css and html, but most of the time, only my tables center, and the iFrames don't. i'll put the html to my page below so you can see what i need to do.
p.s. - there is a <style> code in there that is blank, its because ive been trying css in it all day, so its blank right now, but i know im going to need it, so its there.

thanks for your help.

<html>
<head>
<title>Subject Skateboards | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="Subject Skateboards is a newer skateboard company in the foothills of Norhtern California. Check out our team, and buy some products on our website.">
<META name="keywords" content="subject skateboards, subject, skateboards, skateboarding, skate, sub, worrell, decks, graphic, design, team, products, boards, grind, jump, ollie, slide">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

<style type="text/css">
<!--

-->
</style></head>

<body bgcolor="#FFFFFF">

<!-- ImageReady Slices (idea.psd) -->
<div id="Layer1" style="position:absolute; left:7px; top:101px; width:428px; height:369px; z-index:1">
<iframe name="FRAME1" src="home.html" width="428" height="369" frameborder="0" ></iframe>
</div>
<div id="Layer2" style="position:absolute; left:453px; top:101px; width:243px; height:369px; z-index:2">
<iframe name="FRAME2" src="news.html" width="243" height="369" frameborder="0" ></iframe>
</div>
<table id="Table_01" width="701" height="527" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="25">
<img src="images/index_01.gif" width="700" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/index_02.gif" width="8" height="89" alt=""></td>
<td colspan="4" rowspan="4">
<a href="index.html" target="_self"><img src="images/index_03.gif" alt="" width="144" height="55" border="0"></a></td>
<td colspan="19">
<img src="images/index_04.gif" width="548" height="34" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images/index_05.gif" width="273" height="1" alt=""></td>
<td colspan="3" rowspan="5">
<a href="products.html" target="_self"><img src="images/index_06.gif" alt="" width="74" height="23" border="0"></a></td>
<td colspan="6">
<img src="images/index_07.gif" width="201" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/index_08.gif" width="11" height="54" alt=""></td>
<td colspan="3" rowspan="3">
<a href="index.html" target="_self"><img src="images/index_09.gif" alt="" width="57" height="21" border="0"></a></td>
<td rowspan="6">
<img src="images/index_10.gif" width="21" height="54" alt=""></td>
<td rowspan="2">
<a href="about.html" target="_self"><img src="images/index_11.gif" alt="" width="91" height="20" border="0"></a></td>
<td rowspan="6">
<img src="images/index_12.gif" width="23" height="54" alt=""></td>
<td colspan="2" rowspan="4">
<a href="team.html" target="_self"><img src="images/index_13.gif" alt="" width="49" height="22" border="0"></a></td>
<td rowspan="6">
<img src="images/index_14.gif" width="21" height="54" alt=""></td>
<td colspan="3">
<img src="images/index_15.gif" width="99" height="1" alt=""></td>
<td rowspan="4">
<a href="contact.html" target="_self"><img src="images/index_16.gif" alt="" width="93" height="22" border="0"></a></td>
<td colspan="2" rowspan="6">
<img src="images/index_17.gif" width="9" height="54" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/index_18.gif" width="18" height="53" alt=""></td>
<td rowspan="4">
<a href="media.html" target="_self"><img src="images/index_19.gif" alt="" width="58" height="22" border="0"></a></td>
<td rowspan="5">
<img src="images/index_20.gif" width="23" height="53" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="4">
<img src="images/index_21.gif" width="144" height="34" alt=""></td>
<td rowspan="4">
<img src="images/index_22.gif" width="91" height="34" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/index_23.gif" width="57" height="33" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/index_24.gif" width="49" height="32" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/index_25.gif" width="74" height="32" alt=""></td>
<td rowspan="2">
<img src="images/index_26.gif" width="93" height="32" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_27.gif" width="58" height="31" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/index_28.gif" width="7" height="425" alt=""></td>
<td colspan="16">
<img src="images/index_29.gif" width="429" height="370" alt=""></td>
<td rowspan="7">
<img src="images/index_30.gif" width="12" height="425" alt=""></td>
<td colspan="6">
<img src="images/index_31.jpg" width="244" height="370" alt=""></td>
<td rowspan="7">
<img src="images/index_32.gif" width="8" height="425" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="370" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="images/index_33.gif" width="429" height="17" alt=""></td>
<td colspan="6" rowspan="6">
<img src="images/index_34.gif" width="244" height="55" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_35.gif" width="98" height="1" alt=""></td>
<td colspan="3" rowspan="4">
<a href="http://www.skateboarding.com" target="_blank"><img src="images/index_36.gif" alt="" width="104" height="28" border="0"></a></td>
<td colspan="9" rowspan="2">
<img src="images/index_37.gif" width="227" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/index_38.gif" width="4" height="37" alt=""></td>
<td rowspan="3">
<a href="http://www.icelounge.com/index.aspx" target="_blank"><img src="images/index_39.gif" alt="" width="85" height="27" border="0"></a></td>
<td rowspan="4">
<img src="images/index_40.gif" width="9" height="37" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_41.gif" width="9" height="36" alt=""></td>
<td colspan="5">
<a href="http://www.skateperception.com" target="_blank"><img src="images/index_42.gif" alt="" width="146" height="25" border="0"></a></td>
<td colspan="3" rowspan="3">
<img src="images/index_43.gif" width="72" height="36" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/index_44.gif" width="146" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_45.gif" width="85" height="10" alt=""></td>
<td colspan="3">
<img src="images/index_46.gif" width="104" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="58" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Creative Insanity
01-17-2006, 01:18 AM
This topic has been cover rather alot on here.. if you use the search you will find some results ('http://www.dreamweaverclub.com/forum/index.php?act=Search&CODE=show&searchid=97c31f85977455a4b6f2f2ca67689cc6&search_in=posts&result_type=topics&highlite=center')
(click results)

Corey
01-17-2006, 02:07 AM
i did search, and nothing came up. and that link you gave me didnt show anything relative but my post.

Creative Insanity
01-17-2006, 06:41 AM
Click in the table anywhere.
Just above the properties panel click table.
In the properties change default to center.

done.

gmcrone
01-17-2006, 09:13 AM
Once you use absolute positioning on your page, you will not be able to center it.

Absolute positioning creates layers outside the normal flow of the page.

You may want to read up on floating your layers.

Mike...

domedia
01-17-2006, 01:18 PM
It's currently the first article on our homepage:
http://www.dreamweaverclub.com/css-center-content.php ('http://www.dreamweaverclub.com/css-center-content.php')

Jim_Shady
01-17-2006, 03:15 PM
Click in the table anywhere.
Just above the properties panel click table.
In the properties change default to center.

done.
Made me giggle... definetly a 'can't be bothered with this' response....

Corey
01-17-2006, 06:46 PM
ok. i read the article about centering the page that domedia posted.
i did exactly what it said, and it didn't work. below is html to my page with the centering codes in it. and here are screenshots of a preview in firefox, and in internet explorer. the iFrames didnt move at all, it looks like they are centered (with the rest of the content, not the actuall screen), but they are actually about 20 pixels off.

Firefox Screenshot ('http://i6.photobucket.com/albums/y250/proskater5/websitefirefox.jpg')

Explorer Screenshot ('http://i6.photobucket.com/albums/y250/proskater5/websiteexplorer.jpg')

<html>
<head>
<title>Subject Skateboards | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content="Subject Skateboards is a newer skateboard company in the foothills of Norhtern California. Check out our team, and buy some products on our website.">
<META name="keywords" content="subject skateboards, subject, skateboards, skateboarding, skate, sub, worrell, decks, graphic, design, team, products, boards, grind, jump, ollie, slide">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

<style type="text/css">
body {
text-align : center;
min-width : 710px;
}
div.wrapper {
text-align : left;
margin-left : auto;
margin-right : auto;
}
</style></head>

<body bgcolor="#FFFFFF">
<div class="wrapper">
<!-- ImageReady Slices (idea.psd) -->
<div id="Layer1" style="position:absolute; left:7px; top:101px; width:428px; height:369px; z-index:1">
<iframe name="FRAME1" src="home.html" width="428" height="369" frameborder="0" ></iframe>
</div>
<div id="Layer2" style="position:absolute; left:453px; top:101px; width:243px; height:369px; z-index:2">
<iframe name="FRAME2" src="news.html" width="243" height="369" frameborder="0" ></iframe>
</div>
<table id="Table_01" width="701" height="527" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td colspan="25">
<img src="images/index_01.gif" width="700" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/index_02.gif" width="8" height="89" alt=""></td>
<td colspan="4" rowspan="4">
<a href="index.html" target="_self"><img src="images/index_03.gif" alt="" width="144" height="55" border="0"></a></td>
<td colspan="19">
<img src="images/index_04.gif" width="548" height="34" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images/index_05.gif" width="273" height="1" alt=""></td>
<td colspan="3" rowspan="5">
<a href="products.html" target="_self"><img src="images/index_06.gif" alt="" width="74" height="23" border="0"></a></td>
<td colspan="6">
<img src="images/index_07.gif" width="201" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/index_08.gif" width="11" height="54" alt=""></td>
<td colspan="3" rowspan="3">
<a href="index.html" target="_self"><img src="images/index_09.gif" alt="" width="57" height="21" border="0"></a></td>
<td rowspan="6">
<img src="images/index_10.gif" width="21" height="54" alt=""></td>
<td rowspan="2">
<a href="about.html" target="_self"><img src="images/index_11.gif" alt="" width="91" height="20" border="0"></a></td>
<td rowspan="6">
<img src="images/index_12.gif" width="23" height="54" alt=""></td>
<td colspan="2" rowspan="4">
<a href="team.html" target="_self"><img src="images/index_13.gif" alt="" width="49" height="22" border="0"></a></td>
<td rowspan="6">
<img src="images/index_14.gif" width="21" height="54" alt=""></td>
<td colspan="3">
<img src="images/index_15.gif" width="99" height="1" alt=""></td>
<td rowspan="4">
<a href="contact.html" target="_self"><img src="images/index_16.gif" alt="" width="93" height="22" border="0"></a></td>
<td colspan="2" rowspan="6">
<img src="images/index_17.gif" width="9" height="54" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/index_18.gif" width="18" height="53" alt=""></td>
<td rowspan="4">
<a href="media.html" target="_self"><img src="images/index_19.gif" alt="" width="58" height="22" border="0"></a></td>
<td rowspan="5">
<img src="images/index_20.gif" width="23" height="53" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="4">
<img src="images/index_21.gif" width="144" height="34" alt=""></td>
<td rowspan="4">
<img src="images/index_22.gif" width="91" height="34" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/index_23.gif" width="57" height="33" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/index_24.gif" width="49" height="32" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/index_25.gif" width="74" height="32" alt=""></td>
<td rowspan="2">
<img src="images/index_26.gif" width="93" height="32" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_27.gif" width="58" height="31" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/index_28.gif" width="7" height="425" alt=""></td>
<td colspan="16">
<img src="images/index_29.gif" width="429" height="370" alt=""></td>
<td rowspan="7">
<img src="images/index_30.gif" width="12" height="425" alt=""></td>
<td colspan="6">
<img src="images/index_31.jpg" width="244" height="370" alt=""></td>
<td rowspan="7">
<img src="images/index_32.gif" width="8" height="425" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="370" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="images/index_33.gif" width="429" height="17" alt=""></td>
<td colspan="6" rowspan="6">
<img src="images/index_34.gif" width="244" height="55" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_35.gif" width="98" height="1" alt=""></td>
<td colspan="3" rowspan="4">
<a href="http://www.skateboarding.com" target="_blank"><img src="images/index_36.gif" alt="" width="104" height="28" border="0"></a></td>
<td colspan="9" rowspan="2">
<img src="images/index_37.gif" width="227" height="2" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/index_38.gif" width="4" height="37" alt=""></td>
<td rowspan="3">
<a href="http://www.icelounge.com/index.aspx" target="_blank"><img src="images/index_39.gif" alt="" width="85" height="27" border="0"></a></td>
<td rowspan="4">
<img src="images/index_40.gif" width="9" height="37" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_41.gif" width="9" height="36" alt=""></td>
<td colspan="5">
<a href="http://www.skateperception.com" target="_blank"><img src="images/index_42.gif" alt="" width="146" height="25" border="0"></a></td>
<td colspan="3" rowspan="3">
<img src="images/index_43.gif" width="72" height="36" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="2">
<img src="images/index_44.gif" width="146" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_45.gif" width="85" height="10" alt=""></td>
<td colspan="3">
<img src="images/index_46.gif" width="104" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="58" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>

gmcrone
01-18-2006, 02:54 AM
Again,
You CANNOT center a page when you use position: absolute

Mike....

Corey
01-18-2006, 02:58 AM
well then how do i change that? b/c i read the tutorial, and it didn't say how to change it. it gave me the html and css, but that didn't work.

but anyways, i decided not to to it that way. i just made a seperate index page, with a link that opens up the website in a new window (javascript pop-up) thats adjusted exactly to the size of the website, then i set the popup's left and right adjustments to 100% and 125% and it seems to work good.

Creative Insanity
01-18-2006, 03:51 AM
You do realise that setting at 125% is going to cause side scroll on some resolutions.

domedia
01-18-2006, 05:21 AM
<div id="Layer1" style="position:absolute; left:7px; top:101px; width:428px; height:369px; z-index:1">
When you make a website like above, you cannot center the content. Absolute positioning means you position at a certain position. centering content means the placement is relative, it changes.

Remove the absolute positioning (don't insert what DW calls layers) and you should be well on your way :)