Adam Hodgson

# 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,

Watson90

# November 19, 2012 at 6:06 am

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

Andy Howells

# November 19, 2012 at 6:11 am

http://codepen.io is your friend.

Watson90

# November 19, 2012 at 6:14 am

+1 on @andy_unleash’s comment

Paulie_D

# November 19, 2012 at 6:23 am

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.

Adam Hodgson

# 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!

Paulie_D

# November 19, 2012 at 11:56 am

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

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

Adam Hodgson

# November 19, 2012 at 12:00 pm

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

Paulie_D

# 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’.

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: http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/

Adam Hodgson

# November 19, 2012 at 12:10 pm

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?

Adam Hodgson

# November 19, 2012 at 12:14 pm

Scratch that last comment, Solved! :)

Paulie_D

# 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

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

# November 19, 2012 at 12:18 pm

http://www.cssreset.com

Adam Hodgson

# 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?

Paulie_D

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