Printable Version of Topic

Posted by: afleck924 Feb 11 2010, 09:49 PM

Hello,

I need help converting the slice images of the template into html/css and help with the alignment. I don't get the concept of it. Can someone explain to me how or if someone could work on this with me, it been taking me a while to understand.

I have the template to show if I can get helped

Thanks

Posted by: pandy Feb 11 2010, 11:04 PM

We don't know if we can help you before we've seen what you've got. And please, if you can, post the URL to the page.

Posted by: afleck924 Feb 12 2010, 12:22 AM

I have a psd document to show the template more, I'll need your email to show you, but in the meanwhile this is what the link makes the template look like: http://i242.photobucket.com/albums/ff123/D...emplateTest.png the orginal site that we are getting to and from is www.analystwx.com , same info just need to convert which is what the title explains.

Posted by: afleck924 Feb 12 2010, 12:22 AM

Just found out that link does not work anymore, I'll need to send the psd to your email.

Posted by: pandy Feb 12 2010, 12:35 AM

I meant the web page you have problems with, not a PhotoShop mockup.

Posted by: Hunter Outten Feb 12 2010, 11:28 AM

basically what need is help slicing the images out of our photoshop version of our template design. what we need help is correctly slice out the images on here and create the html/css so we can load it up on our current site. www.analystwx.com

heres a smaller version image of the template

http://i242.photobucket.com/albums/ff123/DSGaccuwx898/TemplateTest.png

Posted by: pandy Feb 12 2010, 11:33 AM

Do you want someone to do the whole thing for you? I'll move the thread to the job forum then. Maybe you should give people an idea of how much you are willing to pay though.

Posted by: Hunter Outten Feb 12 2010, 11:42 AM

that would be nice thank you

Posted by: afleck924 Feb 12 2010, 09:16 PM

I'll pay someone $25 to do this for us.

Posted by: Brian Chandler Feb 13 2010, 01:22 AM

You may find someone who agrees to do "slicing" for $25, but I suspect it will in the end be a waste of $25.

The problem is the popular misconception that a website is created by Making a template (i.e. a mock-up image), then Slicing it. If the end website is really a fixed image, you may as well just send a large png image. If it isn't, this approach does not work *at all*.

You need someone to build a page to interface with your database (these maps and so on are in a database, right?) along the lines of your mockup. I would have thought you need to add at least one zero to $25 to expect a reasonable job of this. But you need to start with the backend DB stuff really...
Your mockup only includeseems to have one piece of "furniture" graphic

Posted by: afleck924 Feb 13 2010, 10:10 AM

Ok, I think we went a little opposite ways on understanding this. We don't need the whole thing done, the html's are easy to do, we just need the header, layout, and background sliced into css, css is the big problem, just the layout, background and header. the images on that templates are just an example.

Posted by: afleck924 Feb 13 2010, 10:14 AM

So pretty much you see a blank template, thats pretty much what it is and such, we need the style sheets done.

Posted by: Darin McGrew Feb 13 2010, 03:03 PM

Looking at your PNG mockup (hardly what I'd call a template), I'd put the company name in an h1 element, and use a background image behind it.

You can make the background image very wide so it covers the width of the display area regardless of the size of the browser window (2560px should do for now), or you can make the background image tile to cover the full width of the display area. There's also a hybrid technique that uses two background images. One background image tiles. In front of that, another background image doesn't tile. The edges of the non-tiling image blend with the tiling background image, so the whole thing looks seemless. There's a brief discussion here:
http://code.google.com/apis/themes/examples/frauenfelder.html

Below that is a horizontal menu. There's a nice explanation of how to do that here:
http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/

The rest is a basic http://lmgtfy.com/?q=css+two+column+layout.

Posted by: pandy Feb 13 2010, 03:13 PM

Ha! A new one.