- This topic is empty.
-
AuthorPosts
-
November 19, 2012 at 6:02 am #40867
Historical Forums User
ParticipantAt 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 #114717Watson90
MemberHi @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 :)
November 19, 2012 at 6:14 am #114719Watson90
Member+1 on @andy_unleash’s comment
November 19, 2012 at 6:23 am #114722Paulie_D
MemberAlso…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.
November 19, 2012 at 11:26 am #114743Historical Forums User
ParticipantThanks 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.jpgHope this is all okay, apologies if my coding is a complete shambles, still learning!
November 19, 2012 at 11:56 am #114747Paulie_D
MemberIn general, here’s how I would do it…all subject to circumstances.
November 19, 2012 at 12:00 pm #114745Historical Forums User
ParticipantThanks @Paulie_D this look fine, I’ll try it out now and get back to you guys, thanks :)
November 19, 2012 at 12:03 pm #114742Paulie_D
MemberIt’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/
November 19, 2012 at 12:10 pm #114748Historical Forums User
ParticipantThanks 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?
November 19, 2012 at 12:14 pm #114749Historical Forums User
ParticipantScratch that last comment, Solved! :)
November 19, 2012 at 12:17 pm #114750Paulie_D
MemberAhh…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;
}November 19, 2012 at 12:18 pm #114751November 19, 2012 at 12:20 pm #114752Historical Forums User
ParticipantThanks 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 #114753Paulie_D
MemberUnfortunately 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. :)
November 19, 2012 at 12:37 pm #114754Historical Forums User
ParticipantThanks 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? :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.