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 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?
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. :)