21 replies [Last post]
rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

I've never done this before and thus in over my head. I read with interest http://csscreator.com/node/21986 but I am nowhere near being able to figure out how to create a layout from an image. A friend of mine wants to create a site based on an image he created... all I can see is a massive amount of divs would be required. In addition, the area for the content is contained in an rather confined area with graphical borders... and I have no idea how to enable that section to expand vertically with content. Here is the image... I would appreciate if someone could give me some tips on how to go about creating a layout from it. Yes I know the content should be marked up first... I can easily markup up h1 tag for the header and a ul for the menu but after that I am totally stumped.
The area that contains the text now, is the area that would have to expand vertically. TIA

AttachmentSize
image.jpg103.12 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi You would initially

Hi

You would initially slice this into 3 bits (see attached files)

You would clear off bits like buttons and text and so on.

This would be a one column design, like this:

siteunderconstruction.net/newconcept

(this is a similar slice and dice).

Take a look at how I did the link above and see if you can put these three slices in.

They may need cutting up more, but that's a start. I might take a go tomorrow, as I like the art.

AttachmentSize
fauxbg.jpg 9.08 KB
footbg.jpg 41.2 KB
headbg.jpg 74.91 KB
rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Wow... that was fast.... I

Wow... that was fast.... I had it in my mind to use 6 or 7 slices. I'll peruse your idea now and have a go. Thanks so much

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Cleava - how's this for a start?

I've done a real quick and dirty layout... I'm sure it can be tweaked and make better use of semantic markup, and my image skills suck so my slices arenot the appropriate size etc, and like I said it was done real quick.
http://www.powerbit.blowupyourtv.com/test/powerbit.htm

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 47 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Fred Do you have a better

Fred

Do you have a better quality version of the image, or is that it?

Anyway, I don't think you quite got it right, I'll take a look over the weekend.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

That's the only image I

That's the only image I have... I do have some slices that the guy sent me, but it looks like he sliced it in a way so as to use tables... I can put them out on the web or attach them here if you think it would help.

I'm going to give it another try with just your 3 images and see what happens as well. My initial try was just to see what would happen if I stuck to my original thought process. Thanks for taking the time to look at this for me, I really appreciate it. Let me know if you'd like any of the slices.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hmmm, this is indicitive of

Hmmm, this is indicitive of the wrong approach to web design via graphic artists.

Treva I think that you really will need more than three slices to to work this one properly.

rmfred are you saying that all you have is a jpg or am I mis-understanding, your mate should have sent you the .psd files complete with the layers so that you can easily select certain layers to slice hiding aspects not required, re-saving jpgs is not a great idea as you loose quality each time you do.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Hugo wrote:Hmmm, this is

Hugo wrote:
Hmmm, this is indicitive of the wrong approach to web design via graphic artists.

Treva I think that you really will need more than three slices to to work this one properly.

rmfred are you saying that all you have is a jpg or am I mis-understanding, your mate should have sent you the .psd files complete with the layers so that you can easily select certain layers to slice hiding aspects not required, re-saving jpgs is not a great idea as you loose quality each time you do.

Graphic artists... I think kk5st's signature sums it up quite well Smile At the moment all I have is the image... I'll see if I can get the actual file. And I think more than 3 slices are going to be needed as well.
thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

JPG format should only

JPG format should only really ever be used as a final rendition format not one where editing and re-saving is occurring, you need the file at worst in a lossless format i.e TIFF, PNG but better as the original .psd or whatever format was used

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Your friend has in effect

Your friend has in effect made this very awkward as the image has so many subtle shades and variations that run vertically this means that it's very hard to slice horizontally and to enable the height of the actual real web page to expand/grow, if only your friend had a clue as to how things are done :rolleyes: he then might have re-considered subtle aspects of the design that one wouldn't miss.

It looks to be 6 -7 slices to allow for some expansion and then some further ones for the knobs and stuff Smile not sure how one handles that bar at the bottom though.

I guess this would have been exported by that horrible programme that produces a hundred little slices along with nice nested table arrangement Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Hugo wrote:Your friend has

Hugo wrote:
Your friend has in effect made this very awkward as the image has so many subtle shades and variations that run vertically this means that it's very hard to slice horizontally and to enable the height of the actual real web page to expand/grow, if only your friend had a clue as to how things are done :rolleyes: he then might have re-considered subtle aspects of the design that one wouldn't miss.

It looks to be 6 -7 slices to allow for some expansion and then some further ones for the knobs and stuff Smile not sure how one handles that bar at the bottom though.

I guess this would have been exported by that horrible programme that produces a hundred little slices along with nice nested table arrangement Smile

My sentiments exactly... I already told him this was going to be a NIGHTMARE to code and to layout with the left and right side border variations etc...
Oh well; live and learn I guess. I'll see what happens when he send me the psd file...
I'll keep you and treva posted.
Thanks

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

OK I got a tif and psd file.

OK I got a tif and psd file. Would either of you like to take a look at em?
Thanks

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Getting a little closer...

Getting a little closer... new link is here
http://www.powerbit.blowupyourtv.com/test/grandpafred/index2.htm

Drop down menu has major problems in IE

think I've fixed the IE problem with the drop down menu

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

rmfred you seem to have done

rmfred you seem to have done an excellent job with this, sorry I lost track of things slightly as have had problems with adsl on and off for last couple of weeks.

It looks to be pretty functional in both FF and IE6, I did notice that there is a line up problem with the hover backgrounds on the forward/backward buttons, I think you'll need to set menu_buttons to position relative and change a#right to something like 72px 46px but I lost track of the left graphic so this may be slightly misleading but I think you do need to work the positioning with the anchor absolute taken from a context of it's parent menu_button

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Hugo wrote:rmfred you seem

Hugo wrote:
rmfred you seem to have done an excellent job with this, sorry I lost track of things slightly as have had problems with adsl on and off for last couple of weeks.

It looks to be pretty functional in both FF and IE6, I did notice that there is a line up problem with the hover backgrounds on the forward/backward buttons, I think you'll need to set menu_buttons to position relative and change a#right to something like 72px 46px but I lost track of the left graphic so this may be slightly misleading but I think you do need to work the positioning with the anchor absolute taken from a context of it's parent menu_button

Hugo... thanks for the reply... no worries on having lost track...
Think I have everything sorted out now?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Looks spot on (at least in

Looks spot on (at least in FF) good job, did you get the design simplified at all? not so may little shade variations.

How many slices in the end? looks to be about 8 plus 3 or 4 overlays

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Did get him to change the

Did get him to change the screen area slightly to remove some of the gradient which really helped. Still ended up with about 9 slices and a couple of overlays... gotta love graphic designers Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think that getting it

I think that getting it simplified a little was the key , from what I remember there was just too much fiddly detail in shading , the sort of thing that a graphic designer would just not appreciate how awkward it would be to find a point at which one can slice and repeat at.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

I can now anticipate some

I can now anticipate some problems with the drop down menu in IE if I put content into the #screen_header area... I've tried z-index values on various elements, but can't get IE to play along... back to the drawing board I guess

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can you put something in so

Can you put something in so we can see the problem?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Hugo wrote:Can you put

Hugo wrote:
Can you put something in so we can see the problem?

your wish is my command

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Interesting , not sure at a

Interesting , not sure at a quick glance why it's loosing focus in that way; pos:rel and z-index aren't holding it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me