Website design help

Shicky · 19 Mar 2011 at 21:45

Two problems I need help with if ppl could be so kind. I am using this design as influence: http://www.hv-designs.co.uk/2008/10/03/personal-portfolio-layout-2/

Im basically stealing the nav design and the small return to top arrow. Questions being how do I get the nav into my design? Just slice it up individually in photoshop or as one unit?

With the return to top arrow, I currently have it in but sitting too low. How do I get it to basically sit on and above the footer borderline? With the text shop I slice it with the design or just write it under?

Thanks for any help you can provide

Shicky · 20 Mar 2011 at 20:09

Sorry I must not have made myself too clear. I meant I am using the actual PSD as influence for what I am doing, not the hv-designs site itself. In that case I don't think the sprites still applies as I was simply going to make the text inside the nav item white/black depending if it was selected or not. But I am still concerned about making the nav due to how close it is to the header and the way it attaches, I simply dont know how to go about it. Is it as simple as slicing it up in several sizes?

Any ideas on the footer part I was on about? Hoping to get this hosted in the coming days to make situations like this much simpler!

Shicky · 20 Mar 2011 at 20:37

the sort of space/planet guff they have going at the very top. I thought the way they're both rounded, it may cause issues getting the nav to sit just under it and look okay.

I was told it would be best to avoid the CSS3 route as it isn't fully implemented yet, and as this is meant to be a popular webby, which will be run on all sorts of horrible machines/browsers/resolutions, it would be best to go the image route?

Do you have any idea on the footer arrow for navigating to the top?

So far it really isn't going to plan lol but I am confusing myself over simple things. How would you get the containers to sit an even distance away from eachother? Just use padding/margins? I figured this would cause issues with different resolutions

Shicky · 21 Mar 2011 at 00:22

Lol yes FabienO, you've got me now, sorry if I was unclear!

Analog I basically sliced it by hiding the nav so I now have the header in their perfectly. However there is no nav and now I think with the slight curve I have wrecked it. So I am curious if I should lift it all as one image (both header & nav) ? Or how exactly to get it right?

As for the footer I have it done correctly apart from the arrow I mention. I sliced it out of a PSD I made fine but I dont know how to include it correctly. Right now its sitting in my footer container but it sits too low obviously. I dont know how to make it so it's effectively crossing over 2 divs or how to give that effect..

Shicky · 28 Mar 2011 at 20:06

Sorry analog forgot to comment on this, footer was a cake walk after you showed me the above, so simple but I never would have thought of it no doubt. Still need to get round to the navigation, putting it off at the moment as the contents of the site aren't too clearly defined yet But don't think it will be a problem after your advice, thank you

Shicky · 6 Apr 2011 at 12:10

analog said:
It sounds like you're wanting to use text as links so you could just cut the header and nav together however it could impact on the sites performance (load time).

Personally I'd slice the header as above and then cut out the buttons on their own using the entire thing as a link, this is were Fabiens sprite link will probably come in handy.

As for the footer I can't see what you've done so its hard to say, but the method I've suggested should keep everything in line, I still tend to think about things like this in terms of tables either rightly or wrongly.

Afraid this isn't coming to me as easy as I thought with regards to the navigation. Basically I should cut out the nav as one big unit, one with all white text, one with black text, then use relative positioning in order to make sure it uses the correct version of the button depending on the click? Will there not be issues with this due to the lack of spacing between links or is this where I just have to be a king of judging relative positioning?