Converting a PSD to CSS

[Historical Forums User]

At the moment I have a great PSD template that i’d like to work with but I’m having some trouble converting it to CSS3.
I have the background working fine and its 100% scalable however, when i try to create a navigation bar i encounter some problems, I can’t seem to controll the list to where i want,

I understand there’s little to go on but any suggestions would be appreciated.

Thanks,

[Watson90]

Hi @AdamHodgson

Hmm, there could be a wide range of answers here but my guess is that it sounds like you haven’t got your unordered/ordered list or list items in a wrapping div, or even the html5 ‘nav’.

Maybe provide us with a link with what you’re talking about? Such as the code you’ve done already and maybe we could help you further :)

[Watson90]

+1 on @andy_unleash’s comment

[Paulie_D]

Also…it would be helpful to see what the PSD looks like. I realise that you can’t link a PSD here but you could link in a jpg as long as it’s on a web server.

[Historical Forums User]

Thanks guys, sorry for the lack of information, I was at school on my phone.
You should be able to find the coding here: http://codepen.io/anon/pen/KdbIf
And an image of the template on my public drop box : http://dl.dropbox.com/u/83767563/Template_Home.jpg

Hope this is all okay, apologies if my coding is a complete shambles, still learning!

[Paulie_D]

In general, here’s how I would do it…all subject to circumstances.

http://codepen.io/Paulie-D/pen/bdyjJ

[Historical Forums User]

Thanks @Paulie_D this look fine, I’ll try it out now and get back to you guys, thanks :)

[Paulie_D]

It’s not perfect but it will depend on whether you really want to use a lot of images for the navbar. A lot of that can be done with simple colors and gradients.

If you do want to go the colors/gradients route then an additional ‘wrapping’ div might be necessary as the logo breaks out of the ‘navbar’.

All doable.

The real ‘trick’ to learn is about ‘floats’ and how they affect document flow and how to make sure that they work how you want them…

…oh and the various ways to make sure that they stop doing what they are doing once you are done with them.

This is a little old but the basics are still the same: https://css-tricks.com/video-screencasts/42-all-about-floats-screencast/

[Historical Forums User]

Thanks man this is working great! How do I remove the underline’s and bullets, Is it the text decoration attribute set to none? And if so, Do i apply that to the anchor tag instead of the list?

[Historical Forums User]

Scratch that last comment, Solved! :)

[Paulie_D]

Ahh…You should look into a reset css which strips out a lot of that stuff or perhaps ‘normalize.css’ (also google).

There are a number of resets around starting with the man who ‘created’ the idea Nicolas Meyer

http://meyerweb.com/eric/tools/css/reset/

but they are now incorporated into a lot of frameworks including (HTML5 Boilerplate – Well worth a look) and Twitter Bootstrap

Yes, to remove underlines it’s as simple as

a {
text-decoration:none;
}

and to remove bullet points

ul {
list-style: none;
}

[Paulie_D]

http://www.cssreset.com

[Historical Forums User]

Thanks much appreciated, one more question before I can ‘solve’ this post, On your Pen you added a
border-left: 2px groove lightgrey;
which extends the entire length of the nav bar, Is there any way i can set some sort of Height attribute to limit the vertical size of this?

[Paulie_D]

Unfortunately not…at least not yet AFAIK.

There are a couple of ways to ‘cheat’ this, the simplest being to slice out the image of the groove and use it a background image positioned to the left side of the li.

The other, which is even more of a ‘cheat’ is to make the actual ‘a’ link only as tall as the ‘groove’ but not as tall as the list item and use the same border technique as I did but this means that there is an area above and below the link which is still part of the list isn’t but isn’t clickable.

On balance, I’d go with a background image…easier all around.

BTW, the only reason I used it was to show that you can do a groove without actually using an image. :)

[Historical Forums User]

Thanks guys, Case closed! Been very helpful easy to understand, great to see just how friendly the internet community can be.

I’ll keep you updated with how everything unfolds if you want? :)

[Author]

Posts