Help with web page and image slice

**mlegg** · 05-13-2010, 12:31 AM

My page is located at http://islandestatenh.com/

I used Adobe Image Ready 7 to create slices and add links to 2 spots on the image. I saved and exported the slices and HTML. If you look at the page you will see the image is chopped and doesn't appear as 1 large image. How can I fix this?

I left the original image and 2 separate links under the Adobe sliced image so you can see the image.

Here is the HTML code

HTML Code:

<!DOCTYPE HTML>
<html><head>



  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>IslandEstateNH.com brought to you by Samonas Realty</title>
    <link rel="stylesheet" type="text/css" href="Styles.css">
    
  <base href="http://IslandEstateNH.com/"></head><body>
<div id="mainPicture"></div>
<div class="contentBox">
<div class="innerBox">
<div class="contentText">

<!-- ImageReady Slices (Front-Web-link.html) -->
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=5>
			<IMG SRC="images/Front-Web-link_01.jpg" WIDTH=800 HEIGHT=374 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=374 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=3>
			<IMG SRC="images/Front-Web-link_02.jpg" WIDTH=100 HEIGHT=135 ALT=""></TD>
		<TD>
			<A HREF="http://IslandEstateNH.com/video.html" TARGET="_blank">
				<IMG SRC="images/Front-Web-link_03.jpg" WIDTH=160 HEIGHT=92 BORDER=0 ALT=""></A></TD>
		<TD ROWSPAN=3>
			<IMG SRC="images/Front-Web-link_04.jpg" WIDTH=252 HEIGHT=135 ALT=""></TD>
		<TD ROWSPAN=2>
			<A HREF="http:/IslandEstateNH.com/gallery.html" TARGET="_blank">
				<IMG SRC="images/Front-Web-link_05.jpg" WIDTH=203 HEIGHT=103 BORDER=0 ALT=""></A></TD>
		<TD ROWSPAN=3>
			<IMG SRC="images/Front-Web-link_06.jpg" WIDTH=85 HEIGHT=135 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=92 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="images/Front-Web-link_07.jpg" WIDTH=160 HEIGHT=43 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=11 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/Front-Web-link_08.jpg" WIDTH=203 HEIGHT=32 ALT=""></TD>
		<TD>
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=32 ALT=""></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->


<img src="http://IslandEstateNH.com/images/Front-Web.jpg">
	
<table border="0" cellpadding="10" width="100%">
<tbody><tr>

<td valign="top" width="50%">
<img src="http://IslandEstateNH.com/images/video_tour.gif">
<a href="http://IslandEstateNH.com/video.html">Click for video tour.</a>
</td>

<td valign="top" width="50%">
<img src="http://IslandEstateNH.com/images/photo_gallery.gif">
<a href="http://IslandEstateNH.com/gallery.html">Click for image 
gallery.</a>
</td>

</tr>
</tbody></table>
</div>
</div>
</div>
<div id="footer"><a href="http://samonasgroup.com/">Samonas Realty</a> |
 111 Bow St., Portsmouth, NH 03801       | <a 
href="mailto:brad@samonasgroup.com">BradSweet</a> | (603) 319-8100</div>
</body></html>

Here is what the image should look like

**djr33** · 05-13-2010, 02:23 AM

The main reason is that slices are terrible. You can use CSS (much better than properties within the CSS like generated from image ready) to set the margins, borders and padding on each cell/row/table to 0, then everything may be fixed.

I would recommend against using slices.
You could do an image map, but that is not necessarily the best way.

In this case, I'd actually just suggest using the larger image as a background and the smaller images as transparent gifs/pngs aligned to the right places on top of it.

Also remember that large images can make loading pages slower and are usually not worth the tradeoffs. For newer designers they can be tempting, but usually aren't the best way. But feel free to do what you'd like-- that's just my opinion on it.

**mlegg** · 05-13-2010, 02:51 AM

I also have Fireworks but an older version 4. Will that be better for what I want to do? I guess I don't quite understand how to make this work.

**djr33** · 05-13-2010, 02:55 AM

The idea is to avoid slices all together. Image maps are one alternative, but still not a great one.
the better idea is to just avoid problems like I said above: use the background as the background then place the other images on top of it.

If you must use slices, image ready isn't particularly bad.

