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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
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 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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now