1 reply [Last post]
trebien21
trebien21's picture
Offline
newbie
Last seen: 6 years 4 weeks ago
Timezone: GMT-4
Joined: 2015-06-27
Posts: 1
Points: 2

Hi All,

I am new here and just started using CSS. Below you will see my html first, then my css. I am trying to format the navigation bar which should show links side by side. I am using the div class=nav to change the area I have chosen.

html>
 <head>
 <meta http-equiv="content-Type" content="text/html; css; charset=utf-8"/>
 <meta name="copyright" content="Web Mercenary is a registered trademark of Matthew Hall"/>
 <meta name="description" content="Web developer for hire, free quotes, portfolio, and resume"/>
 <meta name="robots" content="index,follow"/>
  <meta name="robots" content="index,follow"/>
  <meta name="Web Mercanery" content="Hire me as your next web developer"/>
<title>Web Mercenary</title>
 </head>
	<body>
		<h1>Matthew Hall</h1>
		<h2>Hired Gun Web Developer</h2>
		<p>The internet is now a part of life in ways we never considered.  Everyday billions of people log on, connect, 
			and download with the web.  What can you do with this website?  This website is a resume as well as a portfolio.  
			if you are reading this right now you have probably heard of me through one of my projects, and need some
			help.  Below you will find links to my extended bio, project portfolio, and how to request a quote.</p>
		<p>Here are a list of some of my skills</p>
			<ul>
				<li>HTML coding, I built this site from scratch </li>
				<li>CSS While I am not a designer, I can use a color wheel Ha Ha </li>
				<li>JavaScript the code that makes the website work</li>
			</ul>
		<h3>Mercenary Notes</h3>
		<p></p>
			<div class="nav"><!-- Here is the nav class -->
			<ul>
				<li><a href="bio.html">Bio</a></li>
				<li><a href="projects.html">Current Projects</a></li>
				<li><a href="quote.html">Hire Me!</a></li>
 
			</ul>
			</div>
 
 
	</body>
 
</html> 

As you can see I have this set up here now for the css:

* {
	background-color: #f2f1ed;
 
 
 
}
 
h1 {
 
	color: #333333;
	font-family:Verdana;
	font-size:250%;
 
}
h2, h3 {
 
	color: #333333;
	font-family:Verdana;
	font-size: 20px}
 
 
 
 
p {
 
	color: #333333;
	font-family:Georgia;
	font-size:18px;}
 
 
.nav{
    color: black;
    font-family: Georgia;}

When I test this in browser, absolutely nothing changes in the area nav. Not sure why this isn't working.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Styling the wrong element

A couple of notes first:Always format your code for ease of reading by a human. For example,

  • indent nested elements by a sane amount. The common tab is eight spaces which is way too much. Since your line lengths should not exceed 80 characters, it only needs five levels of nesting to start the new line half-way across the page. Configure your editor to indent two spaces or three maximum. Tabs should be saved as spaces, not tab.
  • Separate sibling block elements with a blank line. My code below illustrates.
  • Use a mono-space font in your editor. It will maintain formatting, where a proportional font cannot.
  • Avoid superfluous nesting. Example: The ul element is a perfectly good container for list items. There is no need to wrap a div around it
  • The tag line is a part of it heading. See h1. The small tag implies de-emphasis and is a good semantic fit
  • I changed the h1 and h2 to serif fonts. Larger font sizes become more interesting with serifs

Now the code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    body {
      background-color: #f2f1ed;
      color: black;
      font: 100%/1.25 sans-serif;
      margin: 0;
      padding: 1.25em
    }
 
    p {
      font-size: 1em;
    }
 
    h1 {    
      color: #333333;
      font-family: serif;
      font-size:250%;
    }
 
    h1 small {
      display: block;
      font-family: sans-serif;
      font-size: 1rem;
      margin-left: 2.5em;
    }
 
    h2, h3 {
      color: #333333;
      font-family: serif;
      font-size: 20px
    }
 
    p {
      color: #333333;
      font-family:Georgia;
      font-size:18px;
    }
 
    .nav {
      color: black;
      font-family: Georgia;
    }
 
    /*   This is key, it's the a:link that needs color.   */
    .nav a {
      color: black;
      }
 
    /*]]>*/
    </style>
  </head>
 
  <body>
    <h1>
      Matthew Hall <small>Hired Gun Web Developer</small>
    </h1>
 
    <p>
      The internet is now a part of life in ways we never
      considered. Everyday billions of people log on, connect, and
      download with the web. What can you do with this website?
      This website is a resume as well as a portfolio. if you are
      reading this right now you have probably heard of me through
      one of my projects, and need some help. Below you will find
      links to my extended bio, project portfolio, and how to
      request a quote.
    </p>
 
    <h2>
      Here <del>are</del> <ins>is</ins> a list of some of my skills
    </h2>
 
    <ul>
      <li>HTML coding, I built this site from scratch
      </li>
 
      <li>CSS While I am not a designer, I can use a color wheel Ha
      Ha
      </li>
 
      <li>JavaScript the code that makes the website work
      </li>
    </ul>
 
    <h2>
      Mercenary Notes
    </h2>
 
    <ul class="nav">
      <li>
        <a href="bio.html">Bio</a>
      </li>
 
      <li>
        <a href="projects.html">Current Projects</a>
      </li>
 
      <li>
        <a href="quote.html">Hire Me!</a>
      </li>
    </ul>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.