Converting a PSD to CSS
# November 19, 2012 at 6:02 am
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,# November 19, 2012 at 6:06 am
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 :)# November 19, 2012 at 11:26 am
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!# November 19, 2012 at 12:03 pm
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’.
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: http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/# November 19, 2012 at 12:17 pm
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
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
and to remove bullet points
}# November 19, 2012 at 12:20 pm
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?# November 19, 2012 at 12:31 pm
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. :)
You must be logged in to reply to this topic.