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
182 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Adobe Premiere Pro CS5 Video Speech Analysis 3 86
Images 20 106
Add server behaviors to Dreamweaver CC 2015 2 219
Text Transformation using ActionScript 3 5 172
HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
In this tutorial viewers will learn how to create a postcard text effect in Photoshop and get an introduction to Layer masks Use magic wand to select the "inner" part of the letters: Create a new layer and fill the selected area with black: Go back …
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …

735 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