Back To Website Design Forum

Editing Slices

  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Apr 13, 2004
  • Posts: 163
  • Status: Offline

Post May 20th, 2004, 12:44 pm

I sliced a layout using PS. I was able to edit the buttons by setting the image to the table cell's background. That worked fine, but when I went to edit the main box, the text starts out in the center of the box. I would like for it to start off in the top left hand corner. What should I do?

Someone please help. If you need the source code, screenshot, or whatever, let me know. Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 20th, 2004, 12:44 pm

  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Apr 13, 2004
  • Posts: 163
  • Status: Offline

Post May 20th, 2004, 12:46 pm

Ok here's the source code... I'll try to post a snapshot in a sec.

Code: [ Select ]
TML>
<HEAD>
<TITLE>layout</TITLE>
<style type="text/css">

div {text-align: center; font-size: 12pt; font-family: arial}
#one div {text-align: left; font-size: 12pt; font-family: arial; position: absolute; top: 0%; left: 0%; padding: 0; margin: 0}
a:link {text-decoration: none; color: #ffffff}
a:hover {text-decoration: none; color: #999999}


</style>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#333333 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (layout.psd) -->
<center>
<TABLE WIDTH=786 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD COLSPAN=9 ROWSPAN=2>
            <IMG SRC="images/layout_01.gif" WIDTH=608 HEIGHT=98 ALT=""></TD>
        <TD COLSPAN=3 background="images/topright.gif" WIDTH=178 HEIGHT=82><div style="font-size: 8pt; line-height: 20px">Email: qsa1@bellsouth.net<br/> AIM: Sleepy_Graphiks</div></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=82 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=3>
            <IMG SRC="images/layout_03.gif" WIDTH=178 HEIGHT=16 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
    </TR>
    <TR>
        <TD ROWSPAN=8>
            <IMG SRC="images/layout_04.gif" WIDTH=25 HEIGHT=602 ALT=""></TD>
        <TD COLSPAN=3 background="images/button1.gif" WIDTH=145 HEIGHT=33><div><a href="profile.html">Profile</a></div></TD>
        <TD COLSPAN=2 background="images/button2.gif" WIDTH=146 HEIGHT=33><div><a href="pics.html">Pics</a></div></TD>
        <TD COLSPAN=2 background="images/button3.gif" WIDTH=147 HEIGHT=33><div><a href="portfolio.html">Portfolio</a></div></TD>
        <TD background="images/button4.gif" WIDTH=145 HEIGHT=33><div><a href="contact.html">Contact</a></div></TD>
        <TD COLSPAN=2 background="images/button5.gif" WIDTH=157 HEIGHT=33><div><a href="misc.html">Misc</a></div></TD>
        <TD ROWSPAN=8>
            <IMG SRC="images/layout_10.gif" WIDTH=21 HEIGHT=602 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=10>
            <IMG SRC="images/layout_11.gif" WIDTH=740 HEIGHT=33 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=6>
            <IMG SRC="images/layout_12.gif" WIDTH=311 HEIGHT=6 ALT=""></TD>
        
   <TD COLSPAN=3 ROWSPAN=4 background="images/mainbox.gif" WIDTH=401 HEIGHT=476></TD>
        <TD ROWSPAN=6>
            <IMG SRC="images/layout_14.gif" WIDTH=28 HEIGHT=536 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=6 ALT=""></TD>
    </TR>
    <TR>
        
   <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="images/layout_15.gif" WIDTH=9 HEIGHT=249 ALT=""></TD>
        
   <TD COLSPAN=2 background="images/top.gif" WIDTH=228 HEIGHT=223>&nbsp;</TD>
        <TD COLSPAN=2 ROWSPAN=5>
            <IMG SRC="images/layout_17.gif" WIDTH=74 HEIGHT=530 ALT=""></TD>
        
   <TD> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=223 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=2 background="images/layout_18.gif" WIDTH=228 HEIGHT=26></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=26 ALT=""></TD>
    </TR>
    <TR>
        <TD ROWSPAN=3>
            <IMG SRC="images/layout_19.gif" WIDTH=8 HEIGHT=281 ALT=""></TD>
        <TD COLSPAN=3 ROWSPAN=2>
            <IMG SRC="images/bottom.gif" WIDTH=229 HEIGHT=223 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=221 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=3 ROWSPAN=2>
            <IMG SRC="images/layout_21.gif" WIDTH=401 HEIGHT=60 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=3>
            <IMG SRC="images/layout_22.gif" WIDTH=229 HEIGHT=58 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=58 ALT=""></TD>
    </TR>
    <TR>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=25 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=136 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=127 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=145 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=28 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
        <TD></TD>
    </TR>
</TABLE>
</center>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
  1. TML>
  2. <HEAD>
  3. <TITLE>layout</TITLE>
  4. <style type="text/css">
  6. div {text-align: center; font-size: 12pt; font-family: arial}
  7. #one div {text-align: left; font-size: 12pt; font-family: arial; position: absolute; top: 0%; left: 0%; padding: 0; margin: 0}
  8. a:link {text-decoration: none; color: #ffffff}
  9. a:hover {text-decoration: none; color: #999999}
  12. </style>
  13. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
  14. </HEAD>
  15. <BODY BGCOLOR=#333333 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
  16. <!-- ImageReady Slices (layout.psd) -->
  17. <center>
  18. <TABLE WIDTH=786 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  19.     <TR>
  20.         <TD COLSPAN=9 ROWSPAN=2>
  21.             <IMG SRC="images/layout_01.gif" WIDTH=608 HEIGHT=98 ALT=""></TD>
  22.         <TD COLSPAN=3 background="images/topright.gif" WIDTH=178 HEIGHT=82><div style="font-size: 8pt; line-height: 20px">Email: qsa1@bellsouth.net<br/> AIM: Sleepy_Graphiks</div></TD>
  23.         <TD>
  24.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=82 ALT=""></TD>
  25.     </TR>
  26.     <TR>
  27.         <TD COLSPAN=3>
  28.             <IMG SRC="images/layout_03.gif" WIDTH=178 HEIGHT=16 ALT=""></TD>
  29.         <TD>
  30.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
  31.     </TR>
  32.     <TR>
  33.         <TD ROWSPAN=8>
  34.             <IMG SRC="images/layout_04.gif" WIDTH=25 HEIGHT=602 ALT=""></TD>
  35.         <TD COLSPAN=3 background="images/button1.gif" WIDTH=145 HEIGHT=33><div><a href="profile.html">Profile</a></div></TD>
  36.         <TD COLSPAN=2 background="images/button2.gif" WIDTH=146 HEIGHT=33><div><a href="pics.html">Pics</a></div></TD>
  37.         <TD COLSPAN=2 background="images/button3.gif" WIDTH=147 HEIGHT=33><div><a href="portfolio.html">Portfolio</a></div></TD>
  38.         <TD background="images/button4.gif" WIDTH=145 HEIGHT=33><div><a href="contact.html">Contact</a></div></TD>
  39.         <TD COLSPAN=2 background="images/button5.gif" WIDTH=157 HEIGHT=33><div><a href="misc.html">Misc</a></div></TD>
  40.         <TD ROWSPAN=8>
  41.             <IMG SRC="images/layout_10.gif" WIDTH=21 HEIGHT=602 ALT=""></TD>
  42.         <TD>
  43.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
  44.     </TR>
  45.     <TR>
  46.         <TD COLSPAN=10>
  47.             <IMG SRC="images/layout_11.gif" WIDTH=740 HEIGHT=33 ALT=""></TD>
  48.         <TD>
  49.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
  50.     </TR>
  51.     <TR>
  52.         <TD COLSPAN=6>
  53.             <IMG SRC="images/layout_12.gif" WIDTH=311 HEIGHT=6 ALT=""></TD>
  54.         
  55.    <TD COLSPAN=3 ROWSPAN=4 background="images/mainbox.gif" WIDTH=401 HEIGHT=476></TD>
  56.         <TD ROWSPAN=6>
  57.             <IMG SRC="images/layout_14.gif" WIDTH=28 HEIGHT=536 ALT=""></TD>
  58.         <TD>
  59.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=6 ALT=""></TD>
  60.     </TR>
  61.     <TR>
  62.         
  63.    <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="images/layout_15.gif" WIDTH=9 HEIGHT=249 ALT=""></TD>
  64.         
  65.    <TD COLSPAN=2 background="images/top.gif" WIDTH=228 HEIGHT=223>&nbsp;</TD>
  66.         <TD COLSPAN=2 ROWSPAN=5>
  67.             <IMG SRC="images/layout_17.gif" WIDTH=74 HEIGHT=530 ALT=""></TD>
  68.         
  69.    <TD> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=223 ALT=""></TD>
  70.     </TR>
  71.     <TR>
  72.         <TD COLSPAN=2 background="images/layout_18.gif" WIDTH=228 HEIGHT=26></TD>
  73.         <TD>
  74.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=26 ALT=""></TD>
  75.     </TR>
  76.     <TR>
  77.         <TD ROWSPAN=3>
  78.             <IMG SRC="images/layout_19.gif" WIDTH=8 HEIGHT=281 ALT=""></TD>
  79.         <TD COLSPAN=3 ROWSPAN=2>
  80.             <IMG SRC="images/bottom.gif" WIDTH=229 HEIGHT=223 ALT=""></TD>
  81.         <TD>
  82.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=221 ALT=""></TD>
  83.     </TR>
  84.     <TR>
  85.         <TD COLSPAN=3 ROWSPAN=2>
  86.             <IMG SRC="images/layout_21.gif" WIDTH=401 HEIGHT=60 ALT=""></TD>
  87.         <TD>
  88.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
  89.     </TR>
  90.     <TR>
  91.         <TD COLSPAN=3>
  92.             <IMG SRC="images/layout_22.gif" WIDTH=229 HEIGHT=58 ALT=""></TD>
  93.         <TD>
  94.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=58 ALT=""></TD>
  95.     </TR>
  96.     <TR>
  97.         <TD>
  98.             <IMG SRC="images/spacer.gif" WIDTH=25 HEIGHT=1 ALT=""></TD>
  99.         <TD>
  100.             <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
  101.         <TD>
  102.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
  103.         <TD>
  104.             <IMG SRC="images/spacer.gif" WIDTH=136 HEIGHT=1 ALT=""></TD>
  105.         <TD>
  106.             <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
  107.         <TD>
  108.             <IMG SRC="images/spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
  109.         <TD>
  110.             <IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
  111.         <TD>
  112.             <IMG SRC="images/spacer.gif" WIDTH=127 HEIGHT=1 ALT=""></TD>
  113.         <TD>
  114.             <IMG SRC="images/spacer.gif" WIDTH=145 HEIGHT=1 ALT=""></TD>
  115.         <TD>
  116.             <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1 ALT=""></TD>
  117.         <TD>
  118.             <IMG SRC="images/spacer.gif" WIDTH=28 HEIGHT=1 ALT=""></TD>
  119.         <TD>
  120.             <IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
  121.         <TD></TD>
  122.     </TR>
  123. </TABLE>
  124. </center>
  125. <!-- End ImageReady Slices -->
  126. </BODY>
  127. </HTML>
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Apr 13, 2004
  • Posts: 163
  • Status: Offline

Post May 20th, 2004, 12:48 pm

Also, is there a way I can clean that crap up? I don't like all the spacer images and stuff. I'm new to web design by the way. So any explainations should be as simple as possible.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post May 20th, 2004, 1:59 pm

I think that what you need is to add
Code: [ Select ]
class="aClassNameThatMakesSense"
into the tags for all the elements that want the alignment for and then add:

Code: [ Select ]
.aClassNameThatMakesSense{
  text-align:left;
  vertical-align:top;
}
  1. .aClassNameThatMakesSense{
  2.   text-align:left;
  3.   vertical-align:top;
  4. }

in the style tag. That should do the trick but I'm not sure.


As for cleaning... I'm assuming that is generated code? To clean it up the answer is learn to hand code. I don't believe there is a generator out there that can produce code as clean as a human can.
CSS website design tutorials
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Apr 13, 2004
  • Posts: 163
  • Status: Offline

Post May 20th, 2004, 2:17 pm

rtm223 wrote:
I think that what you need is to add
Code: [ Select ]
class="aClassNameThatMakesSense"
into the tags for all the elements that want the alignment for and then add:

Code: [ Select ]
.aClassNameThatMakesSense{
  text-align:left;
  vertical-align:top;
}
  1. .aClassNameThatMakesSense{
  2.   text-align:left;
  3.   vertical-align:top;
  4. }

in the style tag. That should do the trick but I'm not sure.


As for cleaning... I'm assuming that is generated code? To clean it up the answer is learn to hand code. I don't believe there is a generator out there that can produce code as clean as a human can.


I'm currently learning how to code. This is my first attempt at html/css. None of the links work. It was just for practice. I'll probably finish it later.
http://sleepy.[banned domain]/dm/dm_home.html

I'll try the class, although I've done it already. I don't believe I did the vertical-align correctly because the text moved to the left but not to the top of the slice.

And are you telling me that there's no way I can get rid of all of those spacer images and stuff? Does it just come with using slices? Is Fireworks a better choice for slicing than PS?
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Apr 13, 2004
  • Posts: 163
  • Status: Offline

Post May 20th, 2004, 2:30 pm

Ok. Tried it but it didn't work. When I view the slices in Dreamweaver and PS, they show the entire main box to be the slice, but when I go to edit it using html, it treats the CENTER of the box as if that's where the slice starts.
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Apr 13, 2004
  • Posts: 163
  • Status: Offline

Post May 20th, 2004, 3:14 pm

Puh. Nevermind. I figured it out. I had to add valign="top" to the table cell.

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 89 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.