Editing Slices

  • 360Varial
  • Graduate
  • Graduate
  • 360Varial
  • Posts: 163

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • 360Varial
  • Graduate
  • Graduate
  • 360Varial
  • Posts: 163

Post 3+ Months Ago

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

Post 3+ Months Ago

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
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

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.
  • 360Varial
  • Graduate
  • Graduate
  • 360Varial
  • Posts: 163

Post 3+ Months Ago

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
  • 360Varial
  • Posts: 163

Post 3+ Months Ago

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
  • 360Varial
  • Posts: 163

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 55 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.