Solved

What is the best way to slice a page so it a)fills the page b)the background remains and buttons on top

Posted on 2008-10-21
5
183 Views
Last Modified: 2011-10-19
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
0
Comment
Question by:cdic
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 25

Expert Comment

by:Rouchie
ID: 22774373
You cannot make an image slice the page without distorting it.  The reason is that there are many many different screen resolutions in use, each one having a different width (and height).  You image has a fixed width.  This is a regular problem with web design.

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.
0
 

Author Comment

by:cdic
ID: 22774920
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)
<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>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>aads</p>
	    <p>asd</p>
	    <p>fas</p>
	    <p>df</p>
	    <p>asdf</p>
	    <p>&nbsp;</p>
	    <p>asdf</p>
	    <p>a</p>
	    <p>sdf</p>
	    <p>asd</p>
	    <p>f</p>
	    <p>asdf</p>
	    <p>&nbsp;</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>

Open in new window

1pixel.gif
stupid-line.gif
0
 
LVL 25

Accepted Solution

by:
Rouchie earned 500 total points
ID: 22775018
IE7 and FF both interpret (margin) spacing differently.  You should be aware that IE normally does things incorrectly, which is unfortunate as more people use it than firefox.

I believe the 'line' is actually caused by a spacing between certain elements (e.g. tables) that allows the background colour of the page (blue) to show through.  Without seeing a live page though this is extremely hard to find the cause of...!
0
 

Author Comment

by:cdic
ID: 22775069
yeah ... the line keeps getting inserted with the photoshop save to web

so, no suggestion on the margin ?

0
 
LVL 25

Expert Comment

by:Rouchie
ID: 22775139
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.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to create a Photoshop action to apply adjustments and effects to multiple images. Open a photo for editing in Photoshop: Open the Actions window by going to Window > Actions: Start a new action by selecting th…
In this tutorial viewers will learn how to select a color range in Photoshop and how to easily apply them to multiple projects. Open an image for editing in Photoshop: Open the select Color Range Selection tool by going to Select > Color Range: Sele…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question