cdic
asked on
What is the best way to slice a page so it a)fills the page b)the background remains and buttons on top
What is the best way to slice a page so it a)fills the page b)the photo background remains and buttons on top.
(see attached)..
maybe i am doign it wrong and any suggestion would be good.. maybe i should use dreamweaver ?
Thanks
website-4.jpg
(see attached)..
maybe i am doign it wrong and any suggestion would be good.. maybe i should use dreamweaver ?
Thanks
website-4.jpg
ASKER
ok .. one final ...
In IE 7 everything is great ... but in FF 3 there is a 1 pixel difference ...
also, in both i have this stupid blue line (see attached code and screenies)
stupid-line.gif
In IE 7 everything is great ... but in FF 3 there is a 1 pixel difference ...
also, in both i have this stupid blue line (see attached code and screenies)
<html>
<head>
<title>website_main_slice</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen, tv, projection">
/* //// Import Shared Styles //// */
@import url("css/defaults.css");
@import url("css/global.css");
/* //// Page-Specific Styling //// */
body {
background: url(images/website_2000slice_01.jpg) no-repeat 0 0 #fff;
background-position: top center;
color: #000;
font-family: Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #6E9AB5;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="990" height="881" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01" >
<tr>
<td height="306" align="center" >
<table id="Table_01" width="990" height="307" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border: 0px solid #39f;">
<tr>
<td width="703" height="260" colspan="6" rowspan="2">
<img src="images/spacer.gif" width="703" height="260" alt=""></td>
<td width="287" height="40" colspan="4">
<img src="images/spacer.gif" width="287" height="40" alt=""></td>
</tr>
<tr>
<td width="287" height="220" colspan="4">
<img src="images/spacer.gif" width="287" height="220" alt=""></td>
</tr>
<tr>
<td width="12" height="39">
<img src="images/spacer.gif" width="12" height="39" alt=""></td>
<td>
<img src="images/website_main_header_05.gif" width="68" height="39" alt=""></td>
<td>
<img src="images/website_main_header_06.gif" width="211" height="39" alt=""></td>
<td>
<img src="images/website_main_header_07.gif" width="133" height="39" alt=""></td>
<td>
<img src="images/website_main_header_08.gif" width="168" height="39" alt=""></td>
<td colspan="2">
<img src="images/website_main_header_09.gif" width="144" height="39" alt=""></td>
<td>
<img src="images/website_main_header_10.gif" width="98" height="39" alt=""></td>
<td>
<img src="images/website_main_header_11.gif" width="123" height="39" alt=""></td>
<td width="33" height="39">
<img src="images/spacer.gif" width="33" height="39" alt=""></td>
</tr>
<tr>
<td width="990" height="7" colspan="10">
<img src="images/spacer.gif" width="990" height="7" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="68" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="211" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="133" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="168" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="111" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="0" alt=""></td>
<td>
<img src="images/spacer.gif" width="98" height="0" alt=""></td>
<td>
<img width="123" height="0" alt=""></td>
<td>
<img width="33" height="0" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td height="518" valign="top" background="images/website_main_slice_table2_02.gif"><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>aads</p>
<p>asd</p>
<p>fas</p>
<p>df</p>
<p>asdf</p>
<p> </p>
<p>asdf</p>
<p>a</p>
<p>sdf</p>
<p>asd</p>
<p>f</p>
<p>asdf</p>
<p> </p>
<p>asdf</p>
<p>a</p>
<p>sdf</p>
<p>asd</p>
<p>f</p>
<p>a</p></td>
</tr>
<tr>
<td>
<img src="images/website_main_slice_table_03.gif" width="990" height="14" alt=""></td>
</tr>
<tr>
<td>
<img src="images/website_main_slice_table_04.gif" width="990" height="43" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
stupid-line.gif
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
yeah ... the line keeps getting inserted with the photoshop save to web
so, no suggestion on the margin ?
so, no suggestion on the margin ?
Without seeing a live version its almost impossible to guess where the problem is.
If you can't send a link then we can try slicing up the image differently in two parts, but it would be quicker to see a live version of the current layout.
Let me know either way.
If you can't send a link then we can try slicing up the image differently in two parts, but it would be quicker to see a live version of the current layout.
Let me know either way.
There are also many ways to slice the image depending on the HTML techniques you use to build the page back up. Regardless of how its done, you must place the image in the center of the page, then set the page's background colour to be blue. That way the image stays central and fades into the background around it.
Photoshop has an image slicer tool, and can even save the page layout into HTML format. The downside is that it uses tables to hold the content, which web purists think is way out of date (and to be fare, it is). For a newbie however it makes things simple.
Use the image slice tool in Photoshop to divide up the image and buttons, then save into html format. You should probably move the buttons to a new image file and cut them up separately to keep things simple.