PSD to HTML5/CSS

[virtual]

You could do this

#featureBar #navlist li {

border-right:1px solid #FFFFFF;

or use a background image on the same tag.

[TheN00b]

Thanks Virtual, that works fine, although it doesn’t have the cool effect of the image … it still works well enough. Thank You :D

I want your opinion on something: How should I handle the background of the Header (where it says Grafpedia logo) ?

At the moment I have an image that keeps repeating. But wouldn’t it be better to use new technology and use the CSS3 Gradients ?

I’ve got the same (image approach) to the footer as well.

Thanks

[virtual]

Hi,
You didn’t see the rest of my comment – you can use a small background image on the same tag, just make sure the image is the same height as the li tag.

The bg image works just fine and has no cross-browser issues, I would stick with it. At your level of skill I would use the simple uncomplicated solutions.

[TheN00b]

Ok Virtual I shall do that. Although I did the bottom box with CSS3 Gradients and it wasn’t really complex, infact .. it was less work than doing images. But I shall leave the images since they are already done.

My next challenge is finding an easy way to achieve this:

http://i56.tinypic.com/10o1gdv.jpg

In the SubContent Div. What would be the best method ?

Sorry about all the questions, but you guys are the best in the business of helping n00bs. I’d greatly appreciate it.

Thank You.

[TheN00b]

Anyone ?

I have drawn what I have in mind in Photoshop, but what I want to know is … is it the best approach ?

http://i54.tinypic.com/k3n6np.jpg

Note: The Coloured Boxes are Divs

Is there some other method that requires less work, and give more flexibility ?

I would greatly appreciate any help.

Thank You.

[virtual]

A lot depends on whether the text in those boxes is going to change, and possibly expand. Only you know the answer to that question. Just try and code it yourself, try different solutions, experience is the best learning curve. The more you code the better you understand, hopefully :-)

[TheN00b]

I’m thinking of turning it into a wordpress theme after I’ve done the static HTML and CSS.

The text will remain of that size, so that no overflow of texts occur ..etc

I can do that, but it could take ages, then at the end I find out .. there was a better way to do .. lol I’ll be upset that all the word I had done was useless in terms of what I’m trying to achieve.

Anyways I’ll give it a go.

Thanks

[Bob]

I think that using a wrapper div for those 9 boxes would be a good thing to start with, and then use maybe 3 divs inside that (where each div is 3 boxes high) or maybe even 9 divs, one for each box.
But I’m not expert in this, so there are probably better ways to do this :)

[TheN00b]

Yep that is what I went with.

You can see the result Here.

What do you guys think ? Did I make the right choices ?

I’ve just got the 3 boxes on the right to do now.

[TheN00b]

Ok All Done.

However I’m stuck again.

Can someone please tell me how I can extend the header and footer bits to full width ?

Thank You

[mark7568]

thanks for this help..

[virtual]

Put them outside the wrapper div….otherwise they are limited in width by the wrapper.

[TheN00b]

Thanks Virtual, I did that, but the content of the div is not centered anymore ! :(

How do I get them centered again ?

Thanks

[Bob]

Wrap the content in a div with id=”wrap”. Like this:

Welcome to Grafpedia

[TheN00b]

so should I change the wrap ID to a wrap Class … since IDs are only suppose to be used once ?

[Author]

Posts