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
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
181 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
  • 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Suggested Solutions

Title # Comments Views Activity
Coldfusion CFMESSAGEBOX Passing Variables 6 127
Font: I need Lato on my Mac 10 350
Live mode in DW, need to creae Session 4 107
Mac neophyte...printer issue... 13 109
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…
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this tutorial viewers will learn how to restore old photos in Photoshop (an introduction to the Clone tool) Zoom into a damaged area: Click on the "Stamp" icon to use the Clone tool. Hold the Alt key and click to select a region. Click again, and…
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…

839 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