The main reason to avoid slices (among other issues, like how hard it is to update things if something changes) is that tables are not meant for layouts and the spacing problems you see are the exact reason for this. Tables are meant for displaying tables, like numbers, data, etc.

As I said in my first post, you can patch this up by applying 0 width/height margins, padding and borders to all of the table.

**coothead** · 05-13-2010, 12:33 PM

Hi there mlegg,

I notice that your page looks awful in IE6, so I am guessing that you are not targetting that browser.

Try this code which works OK in Firefox, Opera and Safari...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://IslandEstateNH.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>IslandEstateNH.com brought to you by Samonas Realty</title>

<link rel="stylesheet" type="text/css" href="Styles.css">

<style type="text/css">
#links {
    width:700px;
    height:135px;
    padding:374px 0 0 100px;
    background-image:url(images/Front-Web.jpg);
    margin:0 auto 16px;
 }
#video img {
    float:left;
    width:160px;
    height:92px;
    border:0;
    margin-right:252px;
 }
#gallery img{
    float:left;
    width:203px;
    height:103px;
    border:0;
 }
</style>

</head>
<body>

<div id="mainPicture"></div>
<div class="contentBox">
<div class="innerBox">

<div id="links">
<a id="video" href="video.html"><img src="images/Front-Web-link_03.jpg" alt="video"></a>
<a id="gallery" href="gallery.html"><img src="images/Front-Web-link_05.jpg" alt="gallery"></a>
</div>
</div>
</div>

<div id="footer">
<a href="http://samonasgroup.com/">Samonas Realty</a> |
 111 Bow St., Portsmouth, NH 03801       | 
<a href="mailto:brad@samonasgroup.com">BradSweet</a> | (603) 319-8100
</div>

</body>
</html>

Note:-
My additional CSS may be added to your your original style sheet.

coothead

**mlegg** · 05-13-2010, 12:41 PM

Thanks coothead. That worked perfectly.

What line would I change if I wanted the Front-Web.jpg to fill the inner box and make it 870px wide X 554px high? I think if I do this and get rid of the white space around the image it will look better.

**coothead** · 05-13-2010, 12:44 PM

No problem, you're very welcome.

**mlegg** · 05-13-2010, 12:49 PM

oops, I edited my above reply, can you go re-read it please? I want to make the Front-Web.jpg larger. I have the 870x554 image loaded on the site now.

**coothead** · 05-13-2010, 01:00 PM

Hi there mlegg,

you will also need to adjust the dimensions of Front-Web-link_03.jpg and Front-Web-link_05.jpg.

Make your image adjustments then post a link to your site and I will then be able to adjust the code accordingly.

cooothead

**mlegg** · 05-13-2010, 02:25 PM

I forgot to edit above, I took out the image slices. I made 2 new PNG images for the links.
Now I have the Front-Web.jpg looking wrong, it streches out of the container. You can see the text when you look at the page http://islandestatenh.com/

How do I fix this again/now?

Here is the current HTML

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://IslandEstateNH.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>IslandEstateNH.com brought to you by Samonas Realty</title>

<link rel="stylesheet" type="text/css" href="Styles.css">

<style type="text/css">
#links {
    width:870px;
    height:135px;
    padding:374px 0 0 100px;
    background-image:url(images/Front-Web.jpg);
    margin:0 auto 16px;
 }
#video img {
    float:left;
    width:300px;
    height:50px;
    border:0;
    margin-right:252px;
 }
#gallery img{
    float:left;
    width:300px;
    height:50px;
    border:0;
 }
</style>

</head>
<body>

<div id="mainPicture"></div>
<div class="contentBox">
<div class="innerBox">

<div id="links">
<a id="video" href="video.html"><img src="images/video_tour.png" alt="video"></a>
<a id="gallery" href="gallery.html"><img src="images/photo_gallery.png" alt="gallery"></a>
</div>
</div>
</div>

<div id="footer">
<a href="http://samonasgroup.com/">Samonas Realty</a> |
 111 Bow St., Portsmouth, NH 03801       | 
<a href="mailto:brad@samonasgroup.com">BradSweet</a> | (603) 319-8100
</div>

</body>
</html>

Thread: Help with web page and image slice

Thread Tools

Search Thread

Help with web page and image slice

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions