Log in

View Full Version : 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

<!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
http://i41.tinypic.com/104kp48.jpg
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...


<!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/

http://i41.tinypic.com/j17r13.png
http://i43.tinypic.com/2i0c9ac.png

How do I fix this again/now?

Here is the current HTML

<!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>
coothead
05-13-2010, 02:34 PM
Hi there mlegg,

one moment I saw that you had resized the Front-Web.jpg and then it was gone. ;)

Have you shelved that idea or not?

As it stands now you need to change this...


#video img {
float:left;
width:300px;
height:50px;
border:0;
margin-right:252px;
}

...to this...


#video img {
float:left;
width:300px;
height:50px;
border:0;
margin-right:42px;
}

...which will put the links neatly in line. ;)

coothead
mlegg
05-13-2010, 02:47 PM
OK that helped the image links. Now the image is doubling out of the container. :confused:

http://i40.tinypic.com/dvkpoj.jpg

Sorry for all the questions, I have MS and it is taking a toll on my brain today. :(
coothead
05-13-2010, 05:37 PM
Hi there mlegg,

change this...


#links {
width:870px;
height:135px;
padding:374px 0 0 100px;
background-image:url(images/Front-Web.jpg);
margin:0 auto 16px;
}

...to this...



#links {
width:770px;
height:135px;
padding:419px 0 0 100px;
background-image:url(images/Front-Web.jpg);
}

coothead
mlegg
05-13-2010, 07:45 PM
Thank you very much.

-Mike
coothead
05-13-2010, 07:54 PM
I am pleased that I was able to help. ;)
coelloc123
05-27-2010, 10:06 PM
hey im having trouble with my page it hasnt been uploaded yet to the ftp server so i have it on dreamweaver and its not showing me a navbar that i used http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm. im stressing out cause its frustrating anyone help me out on this one

thank you

this is the coding from the dreamweaver page im working on my index.html file



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>



<title>New Construction and Renovation Specialists</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:812px;
height:94px;
z-index:1;
left: 510px;
top: 367px;
}
.style2 {
font-size: 36px;
font-weight: bold;
}
#Layer2 {
position:absolute;
width:389px;
height:1367px;
z-index:2;
left: 41px;
top: 334px;
}
.style3 {
font-weight: bold;
font-size: 40px;
color: #000099;
}
#Layer3 {
position:absolute;
width:320px;
height:217px;
z-index:1;
left: -2px;
top: 213px;
}
#Layer4 {
position:absolute;
width:343px;
height:216px;
z-index:2;
left: 384px;
top: 184px;
}
#Layer5 {
position:absolute;
width:438px;
height:81px;
z-index:3;
left: 509px;
top: 976px;
}
#Layer6 {
position:absolute;
width:704px;
height:93px;
z-index:4;
left: 509px;
top: 1134px;
}
#Layer7 {
position:absolute;
width:243px;
height:145px;
z-index:5;
left: 1106px;
top: 1393px;
}
#Layer8 {
position:absolute;
width:387px;
height:90px;
z-index:6;
left: 677px;
top: 1463px;
}
.style7 {font-size: 24px; font-weight: bold; color: #0000FF; }
.style8 {
color: #0000FF;
font-size: 18px;
}
#Layer9 {
position:absolute;
width:47px;
height:28px;
z-index:1;
left: 515px;
top: 190px;
}
#Layer10 {
position:absolute;
width:65px;
height:29px;
z-index:7;
left: 646px;
top: 243px;
}
.style9 {font-size: 18px}
.style10 {font-size: 36px; font-weight: bold; color: #0000FF; }
#Layer11 {
position:absolute;
width:93px;
height:44px;
z-index:8;
left: 758px;
top: 242px;
}
#Layer12 {
position:absolute;
width:119px;
height:80px;
z-index:9;
left: 870px;
top: 305px;
}
-->
</style>
</head>

<body>

