Jump to content


slice trouble

Started by shawna, Feb 02 2006 05:10 AM

8 replies to this topic

#1 shawna

    Young Padawan

  • Members
  • Pip
  • 46 posts
  • Gender:Female
  • Location:Jacksonville,Florida
  • Interests:Web Design,music,I'm a vocalist and wannabe guitarist. I'm a female of course if you haven't noticed by my name. I'm a vegetarian,and I like to help people out when I can.99% of the time,I'm partially wrong : ) so don't yell at me if I am kaythxbye

Posted 02 February 2006 - 05:10 AM

hey, I made a slice and with the div layer added on the slice alone works fine, but when I bring in the table, it get messed up
click for example

here's the code I'm using with that
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Always A Fan - Store</title>
</head>
<body background="images/bg2.gif" bgproperties="fixed">
<LINK REL=StyleSheet HREF="style10.css" TYPE="text/css">
<table border=1>
<tr>
<td valign="top"> 
<TABLE WIDTH=655 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=5>
<IMG SRC="images/paper_01.gif" WIDTH=655 HEIGHT=53 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="images/paper_02.gif" WIDTH=242 HEIGHT=553 ALT=""></TD>
<TD COLSPAN=2 background="images/paper_03.gif" WIDTH=375 HEIGHT=195 valign= top>
<div style="width:365;height:185;overflow:auto;">
<p><img src="images/nitem.gif">
<p><img src="images/loudshirt.jpg">	
</div>	
</TD>
<TD COLSPAN=2>
<IMG SRC="images/paper_04.gif" WIDTH=38 HEIGHT=195 ALT=""></TD>
</TR>
<TR>
<TD background="images/paper_05.gif" WIDTH=283 HEIGHT=99 valign = top>
<div style="width:283;height:99;overflow:auto;">
Text here
</TD>
<TD COLSPAN=2>
<IMG SRC="images/paper_06.gif" WIDTH=119 HEIGHT=99 ALT=""></TD>
<TD>
<IMG SRC="images/paper_07.gif" WIDTH=11 HEIGHT=99 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="images/paper_08.gif" WIDTH=413 HEIGHT=259 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=242 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=283 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=27 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="images/spacer.gif" WIDTH=11 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
</td>
<td valign="top">
<p><a href=" "
onMouseOver="document.image1.src='images/home4.gif'"
onMouseOut="document.image1.src='images/home3.gif'">
<img src="images/home3.gif" name="image1" border=0>
<br><a href=""
onMouseOver="document.image2.src='images/accesories4.gif'"
onMouseOut="document.image2.src='images/accesories3.gif'">
<img src="images/accesories3.gif" name="image2" border=0>
<br><a href=""
onMouseOver="document.image3.src='images/shirts4.gif'"
onMouseOut="document.image3.src='images/shirts3.gif'">
<img src="images/shirts3.gif" name="image3" border=0>
<br><a href=""
onMouseOver="document.image4.src='images/gifts4.gif'"
onMouseOut="document.image4.src='images/gifts3.gif'">
<img src="images/gifts3.gif" name="image4" border=0>
<br><a href=""
onMouseOver="document.image5.src='images/intimates3.gif'"
onMouseOut="document.image5.src='images/intimates4.gif'">
<img src="images/intimates4.gif" name="image5" border=0>
<br><a href=""
onMouseOver="document.image6.src='images/pets2.gif'"
onMouseOut="document.image6.src='images/pets1.gif'">
<img src="images/pets1.gif" name="image6" border=0>
<br><a href=""
onMouseOver="document.image7.src='images/links4.gif'"
onMouseOut="document.image7.src='images/links3.gif'">
<img src="images/links3.gif" name="image7" border=0>
</a>
</a>
</td>
</tr>

<tr>
<td>
<P><a href="http://www.cafepress.com/alwaysafan"><img 

src="http://www.cafepress.com/content/banners/promo_125x125_01.gif" width="125" height="125" alt="Support This Site" 

border="0"></a>
</td>
</tr>
</table>
<p align =  center> This store &copy; 2006
</body>
</html>

#2 _*spoiled-dezigner_*

  • Guests

Posted 02 February 2006 - 09:40 AM

i think its better fo you to use css stylesheet so you can easily manage the tables...hope it helps

#3 shawna

    Young Padawan

  • Members
  • Pip
  • 46 posts
  • Gender:Female
  • Location:Jacksonville,Florida
  • Interests:Web Design,music,I'm a vocalist and wannabe guitarist. I'm a female of course if you haven't noticed by my name. I'm a vegetarian,and I like to help people out when I can.99% of the time,I'm partially wrong : ) so don't yell at me if I am kaythxbye

Posted 02 February 2006 - 11:40 AM

View Postspoiled-dezigner, on Feb 2 2006, 09:40 AM, said:

i think its better fo you to use css stylesheet so you can easily manage the tables...hope it helps
it's not really managing the tables, I'm trying to figure out what to put to start my slices. I just need to know how to get my slice to not get jaggered when I put it inside the table I already have

#4 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 02 February 2006 - 07:42 PM

