Treehouse: Grow your CSS skills. Land your dream job.

Slice Tool Photoshop

  • # March 7, 2011 at 1:23 pm

    Hello all,
    I have a question that freaking me out, hope you can help me to figure it out.
    I’ve design my new HTML website in photoshop and started to make it to tables with the slice tool.
    I’m saving as to WEB, everything working fine as you can see in the link here:

    but after I’m adding a link in the buttons, everything is going out of proportion like here:

    I know after I’m creating a link i should make the image with border=”0″
    but it still doesn’t seem to work.
    I thought maybe I’m not cutting it good in the photoshop, but I’m not sure about it because sometimes it works for me fine.

    Please help me :(

    # March 7, 2011 at 1:32 pm

    You would be better off using a non-table layout. Use css and divs to layout the site instead.

    # March 7, 2011 at 1:57 pm

    Thanks, working great…
    After i separated the CSS code into a different file,
    what is the best way the make your site in the center?

    # March 7, 2011 at 2:01 pm

    Wrap all of the content that you want to be centered in a ‘wrapping div’.

    ...your site's content...

    Then in your CSS file:

    #wrapper {
    margin: 0 auto; /* This will center your content */
    # March 7, 2011 at 4:08 pm

    Doesn’t seems to work, but i put this one and it works, is it good code?

    #wrapper {
    text-align: left;
    margin-left: 50%;

    I don’t think it’s really in the center:

    # March 7, 2011 at 5:39 pm

    Apologies, you need to give your wrapper a width for it to center properly.

    Having said that, the code that you’ve used is going to cause you problems in the long run – especially with cross-browser compatibility.

    Is this code that has been generated for you? Are you trying to learn how to code? Or?

    It changes my answer depending on what you say!

    # March 8, 2011 at 2:11 am

    I want to know like i said before
    “what is the best way the make your site in the center?”
    i tried to give my website width; it didn’t work, i don’t know if i did it right
    can you give me an example? I’ll put in my css I’ll see if it’s working


    # March 8, 2011 at 12:21 pm

    What’s the width your wanting to give to your site?

    # March 9, 2011 at 3:33 am

    let’s say for example 755

    # March 9, 2011 at 5:32 am

    html, body {
    #wrapper {
    margin:0 auto;

    That should work.

    # March 9, 2011 at 6:08 am

    I don’t know why it’s so complicated that is freaking me out.
    I just want to center my website with CSS.
    I can find many discussion about it, but can’t make it work

    # March 9, 2011 at 10:21 am

    If you are using auto-generated code from a program, you are going to run into multiple difficulties like this, where simple problems go over your head because you haven’t taken the time to learn how the code is actually working.

    Here is a very simple div structure that you can try to work from if you’d like:

    Tag line

    To solve your problem, however, you need to add position: relative; to your wrapper div because you have absolutely positioned elements contained within it.

    Remove all styling from your current #wrapper div and replace it with this:

    #wrapper {
    width: 775px;
    margin: 0 auto;
    position: relative;
# March 10, 2011 at 10:40 am

I don’t know.. it seems that i have to make a container
I guess i’m not doing something right.

Is there a chance that I’ll send you my source and you’ll try to make it?

# March 10, 2011 at 11:14 am

The #wrapper should be the container. I looked at your index3 and you are still using the absolute and -360 left properties. Just take your index3 and change your #wrapper style to TheDoc’s last block of code, and you’ll see your wrapper flow into a centered position.

Keep at it man, this kind of trial and error will give you progressively better skills as you learn!

# March 20, 2011 at 5:41 am

I guess i didn’t put it well,
Thank you, working fine with this code

#wrapper {
width: 775px;
margin: 0 auto;
position: relative;
Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.