Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
Home
Discussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2003


Tip: Looking for answers? Try searching our database.

repositioning photoshop slices

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
salty_dogs - 29 Oct 2003 20:18 GMT
im trying to use css instead of tables with photoshop's slicing tool. i have
an image that was sliced into 4 images and a resulting html document. this
html code is found below. my question is this:

it writes the code with 'absolute' positioning, therefore the slice images
align based on the upper lefthand pixel of the browser window. i would like
to reposition all the slices on the page, lets say at another absolute
position, left:100px and top:100px. any idea how to do this?

<HTML>
<HEAD>
<TITLE>testslice</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (testslice.psd) -->
<STYLE TYPE="text/css">
<!--

#testslice-01 {
position:absolute;
left:0px;
top:0px;
width:367px;
height:201px;
}

#testslice-02 {
position:absolute;
left:367px;
top:0px;
width:433px;
height:201px;
}

#testslice-03 {
position:absolute;
left:0px;
top:201px;
width:367px;
height:249px;
}

#testslice-04 {
position:absolute;
left:367px;
top:201px;
width:433px;
height:249px;
}

-->
</STYLE>
<!-- End ImageReady Styles -->
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px;
margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (testslice.psd) -->
<DIV ID="testslice-01">
<IMG SRC="images/testslice_01.jpg" WIDTH=367 HEIGHT=201 ALT="">
</DIV>
<DIV ID="testslice-02">
<IMG SRC="images/testslice_02.jpg" WIDTH=433 HEIGHT=201 ALT="">
</DIV>
<DIV ID="testslice-03">
<IMG SRC="images/testslice_03.jpg" WIDTH=367 HEIGHT=249 ALT="">
</DIV>
<DIV ID="testslice-04">
<IMG SRC="images/testslice_04.jpg" WIDTH=433 HEIGHT=249 ALT="">
</DIV>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
Reply to this Message
kchayka - 29 Oct 2003 22:13 GMT
> im trying to use css instead of tables with photoshop's slicing tool.

There seems to be something contradictory here.  If you are positioning
with CSS rather than tables, why oh why are you using image slices at all?

Post a url, rather than code.

Signature

To email a reply, remove (dash)un(dash).  Mail sent to the un
address is considered spam and automatically deleted.

Reply to this Message
salty_dogs - 29 Oct 2003 23:36 GMT
sorry i don't have a free url to post to at the moment.

the page that i'm working on is completely graphic and all the links will be
rasterized text. i'm also using photoshop as an interactive way to 'design'
the page. slicing seems to be a simple way to make linking areas on the
page. i am new to html, but what i've heard is that tables are being
replaced by css positioning techniques. am i wrong?

> > im trying to use css instead of tables with photoshop's slicing tool.
>
> There seems to be something contradictory here.  If you are positioning
> with CSS rather than tables, why oh why are you using image slices at all?
>
> Post a url, rather than code.
Reply to this Message
Owen Jacobson - 30 Oct 2003 00:55 GMT
> sorry i don't have a free url to post to at the moment.
>
[quoted text clipped - 4 lines]
> that tables are being replaced by css positioning techniques. am i
> wrong?

You're not wrong, but you are going about it a rather non-optimal way.  

One approach is to think in layers, rather than in blocks of space: you
can have one background image that contains all your decorative fluff,
and then place text (or even other images) overtop of that with CSS
positioning, without slicing up either the background or the overlaid
images.
Reply to this Message
salty_dogs - 30 Oct 2003 03:12 GMT
hey thanks owen:

that makes a lot of sense. i'll keep visualizing the layout in photoshop,
use a separate background and grab link/changeable sections and layers via
slice, (noting their 'left' and 'top' values for css positioning.)

do you incorporate nested <div> tags? is there a limit to the depth?
essentially what im trying to do is locate a block within a block relative
to the block's content edge. i gave the childDiv and parentDiv a color
background property, so they actually are empty of content (just a block of
color.)

<body id="none">
<div id="parentDiv">
   <div id="childDiv">
       <div id="babyDiv">
       <p id="none"><img src="temp.jpg"/></p>
       </div>
       <div id="babyDiv2">
       <p></p>
       </div>
   </div>
</div>
</body>

does this look right?

> > sorry i don't have a free url to post to at the moment.
> >
[quoted text clipped - 12 lines]
> positioning, without slicing up either the background or the overlaid
> images.
Reply to this Message
PeterMcC - 30 Oct 2003 09:24 GMT
>>> im trying to use css instead of tables with photoshop's slicing
>>> tool.
[quoted text clipped - 12 lines]
> that tables are being replaced by css positioning techniques. am i
> wrong?

A little aside from your principal issue - hope it's OK to wander a little -
but that method is going to create serious problems if you're hoping to get
decent search engine listings.

Signature

PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Reply to this Message
kchayka - 30 Oct 2003 16:52 GMT
> sorry i don't have a free url to post to at the moment.

You really should find some place to upload test pages.  It will make
things easier for everyone.  Does your ISP give you any web space?

> the page that i'm working on is completely graphic and all the links will be
> rasterized text. i'm also using photoshop as an interactive way to 'design'
> the page. slicing seems to be a simple way to make linking areas on the
> page. i am new to html, but what i've heard is that tables are being
> replaced by css positioning techniques. am i wrong?

No you are not wrong about using CSS instead of layout tables, but I
think you are wrong about using slices at all, at least if your plan is
to use this as the final product.  I've seen enough sites "designed"
from just image slices to know they are pretty ghastly from both a user
and developer standpoint.

The images are never properly optimized so these pages are generally
very slow to load.  Each image is an added server call, which makes
loading even slower.  The text will not be resizable, so some portion of
your visitors won't be able to read it.  Image slices rarely have
appropriate ALT text, so the site probably won't be usable with image
loading off.  The slicing process makes a complex table layout that not
only creates a pile of bloated tag soup for code (adding to load time),
but likely does not linearize well so the page won't make any sense in
some browsing situations.  I imagine you plan to add JavaScript
rollovers, too, which add other twists to the mess.  And I haven't even
gotten to maintenance yet.

I can't tell from your code snippets what you are really trying to
accomplish, but I'm pretty sure image slices are not the best way to do
it.  And using graphics for text is often a bad idea, anyway.

Signature

To email a reply, remove (dash)un(dash).  Mail sent to the un
address is considered spam and automatically deleted.

Reply to this Message
David Dorward - 30 Oct 2003 07:28 GMT
> it writes the code with 'absolute' positioning, therefore the slice images
> align based on the upper lefthand pixel of the browser window.

They are positioned from the edges of their nearest positioned ancestor.
Wrap them in a <div>, and make it positioned (i.e. position: absolute; or
position: relative;)

Signature

David Dorward                                       http://dorward.me.uk/

Reply to this Message
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage
Start New Thread
Enable EMail Alerts
Rate this Thread



©2009 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.