First, i recommend not using photoshop (or any other program) to slice your site. Next, i would make the HTML a little more valid, and since you're new, not use XHTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Always A Fan - Store</title>
<LINK REL="stylesheet" HREF="style10.css" TYPE="text/css">
</head>
<body background="images/bg2.gif" bgproperties="fixed">
<table border=1>
Change the first section of your code to that and see if anything lines up better.

Edited by rc69, 02 February 2006 - 07:43 PM.

#5 shawna

    Young Padawan

  • Members
  • Pip
  • 46 posts
  • Gender:Female
  • Location:Jacksonville,Florida
  • Interests:Web Design,music,I'm a vocalist and wannabe guitarist. I'm a female of course if you haven't noticed by my name. I'm a vegetarian,and I like to help people out when I can.99% of the time,I'm partially wrong : ) so don't yell at me if I am kaythxbye

Posted 03 February 2006 - 02:36 AM

View Postrc69, on Feb 2 2006, 07:42 PM, said:

First, i recommend not using photoshop (or any other program) to slice your site. Next, i would make the HTML a little more valid, and since you're new, not use XHTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Always A Fan - Store</title>
<LINK REL="stylesheet" HREF="style10.css" TYPE="text/css">
</head>
<body background="images/bg2.gif" bgproperties="fixed">
<table border=1>
Change the first section of your code to that and see if anything lines up better.
HUH? ME? NEW? I'm just stuck on something stupid. That I've possibly solved before but didn't remember how I did it.

How's changing that line of code gonna help for my problem with the table?

Oh yeah, plus, NOT using photoshop and trying to code the slice alone would be suicide

Edited by shawna, 03 February 2006 - 02:38 AM.

#6 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 03 February 2006 - 04:24 PM

HTML has issues, if you knew about quirksmode (most commonly affecting the box model), then you would know changing those 2 lines would make a world of difference (i say 2 lines, because i also moved the <link> tag to it's proper location).

Not using photoshop would be the easeist way to solve your problem. First rule of HTML is, NEVER use a WYSIWYG editor, because What You See Isn't What You Get. No matter how big your template is, hundereds of people do more slicing then that a day, BY HAND!

Now, you can take my advice and see if that change helps, or you can leave it. No, it won't fix it entirely, but with any luck, it could help.

Edited by rc69, 03 February 2006 - 04:30 PM.

#7 shawna

    Young Padawan

  • Members
  • Pip
  • 46 posts
  • Gender:Female
  • Location:Jacksonville,Florida
  • Interests:Web Design,music,I'm a vocalist and wannabe guitarist. I'm a female of course if you haven't noticed by my name. I'm a vegetarian,and I like to help people out when I can.99% of the time,I'm partially wrong : ) so don't yell at me if I am kaythxbye

Posted 03 February 2006 - 10:32 PM

View Postrc69, on Feb 3 2006, 04:24 PM, said:

HTML has issues, if you knew about quirksmode (most commonly affecting the box model), then you would know changing those 2 lines would make a world of difference (i say 2 lines, because i also moved the <link> tag to it's proper location).

Not using photoshop would be the easeist way to solve your problem. First rule of HTML is, NEVER use a WYSIWYG editor, because What You See Isn't What You Get. No matter how big your template is, hundereds of people do more slicing then that a day, BY HAND!

Now, you can take my advice and see if that change helps, or you can leave it. No, it won't fix it entirely, but with any luck, it could help.

I just find it easier and more conveinent to use imageready. The other thing didn't work, seriously, it's the way the table is set up, but I'm not certain of what tag to put in. Maybe embedding the slice's table into the content table??

nope, changing things around or trying to nest them didn't help either :D

Edited by shawna, 03 February 2006 - 10:43 PM.

#8 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 04 February 2006 - 11:58 PM

It's always more conveinent to have something do all the work for you, which is why so many people start designing websites with programs like photoshop. But eventually they realize that the way photoshop outputs html royally sucks.

So my next tip (not to sound rude) would be to learn proper html. After taking a look at your code, and realizing which layer you were talking about, i can see a really good reason why your table would be messed up. If you go over to the W3C site and try validating your website, you should notice quite a few errors. Thats because, like the tags associated with <table>, div's require an end tag (i.e. </table>), and so to paragraphs (but most browsers let you slide on that particular one).
So, unlike your link list, where you have to many closing </a> tags, you need to add a </div> after the text.
i.e.
<TD background="images/paper_05.gif" WIDTH=283 HEIGHT=99 valign = top>
<div style="width:283;height:99;overflow:auto;">
Text here
</div>
</TD>
Now, unlike my previous suggestion, that should have a more desierable effect.

#9 shawna

    Young Padawan

  • Members
  • Pip
  • 46 posts
  • Gender:Female
  • Location:Jacksonville,Florida
  • Interests:Web Design,music,I'm a vocalist and wannabe guitarist. I'm a female of course if you haven't noticed by my name. I'm a vegetarian,and I like to help people out when I can.99% of the time,I'm partially wrong : ) so don't yell at me if I am kaythxbye

Posted 06 February 2006 - 06:34 PM

I took off one of my </a> closing tags, and found that I missed a closing div... nothing changed, I'm just going to have to figure this one out.
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design