<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/index.html">Home</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/Services.html">Services</a>
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/Services.html">Residential</a></li>
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/HandymanR.html">Handyman</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/BuilderR.html">Builder</a></li>
</ul>
<li>
<a href="C:/Users/Manny/Documents/NCRS/pages/commercial.html">Commercial</a></li>
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/HandymanC.html">Handyman</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/BuilderC.html">Builder</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/MaintainanceC.html">maintainance</a></li>
</ul>
<li>
<a href="C:/Users/Manny/Documents/NCRS/pages/consult.html">Consulting services</ a></li>
</li>
</ul>
</li>
<img src="photos/home1_clip_image002.jpg" width="1375" height="1500" />
<li><a href="C:/Users/Manny/Documents/NCRS/pages/General.html">General Information</a></li>
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/contact.html">Contact Us</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/About.html">About Us</a></li>
<li><a href=""></a></li>
<li><a href="<li>
</li>
</ul>
</div>


<img src="photos/home1_clip_image002_0001.jpg" alt="main background" width="1375" height="1500" />
<div id="Layer8">
<p align="center" class="style10">If you dream it, we can build it. If it&rsquo;s broken, let&rsquo;s fix it.</p>
</div>
<div class="style8" id="Layer7">
<p align="right">Winter Park, Florida. 32792</p>
<p align="right"><strong>Ph</strong> 321-377-2205</p>
<p align="right"><strong>Fx</strong> 407-637-2369</p>
<p align="right">E-mail: coellomanuel@msn.com</p>
</div>
<div id="Layer5">
<p class="style2">Our Focus is a common goal.</p>
</div>
<div id="Layer6">
<p class="style9">When we start a project, our intention is to complete it with whatever it takes mind set. Once NCRS is assigned a project, we make it our goal to meet and exceed customer expectations in an effort to get that &ldquo;wow&rdquo; affect and a satisfaction of completion. Above all, our customers trust and continued business for years to come.</p>
</div>
<div id="Layer2"><img src="photos/Main page pic.jpg" alt="Protractor" width="405" height="1435" /></div>
<div id="Layer1">
<p class="style3">New Construction &amp; Renovation Specialists</p>
<div id="Layer3"> <span class="style9">&nbsp;New Construction and Renovation Specialists (NCRS) has been on the customer&rsquo;s side since 2001. We have had the opportunity to cater to customers on both sides residential and commercial.</span>
<p class="style9"> As a builder, we have the experience needed to build, renovate and repair at any stage from existing, conception to completion. </p>
<p class="style9">
We are continuously working with our architects and engineers to ensure Florida codes and customer satisfaction are met. </p>
</div>
<div id="Layer4">
<p class="style9">As a company, we provide truthful and honest recommendation, but always keep in mind the customers view. By doing so, we pride ourselves in having a faithful cliental and keeping our image with zero complaints from the BBB, Florida Construction Board and any building departments.</p>
<p class="style9"> We offer many services within the construction field. From a simple drawing on a napkin, to a completion of a project. We offer handyman services: to service our clients the old fashion way with face to face contact and keeping your interests in mind first.</p>
</div>
<p class="style7">When getting it done right matters most.</p>
</div>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/index.html">Home</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/Services.html" rel="ddsubmenu1">Services</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/General.html" rel="ddsubmenu2">General information</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Pctures</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>



<!--Top Drop Down Menu 1 HTML-->


<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="C:/Users/Manny/Documents/NCRS/Residential.html">Residential</a>
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/HandymanR.html">Handyman</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/BuilderR.html">Builder</a></li>
</ul>

</li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/commercial.html">Commercial</a>
<ul>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/HandymanC.html">Handyman</a></li>

<li><a href="C:/Users/Manny/Documents/NCRS/pages/maintainanceC.html">Maintainance</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/BuilderC">Builder</a></li>

</ul>
</li>
</ul>
</li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/consult.html">Consulting services</a></li>

</ul>


<!--Top Drop Down Menu 2 HTML-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="C:/Users/Manny/Documents/NCRS/pages/About.html">About us</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/contact.html">Contact Us</a></li>
<li><a href="C:/Users/Manny/Documents/NCRS/pages/references.html">References</a>
</ul>

</body>
</html>