- Joined
- Oct 25, 2004
- Location
- 127.0.0.1
Hi guys, got a dilema, i've generated a page in Photoshop using CSS, (Trying to steer clear of tables) problem is i cant centre it all and i also want to add an iframe in the postion of image19. i've tryed everything i can think of to centre it and no luck..
With the iframe, when i replace: "<img id="index_19" src="images/index_19.jpg" width="726" height="677" alt="" />" with: "<iframe src="pages/home.html" width="726" height="677" alt="" />"
it completely screws the layout... see screeny..
Any help would be awesome !! thanks in advance..
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>proto_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (proto_1.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:790px;
height:870px;
}
#index-01_ {
position:absolute;
left:0px;
top:0px;
width:790px;
height:86px;
}
#index-02_ {
position:absolute;
left:0px;
top:86px;
width:88px;
height:39px;
}
#index-03_ {
position:absolute;
left:88px;
top:86px;
width:46px;
height:13px;
}
#index-04_ {
position:absolute;
left:134px;
top:86px;
width:66px;
height:39px;
}
#index-05_ {
position:absolute;
left:200px;
top:86px;
width:81px;
height:13px;
}
#index-06_ {
position:absolute;
left:281px;
top:86px;
width:59px;
height:39px;
}
#index-07_ {
position:absolute;
left:340px;
top:86px;
width:79px;
height:13px;
}
#index-08_ {
position:absolute;
left:419px;
top:86px;
width:66px;
height:39px;
}
#index-09_ {
position:absolute;
left:485px;
top:86px;
width:46px;
height:13px;
}
#index-10_ {
position:absolute;
left:531px;
top:86px;
width:62px;
height:39px;
}
#index-11_ {
position:absolute;
left:593px;
top:86px;
width:98px;
height:13px;
}
#index-12_ {
position:absolute;
left:691px;
top:86px;
width:99px;
height:39px;
}
#index-13_ {
position:absolute;
left:88px;
top:99px;
width:46px;
height:26px;
}
#index-14_ {
position:absolute;
left:200px;
top:99px;
width:81px;
height:26px;
}
#index-15_ {
position:absolute;
left:340px;
top:99px;
width:79px;
height:26px;
}
#index-16_ {
position:absolute;
left:485px;
top:99px;
width:46px;
height:26px;
}
#index-17_ {
position:absolute;
left:593px;
top:99px;
width:98px;
height:26px;
}
#index-18_ {
position:absolute;
left:0px;
top:125px;
width:31px;
height:745px;
}
#index-19_ {
position:absolute;
left:31px;
top:125px;
width:726px;
height:677px;
}
#index-20_ {
position:absolute;
left:757px;
top:125px;
width:33px;
height:745px;
}
#index-21_ {
position:absolute;
left:31px;
top:802px;
width:726px;
height:17px;
}
#index-22_ {
position:absolute;
left:31px;
top:819px;
width:292px;
height:51px;
}
#index-23_ {
position:absolute;
left:323px;
top:819px;
width:150px;
height:19px;
}
#index-24_ {
position:absolute;
left:473px;
top:819px;
width:284px;
height:51px;
}
#index-25_ {
position:absolute;
left:323px;
top:838px;
width:150px;
height:32px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#606060;">
<!-- ImageReady Slices (proto_1.psd) -->
<div id="Table_01">
<div id="index-01_">
<img id="index_01" src="images/index_01.jpg" width="790" height="86" alt="" />
</div>
<div id="index-02_">
<img id="index_02" src="images/index_02.jpg" width="88" height="39" alt="" />
</div>
<div id="index-03_">
<img id="index_03" src="images/index_03.jpg" width="46" height="13" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="images/index_04.jpg" width="66" height="39" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="images/index_05.jpg" width="81" height="13" alt="" />
</div>
<div id="index-06_">
<img id="index_06" src="images/index_06.jpg" width="59" height="39" alt="" />
</div>
<div id="index-07_">
<img id="index_07" src="images/index_07.jpg" width="79" height="13" alt="" />
</div>
<div id="index-08_">
<img id="index_08" src="images/index_08.jpg" width="66" height="39" alt="" />
</div>
<div id="index-09_">
<img id="index_09" src="images/index_09.jpg" width="46" height="13" alt="" />
</div>
<div id="index-10_">
<img id="index_10" src="images/index_10.jpg" width="62" height="39" alt="" />
</div>
<div id="index-11_">
<img id="index_11" src="images/index_11.jpg" width="98" height="13" alt="" />
</div>
<div id="index-12_">
<img id="index_12" src="images/index_12.jpg" width="99" height="39" alt="" />
</div>
<div id="index-13_">
<img id="index_13" src="images/index_13.jpg" width="46" height="26" alt="" />
</div>
<div id="index-14_">
<img id="index_14" src="images/index_14.jpg" width="81" height="26" alt="" />
</div>
<div id="index-15_">
<img id="index_15" src="images/index_15.jpg" width="79" height="26" alt="" />
</div>
<div id="index-16_">
<img id="index_16" src="images/index_16.jpg" width="46" height="26" alt="" />
</div>
<div id="index-17_">
<img id="index_17" src="images/index_17.jpg" width="98" height="26" alt="" />
</div>
<div id="index-18_">
<img id="index_18" src="images/index_18.jpg" width="31" height="745" alt="" />
</div>
<div id="index-19_">
<img id="index_19" src="images/index_19.jpg" width="726" height="677" alt="" />
</div>
<div id="index-20_">
<img id="index_20" src="images/index_20.jpg" width="33" height="745" alt="" />
</div>
<div id="index-21_">
<img id="index_21" src="images/index_21.jpg" width="726" height="17" alt="" />
</div>
<div id="index-22_">
<img id="index_22" src="images/index_22.jpg" width="292" height="51" alt="" />
</div>
<div id="index-23_">
<img id="index_23" src="images/index_23.jpg" width="150" height="19" alt="" />
</div>
<div id="index-24_">
<img id="index_24" src="images/index_24.jpg" width="284" height="51" alt="" />
</div>
<div id="index-25_">
<img id="index_25" src="images/index_25.jpg" width="150" height="32" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
With the iframe, when i replace: "<img id="index_19" src="images/index_19.jpg" width="726" height="677" alt="" />" with: "<iframe src="pages/home.html" width="726" height="677" alt="" />"
it completely screws the layout... see screeny..
Any help would be awesome !! thanks in advance..