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

FabienO · 20 Mar 2011 at 00:59

Care to add a link to your site? Or post the code.

As for the menu bar on that site, it's a sprite. If you're unsure how to use sprites, just read the tutorial I linked... Here's the image they used.

They use one sprite per link. Should be fairly simple for you to edit the image to make it longer or shorter without having to stretch the whole image.

Their style

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!

FabienO · 20 Mar 2011 at 20:27

Plenty of ways to skin this cat. They use one image per link and make the image the right size to fit the text.

Personally, I would just make it in CSS3 and then use CSSPIE to make it work in IE.

The less images you use, the better.

Don't really understand what you mean about attaching it to the header. What are you calling the header?

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

FabienO · 20 Mar 2011 at 21:55

It's a list. The navigation that is.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="last">Item 3</li>
</ul>

then css it appropriately.

ul { list-style-type: none }
li { display: inline; float: left; margin-right; 5px; }
li.last { margin-right: 0px; }

As for the CSS3 implementation, it depends on site requirements, as a developer it's a good focus to push people to upgrade their browsers, not for us to cater to old needs; however, if necessary that CSSPIE makes it compatible for IE6-8 on CSS3.

Those rounded corners have transparency on the corners, thats why you can still see the BG. Take a look at that site in IE6 where it's not supported. Lots of grey areas. CSSPIE would actually work 'better' in this scenario.

I can't see an arrow in the footer re the navigating to top. Maybe it's an anchor?

Just a thought? Space/Planet guff? I don't see any of that on the site. Definitely the right link?

LOL I just realised you're talking about the tutorial on the site, not the physical site itself. Rofl!

Ok. :X

Please provide the code to your site, or link if it's up anywhere...

analog · 20 Mar 2011 at 22:22

I'm going to try help but i think I might end up confusing matters and Fabien sounds like he knows a better way than what I'm about to suggest.

For the header I'd probably slice it something like this:

Just make those green bits part of the header.

And the footer like this:

Save off the logo as a gif with a transparent background then take a slice of everything from the top of the logo to the bottom of the page and repeat that, you'll have to be careful if you're keeping the pattern though.

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..

analog · 21 Mar 2011 at 10:54

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.

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?

analog · 6 Apr 2011 at 15:01

Erm, if what i said was correct and you follow it there should be no problems i can foresee, give it a go how you think then post up the results I'm sure someone will help out.