Problem with inline navbar and question on webfonts

[DezUk]

I am working on this little project

http://www.rdoyle.info/projects/gordonstaxis/v3/

As you can see there is an issue with the navbar, all the links should be inline but are showing as a list. I have this code which I would have thought would force it to be inline?

.nav {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

nav li {
	display: inline;
}

.nav a {
	display: inline-block;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #ffffff;
	padding: 10px;
	text-transform: uppercase;
	text-decoration: none;
}

I'd also like to make the banner into web fonts making it more efficient when loading and in search results. How can I go about this?

Cheers!

 

[GravyMonster]

You've missed '.' from your class selector:

.nav li {
	display: inline;
}

Add that in and it works.

Also, using webfonts couldn't be easier. Use Google fonts, pick the one you want, include the font CSS file, amend your CSS to use the font, job done.

 

[DezUk]

Cheers mate, was up at 5am this morning looking at that so that might answer as to why I didn't see the missing .

Time to go and read up on these web fonts.

One other thing, the nav links need better spacing both horizontally and vertically, any tips on that?

 

[GravyMonster]

One other thing, the nav links need better spacing both horizontally and vertically, any tips on that?

You can add a bit of horizontal padding to the li elements, try this:

.nav li {
	display: inline;
	padding: 0 20px;
}

 

[spoffle]

Then add an apostrophe to "Gordons".

 

[DezUk]

Sorry 2 more questions

How can I get the links to center vertically on the navbar?

How can I get the yellow main backround to extend a little further below the footer?...... as shown here.

 

[Th3M8dH8tt3r]

Sorry 2 more questions

How can I get the links to center vertically on the navbar?

How can I get the yellow main backround to extend a little further below the footer?...... as shown here.

Use line height to set the height of the li elements. Line-height is a great property. if you have line height of 40px and font-size of 20px, it will put 10px padding on the letters above and below...boom, vertical alignment!

As for the footer, make a container that encapsulates all the elements on the page that the background so apply to. Stick 20px bottom padding on and that'll give you your yellow past the footer. Will probably need a little bit more work then that but it's the essence of it.

 

[DezUk]

Cheers mate will have a play around with your suggestions.