Its FINALLY UP!

You did not leave it out completely. You typed it incorrectly (as @Mittineague explained); therefore it was not recognized. It happens. :slight_smile:

Tahoma is a valid font name. Perhaps there was a space after Tahoma?

Please let us know when you have updated the site. :slight_smile:

About your navbar! You’re using padding on all elements within the navbar and on the li’s even a padding that extends outside the navbar. Try this:

CSS

nav{
	width: 100%;
	padding: 1rem 0;
	background-color:darkgreen;	
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 20px;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;	
}

nav li {
	margin: 0 .5rem;
	padding: 0;
	display:inline-block;
	vertical-align: middle;
}
nav a {
	display: block;
	padding: .2rem .3rem;
	text-decoration:none;
	color: yellow;
	text-align: center;
}

nav a:hover {
	color:orange;
	background-color:#dadada;
}

HTML

<nav>
   <ul>
   <li><a href="articles.html">Articles</a></li>
   <li><a href="blogs.html">Blogs</a></li>
   <li><a href="about me.html">About Me</a></li>
   <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Thanks so much for helping out. My saving the file with a lower case letter did NOT workI had to go in to the GoDaddy site and change the filename there, to make FileZilla see it! Weird!

I’m a bit lost. Who are you replying to? Are we still working? Sorry for my confusion.

#nav {
    width:100%;   /* DELETE ME! */
    padding:1rem 0;
    background-color:darkgreen;
    height:50px;   /* DELETE ME! */
    font-size:40px;   /* em is better than px */
    font-weight:bold;
    font:tahoma, geneva, sans-serif;  /* either relocate before "font-size:" or  change to "font-family:"  
}

If you are listing only font family names, it is better to use the “font-family:” property as @donboe has shown.

1 Like

https://validator.w3.org/nu/?doc=http%3A%2F%2Fjimgwilliams.com%2F

Are you aware that local web-pages files can be validated before uploading to the server? This eliminates having to wait until the web-page is online before validating and performing numerous fixes and having to upload again and again and again…

Check out the folowing validation test page and select “text input” from the Check by drop-down list box.

A even better way of validation which I believe is only available in FireFox is to add the following Extension:

I use it by keeping the debugger open all the time and monitoring the “Html validator” tab output. Once editing is complete the web-page can be safely uploaded to the server.

1 Like

2 Likes

@ronpat The 100% width was my wrong doing :frowning:

@lombardy160. As @ronpat allready stated you should not set a height on the nav div . Because it is still not vertically centered, which was one of the requirements in OP… You also still have the padding in the li’s. Take that out and set a left and right margin instead. Also like @ronpat said use em for your font-size. You have allready set a font-size for the body

body{
	background-color:#e8b88a;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
}
#nav{
	padding: 1rem 0; // or whatever top and bottom spacing you want
	background-color:darkgreen;	
    font-family: Tahoma, Geneva, sans-serif;
	font-size: 2.5em;
	font-weight: bold;
}
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;	
}
#nav li {
	margin: 0 .4em; // or whatever left and right spacing you want
	padding: 0;
	display:inline-block;
	vertical-align: middle;
}
#nav a {
	display: block;
	padding: .2em .3em;
	text-decoration:none;
	color: yellow;
	text-align: center;
}
#nav a:hover {
	color:orange;
	background-color:#dadada;
}

Just use it like this and your nav div should be ok

I agree that shorthand properties can be confusing to get right, but I think that will cause problems like that (ignored at best, break all the CSS at worse)

If font is specified as a shorthand for several font-related properties, then:

  • it must include values for:
    • <font-size>
    • <font-family>

And it should be used with awareness that it might override other CSS

As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font, the longhands font-stretch, font-size-adjust, and font-kerning are also reset to their initial values.

3 Likes

@Mittineague Hahaha. You’re right. i took that last part from his example, where in my initianal post I used font-family as it should

1 Like

font:tahoma, geneva, sans-serif;

I may be wrong, but I understood that font names were case-sensitive. Perhaps that’s only on Linux/UNIX systems, but I still wouldn’t take the chance.

2 Likes

AFAIK, they should work either way
https://www.w3.org/TR/2018/CR-css-fonts-3-20180626/#font-family-casing

As part of the font matching algorithm outlined below, user agents must match font family names used in style rules with actual font family names contained in fonts available in a given environment or with font family names defined in @font-face rules. User agents must match these names case insensitively, using the “Default Caseless Matching” algorithm outlined in the Unicode specification [UNICODE].

2 Likes

Who in here has NOT read that I watched, again and again and again, the HTML CSS lessons given by EJMedia in YouTube? Indeed, its is his CSS code in the UL part of the index that I just copied over and made the needed changes. Love the transferability of code to whatever application is needed. Its cool that way.

The 50px padding in the LI is to horizontally separate the listings so that they ended up as wide as they did. A graphics specialist told me to do that, it looked better visually. The ends are near the sides of the picture.

RonPat, some browsers will squeeze the site down quite badly, and you never know how the site will look to EVERYbody that brings it up on their monitor, Ipad, or phone. Some things are just out of control!

Ran the vaidator, as I thought I mentioned. It only had 2 complaints, one of which I thought valid. Wonder why the validator doesn’t recognize Tahoma as a valid font?

When I look at it, it shows 10 errors. The 10th being a “Cannot recover after last error. Any further errors will be ignored.”
Which basically means the code is so invalid it can’t make enough sense of it to continue the validation process.

Beware of Youtube tutorials, there is a lot of rubbish out there as it is beyond editorial control to a great extent and a lot of stuff is out-dated. I did take a brief look at tutorials by EJmedia and their (quite dated) webistes and was not overly impressed by what I saw.

2 Likes