3 Replies - 432 Views - Last Post: 07 October 2015 - 03:21 AM

#1 Bram Snoek  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 15-September 15

Need help with CSS of my navigation bar

Posted 05 October 2015 - 11:19 AM

Hey,

Im trying to make my navigation bar look like nav bar design.png, its what i designed.

At the moment my html code is
<DOCTYPE html>
<html>
<head>	
	<title>NAVBAR</title>
	<link rel="stylesheet" type="text/css" href="Stylesheet.css">
</head>
<body>
	<ul class="nav">
		<li><a href="#">Voor Ouders</a></li>
		<li><a href="#">Voor Studenten</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">ICT En Media Design</a></li>
		<li><a href="#">Over Fontys</a></li>
		<li><a href="#">Galerij</a></li>
		<li><a href="#">Jaaragenda</a></li>
	</ul>
</body>
</html>


And my CSS code is
	
body{
	margin: 0;
	padding: 0;
	background-image:url("Background.png");
	background-repeat:no-repeat;
	background-size:cover;
	
}

.nav{
	background-color:transparent;
	list-style:none;
	text-align:center;
	padding: 20px 0 20px 0;
}

.nav > li {
	display:inline-block;
	padding-right: 150px;
}

.nav > li > a {
	text-decoration:none;
	color:#ffffff;
}

.nav > li > a:hover {
	color:#c1c1c1
}


After this code my navigation bar looks like shitty nav bar.png

Can anyone help me on the right way, i've tryed making my font different by doing
@font_face{
	font-family:'NavFont';
	src: url('../Fonts/Font.ttf') format('truetype');
}


and then refering to the font family in the css of my navigation bar, but i cant even get that working.

Thanks in advance

Attached image(s)

  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Need help with CSS of my navigation bar

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 5074
  • View blog
  • Posts: 13,697
  • Joined: 18-April 07

Re: Need help with CSS of my navigation bar

Posted 05 October 2015 - 12:37 PM

From where the CSS file is located, if you go up one level in your folder hierarchy do you have a fonts folder? And in that folder do you really have a font file called "Font.ttf"? Something tells me you have a specific name other than Font.ttf. Also make sure your font-face definition is at the top of your CSS file. Then once you verify the file name matches, that you have a file in the right spot, that it is moved to the top of your CSS all you need then is to specify which elements use the font family.

I think the only thing you are really missing here is that you are not pointing at a valid file. So verify that first. If you continue to have trouble, put this on a website somewhere so we can actually see it and check to make sure your font file is correct.
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: Need help with CSS of my navigation bar

Posted 05 October 2015 - 12:49 PM

Note that you are missing the exclamation:
<!DOCTYPE html>

Was This Post Helpful? 0
  • +
  • -

#4 heike  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 12
  • Joined: 01-October 15

Re: Need help with CSS of my navigation bar

Posted 07 October 2015 - 03:21 AM

Just one more thing to add to what Martyr2 said - make sure that there the permissions which are set to font files enable you or your visitors to access that file.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1