Photoshop to CSS

[Hellcaster]

Hi, after learning html, and some CSS I finally made a Layout on Photoshop for my very first website, I Guess you've been asked thousand times about this, but now I need to slice this and get it into a 2 colums fixed layout, But I don't know how to start, I still can't find a decent tutorial about slicing, Any help is really apreciated.

Here is my layout:
http://i92.photobucket.com/albums/l1...lackLayout.jpg

[karinne]

First things first ... DON'T use the slice tool in PS

Gimme a minute, I'll show you what I would cut and use as backgrounds

[karinne]

A bit rough but ... something like this

BlackLayout-cuts.jpg

I just did 2 of the menu items but ... you get the picture

[Hellcaster]

I see ,so I only need to use those images as backgrounds, great. I'll try to do it like this. Thank you.

[karinne]

Yes ... most of them.

Good luck!

[AdRock]

It might be worth having a look here http://www.sitepoint.com/article/des...site-photoshop

[karinne]

Oh No!!! Please don't follow that! It's dated 2002 and it wants you to use the slice tool in PS which creates HTML with tables

Like I said in my first reply, DON'T USE THE SLICE TOOL IN PS!

[Hellcaster]

Ok, thanks.

[Hellcaster]

A quick question : Can I stablish how many times do I want an image to repeat?
In the main column as an example, it has a little header, and the little footer are diferent than the center, how would I set all in the same div?O_o I would want the center to repeat vertically, but not the header and the footer.

[Jack Franklin]

I'm not quite certain I have understood your question, but if you want the background image on a div to repeat, use:

Code: Select all

#div {
background-image: image.jpg;
background-repeat: repeat-x;
}

Or have I got that completely wrong?

Jack

[Hellcaster]

Yes, I know how to do that, thank you, basicly I need to know how to do this:
http://i92.photobucket.com/albums/l1...ackLayout2.jpg
It has 3 sections and If i follow as karinne told me the center needs to be repeated a certain amount of times, but no the first or the third section.

I hope I explained myself::P

[karinne]

The middle section should only be a very small image in height ... like 5 pixels or something. You don't need that big image. Just apply the repeat-y to the main div and you should be all set.

[Hellcaster]

Yes I see, I've got another question: when i try to set a background image the code should look like this as I've seen on many sites:

Code: Select all

background-image:url(image.jpg)

but right now I have not uploaded my page to any webhost and I got all my images on my pc. Is there anyway to changue this url(img.jpg) so I can use the images on my pc, or do I need to get a hosting service first? I would like to finish my page first and then get the webhost...:P

[alexgeek]

say you webfiles are in c:\web\
as long as the html page and the image page are in that folder it will work, like:
c:\web\index.html
c:\web\img.jpeg

[Hellcaster]

Cool It works now, thank you very much guys.^^

[marSoul]

Why do not use the slice tool in photoshop ?!!

[karinne]

Well ... the slice tool in Photoshop create you HTML document for you but it's just as bad as using the WYSIWYG editor in Front Page

It creates VERY un-semantic code using tables for layout and WAY too many images.

[marSoul]

I think it depends on user that how use the slice tool to control how many images outputted .
I think in most way it is useful tool, specially layer based slice tool.

[karinne]

Probably ... but in my experience not many images from the mock-up are needed so it's best to just code the HTML and CSS to try and get most of the layout and colors properly. Then, just get what you absolutely need from PS.

[Hellcaster]

Hi, I know it's been a while, but I finally finished my very first CSS layout ,I'd like to thank you all guys, specially karinne for the help, finally it looks like this:
http://www.freewebs.com/iamgio/
I will be playing with CSS a little more
and experimenting with my page.
Once again thank you all for the help