Problem with inline navbar and question on webfonts

DezUk · 6 Nov 2013 at 14:59

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?

Code:

.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 · 6 Nov 2013 at 15:49

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

Code:

.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 · 6 Nov 2013 at 16:35

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 · 6 Nov 2013 at 16:36

DezUk said:
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:

Code:

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

spoffle · 6 Nov 2013 at 16:39

Then add an apostrophe to "Gordons".

DezUk · 6 Nov 2013 at 16:48

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 · 6 Nov 2013 at 18:50

DezUk said:
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 · 6 Nov 2013 at 21:32

Cheers mate will have a play around with your suggestions.